Mazoezi ya Uratibu wa Maandishi kwenye CSS

Nakili msimbo ufuatao wa HTML kwako wewe na utatue kazi zilizopendekezwa hapa chini:

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

Weka vichwa vyote h1 upande wa kulia.

Weka vichwa vyote h2 katikati.

Weka upana wa meza zote kuwa 500px.

Weka maandishi kwenye seli th upande wa kushoto.

Weka maandishi kwenye seli td katikati.

Weka upana wa aya zote kuwa 300px.

Ratibu maandishi ya aya zote wakati huo huo upande wa kulia na wa kushoto.

Weka vichwa h2 upana wa 300px. Weka katikati. Zingatia kuwa kitovu kitakuwa ndani ya hizo 300px.