ในการนำเสนอข้อมูลต่าง ๆ นั้น จะเห็นว่าการนำเสนอข้อมูลด้วยตาราง จะทำให้เกิดความเข้าใจได้ง่ายขึ้น สามารถเปรียบเทียบความแตกต่าง ๆ ของข้อมูลได้อย่างชัดเจน
นอกจากประโยชน์ดังกล่าวในการสร้างเว็บเพจนั้น ตารางยังสามารถนำมาช่วยในการจัดรูปแบบของจอภาพบนเว็บเพจได้อีกด้วย
เพื่อแบ่งแยกหน้าเว็บเพจออกเป็น ส่วน ๆ เกิดความเป็นระเบียบและความสวยงามมากขึ้น
คำสั่งหรือแท็กที่ใช้ในการสร้างตารางคือ <table>...</table>
ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้
<table>...</table>
เป็นการบอกจุดเริ่มต้นและจุดสิ้นสุดในการสร้างตาราง
<tr>....</tr>
เป็นการบอกจำนวนแถว (row)
<td>...</td>
เป็นการบอกจำนวนคอลัมน์ (colunm)
ตัวอย่าง
รูปแบบการเขียนโค้ด
การแสดงผล
การตีเส้น และสีเส้นตาราง การกำหนดระยะห่างระหว่างช่องเซลล์ และการเว้นระยะข้อมูลในเซลล์
จากตัวอย่างจะเห็นว่าไม่ปรากฎเส้นตารางขึ้นมาบนหน้าเว็บเพจ หากต้องการให้มีเส้นตาราง ต้องมีการใช้คุณสมบัติหรือแอททริบิวต์ borderช่วย
ซึ่งจะต้องเขียนไว้ในแท็ก <table> ดังนี้
<table border="1">
นอกจากความหนาของเส้นตารางแล้ว ยังมีแอททริบิวต์ที่กำหนดสีของเส้นตาราง bordercolor ความห่างของช่องเซล์ cellspacing และการเว้นระยะ
ระหว่างข้อมูลในเซลล์ กับกรอบเซลล์ cellpadding โดยใช้แอททริบิวต์ดังต่อไปนี้ bordercolor,cellspacing และ cellpadding
เขียนต่อท้่ายในแท็ก <table> ดังนี้
<table border="1" bordercolor="blue" cellspacing="5" cellpadding="10">
border="1" หมายความว่าให้ตีเส้่นด้วยความหนาของเส้น 1 จุด (pixel) หากไม่ต้องการเส้นให้กำหนดค่า
เป็น "0" หรือไม่ต้องใช้แอททริบิวต์นี้
bordercolor="ค่าสี" หมายถึงกำหนดสีเ้ส้นตาราง สามารถระบุค่าสี เช่น "blue" คือสีน้ำเงิน หรือใส่เป็น
ค่าตัวเลขฐานสิบหกก็ได้
cellspacing="5" หมายถึงระยะห่างระหว่างช่องเซลล์มีค่าเป็น 5 จุด (pixel)
cellpadding="10" หมายถึงระยะห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์มีค่าเป็น 10 จุด (pixel)
ตัวอย่าง การสร้างตารางโดยใช้แอททริบิวต์การตีเส้น สีเส้นตารางและการเว้นระยะต่าง ๆ
รูปแบบการเขียนโค้ด
การปรับความกว้างและความสูงให้กับตาราง
การกำหนดความกว้างและความสูงให้กับตารางโดยใช้แอททริบิวต์ width และ height ในแท็ก <table> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้
1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น
<table width="50%" height="60%">
2.กำหนดความกว้าง และความยาวเป็นจุด (pixel) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์
ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
<table width="400" height="200">
ตัวอย่าง การกำหนดความกว้างและความสูงของตาราง
การแสดงผล
การจัดตำแหน่งข้อมูลในตาราง
ข้อมูลในตารางแต่ละช่องสามารถจัดตำแหน่งให้อยู่ ชิดซ้าย ชิดขวา หรือตรงการเซลล์ได้ โดยการใช้ แอททริบิวต์ align="ตำแหน่งของข้อมูล" ลงในแท็ก <tr> หรือ <td> เช่น
<tr align="center"><td> แถว 1 คอลัมน์ 1
</td><td> แถว 1 คอลัมน์ 2 </td></tr>
หมายถึง จัดตำแหน่งข้อมูลแถวที่ 1 ทั้งแถวให้อยู่ตรงกลางเซลล์
<tr><td align="center"> แถว 1 คอลัมน์ 1
</td><td> แถว 1 คอลัมน์ 2 </td></tr>
หมายถึง จัดตำแหน่งข้อมูลในแถวที่ 1 คอลัมน์ที่ 1 ให้อยู่ตรงกลางเซลล์ เพียงเซลล์เดียว
ตำแหน่งของข้อมูล มีดังนี้
"center" หมายถึง อยู่ตรงกลางเซลล์
"justify" หมายถึง เต็มช่องเซลล์
"left" หมายถึง อยู่ชิดด้านซ้ายเซลล์
"right" หมายถึง อยู่ชิดด้านขวาเซลล์
ตัวอย่าง การกำหนดตำแหน่งข้อมูลในตาราง
การแสดงผล
การรวมเซลล์ตาราง
เป็นการผสานเซลล์ตั้ง 2 เซลล์ขึ้นไป เหมือนตารางใน Microsoft Word หรือ Microsoft Excel การรวมเซลล์มี 2 ลักษณะ คือ การรวมคอลัมน์ และการรวมแถว
1) การรวมคอลัมน์
เป็นการรวมเซลล์ตามแนวนอนตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง COLSPAN กำหนดไว้ในคำสั่ง <TD>
รูปแบบ
<TR> <TD COLSPAN = " จำนวนคอลัมน์ที่รวม " > ข้อความ </TD> </TR>
เช่น
<TD COLSPAN = "3">จำนวนนักเรียน</TD>
เป็นคำสั่งรวมคอลัมน์จำนวน 3 คอลัมน์มาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ จำนวนนักเรียน
ตัวอย่าง การรวมคอลัมน์
การแสดงผล
2) การรวมแถว
เป็นการรวมเซลล์ตามแนวตั้ง ตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง ROWSPAN กำหนดไว้ในคำสั่ง <TD> เหมือนการรวมคอลัมน์
รูปแบบ
<TR> <TD ROWSPAN ="จำนวนแถวที่รวม"> ข้อความ </TD></TR>
เช่น
<TD ROWSPAN ="2">ลำดับที่</TD> เป็นคำสั่งรวมแถวจำนวน 2 แถวมาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ ลำดับที่
ตัวอย่าง การรวมแถว
การแสดงผล
แหล่งที่มา
http://school.obec.go.th/pp_school/html/table.html
http://www.kty.ac.th/html/unit5/unit503.html
