АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
⊗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.

enru