CSS-də mətnin düzlənşdirilməsi üzrə təcrübə

Aşağıdakı HTML kodunu özünüzə köçürün və onun üçün aşağıda verilmiş tapşırıqları həll edin:

<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>

Butun h1 başlıqlarını sag kənara düzləşdirin.

Butun h2 başlıqlarını mərkəzə düzləşdirin.

Butun cədvəllərə 500px genişlik təyin edin.

th xanalarındakı mətni sol kənara düzləşdirin.

td xanalarındakı mətni mərkəzə düzləşdirin.

Butun abzaslara 300px genişlik təyin edin.

Butun abzasların mətnini eyni zamanda hem sag hem də sol kənara düzləşdirin.

h2 başlıqlarına 300px genişlik təyin edin. Onları mərkəzə düzləşdirin. Diqqət edin ki, düzləşdirmə bu 300px daxilində baş verəcək.