หากต้องการนำเสนอข้อมูลที่มีปริมาณมากๆ หรือข้อมูลที่ต้องมีการเปรียบเทียบกันการนำเสนอข้อมูลในรูปแบบของตารางจะช่วยทำให้ข้อมูลประเภทนี้ดูง่ายยิ่งขึ้นและเป็นระเบียบเรียบร้อยอ่านได้ง่ายกว่าปกติ การสร้างตารางในเอกสาร HTML มีอยู่หลายรูปแบบแล้วแต่ผู้เขียนโปรแกรมจะกำหนดโดยใช้คำสั่งต่าง ๆ แท็กในการสร้งตาราง มีดังนี้ <table> , <tr> และ <td>
ชื่อแท็ก | table , tr และ td |
ตำแหน่งแท็ก | table อยู่ภายในแท็ก <body>...</body> tr อยู่ภายในแท็ก <table>...</table> td อยู่ภายในแท็ก <tr>...</tr> |
รูปแบบการใช้แท็ก | <table> <tr><td>ข้อมูล</td><td>ข้อมูล</td></tr> <tr><td>ข้อมูล</td><td>ข้อมูล</td></tr> ... </table> |
จำนวนแท็ก <tr>...</tr> เป็นการกำหนดจำนวนแถวในตาราง และจำนวนแท็ก <td>...</td> เป็นการกำหนดจำนวนคอลัมน์ในแต่ละแถว ตัวอย่างต่อไปนี้เป็นการสร้างตาราง 2 แถว 2 คอลัมน์ ส่วนข้อมูลที่อยู่ในตารางจะใส่ในแท็ก <td>...</td> สำหรับตัวอย่างนี้จะยังไม่ใส่ข้อมูลลงไปในตารางแต่จะใส่แท็ก ลงไปเพื่อให้ตารางแสงผลลัพธ์ได้
<tr> <td>เซลล์ที่ 1</td> <td>เซลล์ที่ 2</td> </tr>
<tr> <td>เซลล์ที่ 3</td> <td>เซลล์ที่ 4</td> </tr>
</table>
จากการทดลองสร้างตารางจะเห็นได้ว่าข้อมูลจะเรียงกันเป็นแถว แต่จะไม่แสดงเส้นตารางซึ่งในการแสดงเส้นตาราง จะต้องกำหนดแอททริบิวต์ให้แสดงเส้นตาราง
ในการสร้างตารางปกติถ้าไม่ได้กำหนดขนาดเส้นตาราง จะทำให้ไม่สามารถมารถมองเห็นหรือแสดงเป็นเส้นตาราง การำหนดให้แสดงเ้ส้นตารางจะใ้ช้ แอททริบิวท์ border
ชื่อแอททริบิวท์ | border |
ตำแหน่งแท็ก | อยู่ในแท็กเปิด <table> |
รูปแบบการใช้แท็ก | <table border="value">... </table> |
value | ค่ากำหนดเป็นตัวเลข เช่น 1 2 3 |
<tr> <td>เซลล์ที่ 1</td> <td>เซลล์ที่ 2</td> </tr>
<tr> <td>เซลล์ที่ 3</td> <td>เซลล์ที่ 4</td> </tr>
</table>