สอนภาษา HTML: การเเทรกตาราง

ในการนำเสนอข้อมูลต่างๆนั้น จะเห็นว่าการนำเสนอข้อมูลด้วยตาราง จะทำให้เกิดความเข้าใจได้ง่ายขึ้น สามารถเปรียบเทียบความแตกต่างๆของข้อมูลได้อย่างชัดเจน นอกจากประโยชน์ดังกล่าวในการสร้างเว็บเพจนั้น ตารางยังสามารถนำมาช่วยในการจัดรูปแบบของจอภาพบนเว็บเพจได้อีกด้วย เพื่อแบ่งแยกหน้าเว็บเพจออกเป็นส่วนๆ เกิดความเป็นระเบียบและความสวยงามมากขึ้น

คำสั่งหรือแท็กที่ใช้ในการสร้างตารางคือ <table>..</table>

ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้

<table>...</table> เป็นการบอกจุดเริ่มต้นและจุดสิ้นสุดในการสร้างตาราง
<tr>....</tr> เป็นการบอกจำนวนแถว (row)
<td>...</td> เป็นการบอกจำนวนคอลัมน์ (colunm)

ตัวอย่าง การสร้างเอกสารเว็บ สำหรับสร้างตาราง

จากตัวอย่างจะเห็นว่าไม่ปรากฎเส้นตารางขึ้นมาบนหน้าเว็บเพจ หากต้องการให้มีเส้นตาราง ต้องมีการใช้คุณสมบัติหรือแอททริบิวต์ border ช่วย ซึ่งจะต้องเขียนไว้ในแท็ก <table> ดังนี้

<table border="1">

ตัวอย่างการสร้างตารางโดยใช้แอททริบิวต์การตีเส้น

การกำหนดข้อความกำกับให้กับตาราง <caption>

สามารถใส่ข้อความกำกับตาราง เพื่อให้ทราบว่าตารางนั้นนำเสนอข้อมูลเกี่ยวกับเรื่องใด โดยมีรูปแบบดังนี้

<caption align="ตำแหน่ง">ข้อความกำกับตาราง</caption>

โดยค่า ตำแหน่ง มีดังนี้

top หมายถึง อยู่กลางตารางด้านบน
bottom หมายถึง อยู่กลางตารางด้านล่าง
left หมายถึง อยู่ด้านบนซ้าย
right หมายถึง อยู่ด้านบนขวา

ตัวอย่างการสร้างตารางโดยมีข้อความกำกับตาราง

การปรับความกว้างและความสูงให้กับตาราง

การกำหนดความกว้างและความสูงให้กับตารางโดยใช้แอททริบิวต์ width และ height ในแท็ก <table> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้

กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น

เช่น <table width="50%" height="60%">

กำหนดความกว้าง และความยาวเป็นจุด (pixel) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง

เช่น<table width="400" height="200">

ตัวอย่างการกำหนดความกว้างและความสูงของตาราง