Практыка на выраўноўванне тэксту ў CSS
Скапіруйце сабе наступны HTML код і вырашыце для яго прыведзеныя ніжэй задачы:
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
Пастаўце ўсе загалоўкі h1 па правым краі.
Задание 2
Пастаўце ўсе загалоўкі h2 па цэнтры.
Задание 3
Усталюйце ўсім табліцам шырыню ў 500px.
Задание 4
Пастаўце тэкст у ячэйках th па левым
краі.
Задание 5
Пастаўце тэкст у ячэйках td па цэнтры.
Задание 6
Усталюйце ўсім абзацам шырыню ў 300px.
Задание 7
Выраўнуйце тэкст усіх абзацаў адначасова па правым і па левым краі.
Задание 8
Усталюйце загалоўкам h2 шырыню ў
300px. Пастаўце іх па цэнтры. Звярніце
ўвагу на тое, што цэнтраванне будзе адбывацца
ўнутры гэтых 300px.