ตัวอย่าง
ตาราง HTML ง่ายๆด้วยสองเซลล์ตาราง:
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
ลองตัวเอง» เพิ่มเติม "ลองตัวเอง" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
<td> แท็กกำหนดมือถือมาตรฐานในตาราง HTML
ตาราง HTML มีสองชนิดของเซลล์:
- เซลล์ส่วนหัว - มีข้อมูลส่วนหัว (ที่สร้างขึ้นด้วย <th> องค์ประกอบ)
- เซลล์มาตรฐาน - มีข้อมูล (สร้างขึ้นด้วย <td> องค์ประกอบ)
ข้อความใน <th> องค์ประกอบที่เป็นตัวหนาและเป็นศูนย์กลางโดยค่าเริ่มต้น
ข้อความใน <td> องค์ประกอบปกติและจัดชิดซ้ายโดยค่าเริ่มต้น
สนับสนุนเบราว์เซอร์
| ธาตุ | |||||
|---|---|---|---|---|---|
| <td> | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
เคล็ดลับและคำอธิบาย
เคล็ดลับ: ใช้ colspan และ rowspan แอตทริบิวต์ที่จะปล่อยให้ช่วงเนื้อหามากกว่าหลายคอลัมน์หรือแถว!
ความแตกต่างระหว่าง HTML 4.01 และ HTML5
คุณลักษณะรูปแบบทั้งหมดจะถูกลบออกใน HTML5
แอตทริบิวต์
| คุณลักษณะ | ความคุ้มค่า | ลักษณะ |
|---|---|---|
| abbr | text | ได้รับการสนับสนุนใน HTML5 ระบุรุ่นย่อของเนื้อหาในเซลล์ |
| align | left right center justify char | ได้รับการสนับสนุนใน HTML5 สอดคล้องเนื้อหาในเซลล์ |
| axis | category_name | ได้รับการสนับสนุนใน HTML5 แบ่งเซลล์ |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | ได้รับการสนับสนุนใน HTML5 ระบุสีพื้นหลังของเซลล์ |
| char | character | ได้รับการสนับสนุนใน HTML5 สอดคล้องเนื้อหาในเซลล์ให้ตัวละคร |
| charoff | number | ได้รับการสนับสนุนใน HTML5 กำหนดจำนวนของตัวละครเนื้อหาจะสอดคล้องจากตัวอักษรที่ระบุโดย char แอตทริบิวต์ |
| colspan | number | ระบุจำนวนของเซลล์คอลัมน์ควรครอบคลุม |
| headers | header_id | ระบุหนึ่งหรือมากกว่าเซลล์ส่วนหัวของเซลล์ที่เกี่ยวข้องกับ |
| height | pixels % | ได้รับการสนับสนุนใน HTML5 ตั้งค่าความสูงของเซลล์ |
| nowrap | nowrap | ได้รับการสนับสนุนใน HTML5 ระบุว่าเนื้อหาภายในเซลล์ไม่ควรห่อ |
| rowspan | number | ชุดจำนวนแถวมือถือควรครอบคลุม |
| scope | col colgroup row rowgroup | ได้รับการสนับสนุนใน HTML5 กำหนดวิธีการที่จะเชื่อมโยงเซลล์ส่วนหัวและเซลล์ข้อมูลในตาราง |
| valign | top middle bottom baseline | ได้รับการสนับสนุนใน HTML5 แนวตั้งสอดคล้องเนื้อหาในเซลล์ |
| width | pixels % | ได้รับการสนับสนุนใน HTML5 ระบุความกว้างของเซลล์ |
แอตทริบิวต์ทั่วโลก
<td> แท็กยังสนับสนุน แอตทริบิวต์ใน HTML
แอตทริบิวต์เหตุการณ์
<td> แท็กยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML
ลองตัวเอง - ตัวอย่าง
ส่วนหัวของตาราง
วิธีการสร้างส่วนหัวตาราง
ตารางที่มีคำอธิบาย
ตาราง HTML ที่มีคำอธิบาย
แท็กภายในตาราง
วิธีการแสดงองค์ประกอบภายในองค์ประกอบอื่น ๆ
C ells ที่ครอบคลุมแถวมากกว่าหนึ่ง / คอลัมน์
วิธีการกำหนดตารางเซลล์ที่ครอบคลุมมากกว่าหนึ่งแถวหรือคอลัมน์หนึ่ง
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา HTML: ตาราง HTML
อ้างอิง HTML DOM: TableData วัตถุ
CSS Tutorial: ตารางจัดแต่งทรงผม
ตั้งค่าเริ่มต้น CSS
เบราว์เซอร์ส่วนใหญ่จะแสดง <td> องค์ประกอบที่มีค่าเริ่มต้นต่อไปนี้:
td {
display: table-cell;
vertical-align: inherit;
}