---

offline version v3
Запись на курсы по HTML, CSS, JavaScript, PHP, фреймворкам и CMS,
а также: помощь в поиске работы и заказов, стажировка на реальных проектах→
⊗mkPmCLTAP 34 of 249 menu
Верстка JavaScript PHP TypeScript NodeJS Python Java C++ Rust SQL Vue React Angular jQuery Laravel Git Webpack Gulp Terminal Internet Глоссарий Сленг Соц. сети
Практика на выравнивание текста в 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>
№1⊗jsPmSMMA

Поставьте все заголовки h1 по правому краю.

№2⊗jsPmSMMA

Поставьте все заголовки h2 по центру.

№3⊗jsPmSMMA

Установите всем таблицам ширину в 500px.

№4⊗jsPmSMMA

Поставьте текст в ячейках th по левому краю.

№5⊗jsPmSMMA

Поставьте текст в ячейках td по центру.

№6⊗jsPmSMMA

Установите всем абзацам ширину в 300px.

№7⊗jsPmSMMA

Выровняйте текст всех абзацев одновременно по правому и по левому краю.

№8⊗jsPmSMMA

Установите заголовкам h2 ширину в 300px. Поставьте их по центру. Обратите внимание на то, что центрирование будет происходить внутри этих 300px.

←→
Трепачёв Дмитрий © 2012-2024
t.me/trepachev_dmitry
↑

h1 {
    text-align: right;
}
h2 {
    text-align: center;
    width: 300px;
}
table {
    width: 500px;
}
th {
    text-align: left;
}
td {
    text-align: center;
}
p {
    text-align: justify;
    width: 300px;
}