Basics of Tables

ตาราง HTML ควรใช้สำหรับการนำข้อมูลมาสร้างเป็นภาพจากแบบจำลองตาราง grid มันไม่ควรนำมาสร้างเป็น layout แบบที่ webdesigner หลายๆคนนำมาใช้กัน เพราะมันมีเหตุผล 2 อย่างดังนี้

• เพราะว่าความหมายจะผิดไป
• เพราะว่าตารางจะไม่สามารถปรับเปลี่ยนหรือยืดหยุ่นได้อย่าง div หรือ element อื่นๆ

Element ของตารางมีความหลากหลาย แต่ element ที่เราจะพูดถึงตัวแรกก็คือ <table>

เมื่อเราวางโครงสร้างของตาราง เราจะมี row (แถวแนวนอน) และ cell (ช่อง) เราจะไม่เรียกแถวแนวตั้งว่า column

แท็คของ row คือ <tr> ย่อมาจาก table row ส่วนแท็คของ cell คือ <td> ย่อมาจาก table data ซึ่งเป็นที่ๆเราจะใส่ข้อมูลลงไป

ก่อนทีเราจะเริ่มสร้างตาราง เราต้องรู้ก่อนว่าเราต้องการให้ตารางออกมาหน้าตาแบบไหน จะทำให้เราโปรแกรมได้ง่ายขึ้น ตัวอย่างนี้เราจะสร้างตารางที่มี 3 column 4 row

<table border="1" width="100%">
	<tr>
			<td>Row 1, cell 1</td>
			<td>Row 1, cell 2</td>
			<td>Row 2, cell 3</td>
		</tr>
		<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>
</table>

เราจะเห็นได้ว่า<td> อยู่ใน nest ของ <tr> tags, แปลว่า ทุกๆ cell จะ อยู่ในแถวของ row นั้นๆ

NB! (จดไว้ให้ดี!)

เราได้เพิ่มตัวแปร border เข้าไปใน <table> เพื่อจะได้เห็นขอบเขตของตารางตัวอย่าง แต่เวลาเขียนโปรแกรมจริงๆนั้น ไม่ต้องเพิ่มขอบเขตเข้าไปเพราะ CSS จะจัดการให้เอง