ตัวอย่าง
ตาราง HTML ง่ายๆที่มีสองคอลัมน์และสองแถว:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
ลองตัวเอง» เพิ่มเติม "ลองตัวเอง" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
<table> แท็กกำหนดตาราง HTML
ตาราง HTML ประกอบด้วย <table> องค์ประกอบและหนึ่งหรือ <tr> , <th> และ <td> องค์ประกอบ
<tr> องค์ประกอบที่กำหนดแถวของตารางที่ <th> องค์ประกอบที่กำหนดส่วนหัวตารางและ <td> องค์ประกอบกำหนดเซลล์ตาราง
ตาราง HTML ที่ซับซ้อนมากขึ้นนอกจากนี้ยังอาจรวมถึง <caption>, <col>, <colgroup>, <thead>, <tfoot> และ <tbody> องค์ประกอบ
สนับสนุนเบราว์เซอร์
| ธาตุ | |||||
|---|---|---|---|---|---|
| <table> | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
ความแตกต่างระหว่าง HTML 4.01 และ HTML5
"align", "bgcolor", "cellpadding", "cellspacing", "frame", "rules", "summary" และ "width" คุณลักษณะที่ไม่สนับสนุนใน HTML5
แอตทริบิวต์
| คุณลักษณะ | ความคุ้มค่า | ลักษณะ |
|---|---|---|
| align | left center right | ได้รับการสนับสนุนใน HTML5 ระบุการจัดตำแหน่งของตารางตามข้อความรอบ |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | ได้รับการสนับสนุนใน HTML5 ระบุสีพื้นหลังของตาราง |
| border | 1 0 | ระบุหรือไม่ว่าตารางจะถูกใช้เพื่อวัตถุประสงค์ในการจัดวาง |
| cellpadding | pixels | ได้รับการสนับสนุนใน HTML5 ระบุช่องว่างระหว่างผนังเซลล์และเนื้อหาเซลล์ |
| cellspacing | pixels | ได้รับการสนับสนุนใน HTML5 ระบุช่องว่างระหว่างเซลล์ |
| frame | void above below hsides lhs rhs vsides box border | ได้รับการสนับสนุนใน HTML5 ระบุว่าส่วนของเส้นขอบนอกที่ควรจะมองเห็น |
| rules | none groups rows cols all | ได้รับการสนับสนุนใน HTML5 ระบุส่วนของพรมแดนภายในที่ควรจะมองเห็น |
| sortable | sortable | ระบุว่าตารางที่ควรจะจัดเรียง |
| summary | text | ได้รับการสนับสนุนใน HTML5 ระบุสรุปเนื้อหาของตารางที่ |
| width | pixels % | ได้รับการสนับสนุนใน HTML5 ระบุความกว้างของตาราง |
แอตทริบิวต์ทั่วโลก
<table> แท็กยังสนับสนุน แอตทริบิวต์ใน HTML
แอตทริบิวต์เหตุการณ์
<table> แท็กยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML
ลองตัวเอง - ตัวอย่าง
ส่วนหัวของตาราง
วิธีการสร้างส่วนหัวตาราง
ตารางที่มีคำอธิบาย
ตาราง HTML ที่มีคำอธิบาย
แท็กภายในตาราง
วิธีการแสดงองค์ประกอบภายในองค์ประกอบอื่น ๆ
เซลล์ที่ครอบคลุมแถวมากกว่าหนึ่ง / คอลัมน์
วิธีการกำหนดตารางเซลล์ที่ครอบคลุมมากกว่าหนึ่งแถวหรือคอลัมน์หนึ่ง
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา HTML: ตาราง HTML
อ้างอิง HTML DOM: Table วัตถุ
CSS Tutorial: การ Styling ตาราง
ตั้งค่าเริ่มต้น CSS
เบราว์เซอร์ส่วนใหญ่จะแสดง <table> องค์ประกอบที่มีค่าเริ่มต้นต่อไปนี้:
ตัวอย่าง
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
} ลองตัวเอง»