ฝึกปฏิบัติการจัดตำแหน่งข้อความใน 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 นี้