Tekstin tasausharjoitus CSS:ssä

Kopioi itsellesi seuraava HTML-koodi ja ratkaise siihen alla annetut tehtävät:

html<h1>Main page title</h1>
<table border="1">
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>100</td>
    <td>5kg</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>200</td>
    <td>6kg</td>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>300</td>
    <td>7kg</td>
  </tr>
</table>

<h2>Secondary heading 1</h2>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>

<h2>Secondary heading 2</h2>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>

<h2>Secondary heading 3</h2>
<table border="1">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
  </tr>
  <tr>
    <td>cell 4</td>
    <td>cell 5</td>
    <td>cell 6</td>
  </tr>
  <tr>
    <td>cell 7</td>
    <td>cell 8</td>
    <td>cell 9</td>
  </tr>
</table>
Задание 1

Aseta kaikki h1-otsikot oikeaan reunaan.

Задание 2

Aseta kaikki h2-otsikot keskelle.

Задание 3

Aseta kaikille taulukoille leveys 500px.

Задание 4

Aseta tekstin th-soluissa vasempaan reunaan.

Задание 5

Aseta tekstin td-soluissa keskelle.

Задание 6

Aseta kaikille kappaleille leveys 300px.

Задание 7

Tasaa kaikkien kappaleiden tekstin samanaikaisesti oikeaan ja vasempaan reunaan.

Задание 8

Aseta h2-otsikoille leveys 300px. Aseta ne keskelle. Kiinnitä huomiota siihen, että keskitetään näiden 300px sisällä.