 |
HTML > HTML Tutorial
ตาราง HTML
ตาราง HTML (HTML Table) สามารถสร้างขึ้นมาได้
ตาราง
ตารางได้รับการกำหนดด้วยแท็ก <table> ตารางเป็นการแบ่งพื้นที่ออกเป็นแถว (ด้วยแถว <tr>) และแต่ละแถวได้รับการเป็นเซลข้อมูล (ด้วยแท็ก <td>) ตัวอักษร td ย่อมาจาก table data ซึ่งเป็นเนื้อหาของเซลข้อมูล เซลข้อมูลหนึ่งสามารถเก็บข้อความ ภาพ รายการ ย่อหน้า ฟอร์ม ตาราง และ horizontal rule เป็นต้น
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> |
การมองเห็นบน browser
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
ตารางและคุณลักษณะ border
ถ้าไม่ได้ระบุคุณลักษณะ border ตารางจะได้รับการแสดงโดยปราศจากขอบ บางครั้งสิ่งนี้เป็นประโยชน์
แต่ส่วนใหญ่ต้องการแสดงขอบ
ในการแสดงตารางที่มีขอบ ต้องใช้คุณลักษณะ border
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
|
หัวข้อในตาราง
หัวข้อในตารางได้รับการกำหนดด้วยแท็ก <th>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
|
การมองเห็นบน browser
| Heading |
Another Heading |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
เซลว่างในตาราง
เซลตารางที่ไม่มีเนื้อหาจะไม่ได้รับการแสดงที่ดีใน browser ส่วนใหญ่
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
|
การมองเห็นบน browser
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
|
ให้สังเกตว่าขอบรอบเซลว่างหายไป แต่ Mozilla Firefox แสดงขอบ
การหลีกเลี่ยงให้เพิ่มช่องว่าง ( ) กับเซลข้อมูลว่างเพื่อทำให้มองเห็นขอบ
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
|
การมองเห็นบน browser
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
|
ข้อสังเกตเบื้องต้น
<thead>,<tbody> และ <tfoot> element ได้รับการน้อยมาก เพราะการสนับสนุนจาก browser ไม่ดี คาดว่าสิ่งนี้จะเปลี่ยนในเวอร์ชันต่อไปของ XHTML
แท็ก Table
| แท็ก |
คำอธิบาย |
| <table> |
กำหนดตาราง |
| <th> |
กำหนดหัวข้อตาราง |
| <tr> |
กำหนดแถวตาราง |
| <td> |
กำหนดเซลตาราง |
| <caption> |
กำหนดป้ายชื่อ (caption) ตาราง |
| <colgroup> |
กำหนดกลุ่มของคอลัมน์ตาราง |
| <col> |
กำหนดค่าคุณลักษณะสำหรับหนึ่งคอลัมน์หรือมากกว่าในตาราง |
| <thead> |
กำหนดส่วนหัวตาราง |
| <tbody> |
กำหนดส่วนตัวตาราง |
| <tfoot> |
กำหนดส่วนตัวตาราง |
|
|
