ฝึกปฏิบัติการจัดตำแหน่งข้อความใน CSS
คัดลอกโค้ด HTML ต่อไปนี้และแก้ไข ปัญหาที่ให้ไว้ด้านล่าง:
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
จัดตำแหน่งหัวเรื่อง h1 ทั้งหมดชิดขวา
Задание 2
จัดตำแหน่งหัวเรื่อง h2 ทั้งหมดกึ่งกลาง
Задание 3
กำหนดความกว้างให้ตารางทั้งหมดเป็น 500px
Задание 4
จัดตำแหน่งข้อความในเซลล์ th ชิดซ้าย
Задание 5
จัดตำแหน่งข้อความในเซลล์ td กึ่งกลาง
Задание 6
กำหนดความกว้างให้ย่อหน้าทั้งหมดเป็น 300px
Задание 7
จัดชิดขอบทั้งซ้ายและขวาให้ข้อความของย่อหน้าทั้งหมดพร้อมกัน
Задание 8
กำหนดความกว้างให้หัวเรื่อง h2 เป็น
300px จัดให้อยู่กึ่งกลาง โปรดทราบว่า
การจัดกึ่งกลางจะเกิดขึ้นภายใน 300px นี้