ตาราง HTML
ตัวอย่างเช่นตาราง HTML:
ชื่อจริง | นามสกุล | จุด |
---|---|---|
จิลล์ | ช่างเหล็ก | 50 |
วันก่อนวันหยุด | แจ็คสัน | 94 |
จอห์น | กวางตัวเมีย | 80 |
อาดัม | จอห์นสัน | 67 |
ตัวอย่างออนไลน์
ตาราง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างตารางในเอกสาร HTML
(คุณสามารถหาตัวอย่างเพิ่มเติมที่ด้านล่างของหน้านี้.)
ตาราง HTML
แบบฟอร์มที่กำหนดโดย <table> แท็ก ตารางแต่ละคนมีจำนวนเส้น (กำหนดโดย <tr> แท็ก) แต่ละเส้นจะถูกแบ่งออกเป็นจำนวนของเซลล์ (กำหนดโดย <td> แท็ก) หมายถึงเนื้อหาของตัวอักษร td ข้อมูลตาราง (ตารางข้อมูล) ที่เป็นเซลล์ข้อมูล ข้อมูลเซลล์สามารถประกอบด้วยข้อความ, ภาพ, รายการ, ย่อหน้ารูปแบบแนวนอนโต๊ะและอื่น ๆ
เช่นโต๊ะ
<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>
เบราว์เซอร์จะแสดงต่อไปนี้ ::
แถวที่ 1 มือถือ 1 | แถวที่ 1 มือถือ 2 |
แถวที่ 2, มือถือ 1 | แถวที่ 2, มือถือ 2 |
ตาราง HTML และคุณสมบัติชายแดน
หากคุณไม่ได้กำหนดพรมแดนแอตทริบิวต์ตารางจะไม่แสดง บางครั้งนี้เป็นประโยชน์ แต่เวลาส่วนใหญ่ของเราต้องการที่จะแสดงให้เห็นชายแดน
ใช้คุณสมบัติชายแดนเพื่อแสดงตารางที่มีพรมแดน:
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
ส่วนหัวของตาราง HTML
ส่วนหัวของตารางโดยใช้ <TH> แท็กที่กำหนดไว้
เบราว์เซอร์ส่วนใหญ่จะแสดงข้อความส่วนหัวเป็นตัวหนาศูนย์กลาง:
<tr>
<th>Header 1</th>
<th>Header 2</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>
เบราว์เซอร์จะแสดงต่อไปนี้:
ส่วนหัว 1 | ส่วนหัว 2 |
---|---|
แถวที่ 1 มือถือ 1 | แถวที่ 1 มือถือ 2 |
แถวที่ 2, มือถือ 1 | แถวที่ 2, มือถือ 2 |
ตัวอย่างเพิ่มเติม
ชายแดนตารางไม่มี
กรณีนี้ไม่ได้แสดงให้เห็นถึงเส้นขอบตาราง
ส่วนหัวของตาราง (หัวเรื่อง)
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการแสดงส่วนหัวของตาราง
ตารางที่มีหัว
ตัวอย่างนี้แสดงให้เห็นถึงที่มีชื่อ (คำบรรยายใต้ภาพ) ของแบบฟอร์ม
รายการระหว่างธนาคารทั่วคอลัมน์หรือเซลล์ของตาราง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการกำหนดข้ามหรือคอลัมน์ของเซลล์ตาราง
แท็กภายในตาราง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการแสดงองค์ประกอบในองค์ประกอบที่แตกต่างกัน
มือถือ padding (มือถือ padding)
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้ช่องว่างภายในเซลล์เพื่อสร้างเนื้อหาเซลล์ว่างและเส้นขอบระหว่าง
ระยะห่างระหว่างเซลล์ (ระยะห่างมือถือ)
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้เซลล์ระยะห่างเพื่อเพิ่มระยะห่างระหว่างเซลล์
แท็กตาราง HTML
标签 | 描述 |
---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义用于表格列的属性 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |