บทที่ 12 HTML Tables
HTML Tables คือการสร้างตาราง ในเอกสาร html
- เราสามารถสร้างตาราง ด้วยแท็ก table
ตารางจะแบ่งออกเป็นแถวๆ (ใช้แท็ก tr) และแต่ละแถวจะแบ่งออกเป็นเซลล์ (ใช้แท็ก td)
td ย่อมาจาก table data ซึ่งจะเก็บข้อมูลของแต่ละเซลล์ โดยแต่ละเซลล์สามารถใส่ข้อความ, รูปภาพ, แบบฟอร์ม, รายการ หรือ ตารางอื่น ๆ ก็ได้
- แอตทริบิวต์ border ในแท็ก table คือส่วนที่ใช้กำหนดเส้นขอบตาราง โดยใส่เป็นค่าตัวเลข ในส่วนนี้อาจไม่กำหนดก็ได้ หากว่าเราต้องการให้ตารางไม่มีเส้นขอบ
- เราสามารถกำหนดหัวตารางโดยใช้แท็ก th
เว็บเบราว์เซอร์ส่วนมากจะแสดงผลข้อความในแท็ก th เป็นตัวหนาและจัดกึ่งกลางเซลล์
<html>
<body>
<table border="15">
<tr>
<th>วัน</th>
<th>สิ่งที่ทำ</th>
</tr>
<tr>
<td>จันทร์</td>
<td>ทำงาน</td>
</tr>
<tr>
<td>อาทิตย์</td>
<td>พักผ่อน</td>
</tr>
</table>
</body>
</html>ผลลัพธ์ที่ได้คือ
Tag ต่างๆที่ใช้ในการสร้างตาราง
| <table> | กำหนดตาราง |
| <th> | กำหนดหัวตาราง |
| <tr> | กำหนดแถวของตาราง |
| <td> | กำหนดเซลล์ของตาราง |
| <caption> | กำหนดชื่อตาราง |
| <colgroup> | กำหนดกลุ่มของคอลั่มในตาราง (สำหรับการจัดรูปแบบ) |
| <col /> | กำหนดแอตทริบิวต์ values สำหรับคอลั่มในตาราง(อาจจะเป็นคอลั่มเดียวหรือมากกว่า) |
| <thead> | กลุ่มของเนื้อหาหัวตารางในตาราง |
| <tbody> | กลุ่มของเนื้อหาส่วนตัวของตาราง |
| <tfoot> | กลุ่มของเนื้อหาท้ายตาราง |
