Thead & tbody

เราสามารถใช้ตารางอย่างที่เรียนมาเมื่อบทที่แล้วได้เลย แต่ถ้าอยากจะให้ดูดีขึ้นมาอีก เราจะใช้ <thead> element ซึ่งจะเป็นตัวกำหนดหัวข้อของตาราง แล้วจะเป็นตัวบอก browser ว่าในแต่ละ column ประกอบไปด้วยหัวข้ออะไรบ้าง ส่วน <tbody> element จะเป็นตัวบอก browser ว่า ว่าในแต่ละ cell มีข้อมูลอะไรบ้าง

<table border="1" width="100%">
	<thead>
		<tr>
			<td>Row 1, cell 1</td>
			<td>Row 1, cell 2</td>
			<td>Row 2, cell 3</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Row 2, cell 1</td>
			<td>Row 2, cell 2</td>
			<td>Row 2, cell 3</td>
		</tr>
		<tr>
			<td>Row 3, cell 1</td>
			<td>Row 3, cell 2</td>
			<td>Row 3, cell 3</td>
		</tr>
		<tr>
			<td>Row 4, cell 1</td>
			<td>Row 4, cell 2</td>
			<td>Row 4, cell 3</td>
		</tr>
	</tbody>
</table>

ยังมี element อีกตัว นั่นคือ <th> element ย่อมาจาก table cell heading ใช้แทน <td> element เมื่อใช้ cell เป็นตัวกำหนดหัวข้อของตาราง

สิ่งที่เห็นได้อย่างชัดเจนคือ <thead> เป็นตัวเลือกแรกที่จะนำมาสร้างตาราง (ทีประกอบไปด้วย row แถวแรกของตาราง) แต่เราก็สามารถใช้ column แรกในการใส่หัวข้อตารางได้

ตัวอย่างต่อไปนี้ เหมือนตัวอย่างคราวที่แล้ว แต่เราจะเพิ่ม <th> element เข้าไป

<table border="1" width="100%">
	<thead>
		<tr>
			<th>Fruits</th>
			<th>Vitamin A</th>
			<th>Vitamin C</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Apples</th>
			<td>98 ui</td>
			<td>8.4 mg</td>
		</tr>
		<tr>
			<th>Oranges</th>
			<td>295 ui</td>
			<td>69.7 mg</td>
		</tr>
		<tr>
			<th>Bananas</th>
			<td>76 ui</td>
			<td>10.3 mg</td>
		</tr>
	</tbody>
</table>

เราจะสังเกตได้ว่า เราจะไม่เห็นความแตกต่างระหว่างตัวอย่างเก่ากับใหม่มาก เพราะ thead, tbody, table heading เป็นเพียงการเพิ่มความหมาย สัญลักษณ์ของตารางเข้าไป เราสามารถใช้ CSS เพื่อปรับเปลี่ยนรูปแบบของตารางได้