HTML Table การใช้ ตารางใน HTML

การใช้ตาราง ในภาษา HTML (HTML Table)
ในการทำเว็บไซต์ ตารางจะมีประโยชน์มากในการจัดรูปแบบของเว็บไซต์ เพราะสามารถจัดรูปแบบได้ง่าย โดยในการสร้าง มีส่วนที่สำคัญอยู่สองส่วน นั่นคือ แถวและคอลัมน์


ในการสร้างตาราง แท็กที่ใช้สำหรับการสร้างคือ <table> ภายในแท็ก table จะมีการเขียนในลักษณะเป็นแถว โดยใช้แท็ก <tr> ซึ่งย่อมาจาก table row ในการกำหนดแถวแต่ละแถว โดยในแต่ละแถว จะประกอบไปด้วยคอลัมน์ ที่ถูกกำหนดโดยแท็ก <td> ซึ่งย่อมากจา table data 



ดังตัวอย่าง

<table border="1">
	<tr>
		<td>Row 1, Column 1</td>
		<td>Row 1, Column 2</td>
	</tr>
	<tr>
		<td>Row 2, Column 1</td>
		<td>Row 2, Column 2</td>
	</tr>
</table>


จะได้ผลลัพธ์เป็น


	

		
Row 1, Column 1
		
Row 1, Column 2
	
	

		
Row 2, Column 1
		
Row 2, Column 2
	



จากตัวอย่างข้างบนจะเห็นว่า จะมีแท็ก table ซึ่งจะมีแท็ก tr เป็นการกำหนดแถวอยู่ภายใน และภายในแท็ก tr ยังมีแท็ก td อยู่ภายในซึ่งใช้ในการกำหนดคอลัมน์ จะเห็นว่า ตารางจะมีกรอบอยู่ซึ่งถูกกำหนดโดยแอททริบิวต์ border="1" นั่นหมายถึงมีความหนาเท่ากับ 1 pixel ถ้าไม่ต้องการกรอบ ให้ใส่ border="0"

HTML Table Headers (The <th> Element)
ในการกำหนดหัวข้อตาราง จะใช้แท็ก th ในการกำหนด ซึ่งย่อมาจาก table head ซึ่งในการกำหนดหัวของตารางนี้ บราวเซอร์ที่สำคัญ ๆ ส่วนมาก จะกำหนดให้หัวของตาราง มีตัวอักษร เป็นตัวหนา และมีตำแหน่งอยู่ที่กึ่งกลางของตาราง ดังตัวอย่าง

<table border="1">
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
	</tr>
	<tr>
		<td>Row 1, Column 1</td>
		<td>Row 1, Column 2</td>
	</tr>
	<tr>
		<td>Row 2, Column 1</td>
		<td>Row 2, Column 2</td>
	</tr>
</table>


จะได้ผลลัพธ์เป็น


	

		
Header 1
		
Header 2
	
	

		
Row 1, Column 1
		
Row 1, Column 2
	
	

		
Row 2, Column 1
		
Row 2, Column 2