Prax na zarovnanie textu v CSS
Skopírujte si nasledujúci HTML kód a vyriešte pre neho uvedené úlohy:
<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>
Zarovnajte všetky nadpisy h1 na pravý okraj.
Zarovnajte všetky nadpisy h2 na stred.
Nastavte všetkým tabuľkám šírku 500px.
Zarovnajte text v bunkách th na ľavý
okraj.
Zarovnajte text v bunkách td na stred.
Nastavte všetkým odsekom šírku 300px.
Zarovnajte text všetkých odsekov súčasne na pravý aj na ľavý okraj.
Nastavte nadpisom h2 šírku
300px. Zarovnajte ich na stred. Dávajte
pozor na to, že centrovanie bude prebiehať
vnútri týchto 300px.