Запіс на курсы па HTML, CSS, JavaScript, PHP, Python, фрэймворкам і CMS,
а таксама: дапамога ў пошуку працы і заказаў, стажыроўка на рэальных праектах→
⊗mkPmCLTAP 34 of 250 menu

Практыка на выраўноўванне тэксту ў CSS

Скапіруйце сабе наступны 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>

Пастаўце ўсе загалоўкі h1 па правым краі.

Пастаўце ўсе загалоўкі h2 па цэнтры.

Усталюйце ўсім табліцам шырыню ў 500px.

Пастаўце тэкст у ячэйках th па левым краі.

Пастаўце тэкст у ячэйках td па цэнтры.

Усталюйце ўсім абзацам шырыню ў 300px.

Выраўнуйце тэкст усіх абзацаў адначасова па правым і па левым краі.

Усталюйце загалоўкам h2 шырыню ў 300px. Пастаўце іх па цэнтры. Звярніце ўвагу на тое, што цэнтраванне будзе адбывацца ўнутры гэтых 300px.

byenru