1. Home
  2. ตาราง HTML

บทช่วยสอน ตาราง HTML ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ตัวอย่างเช่นตาราง HTML:,ตัวอย่างออนไลน์,ตาราง HTML,เช่นโต๊ะ,ตาราง HTML และคุณสมบัติชายแดน,ส่วนหัวของตาราง HTML,ตัวอย่างเพิ่มเติม,แท็กตาราง HTML,

ตาราง HTML

ตัวอย่างเช่นตาราง HTML:

ชื่อจริง นามสกุล จุด
จิลล์ ช่างเหล็ก 50
วันก่อนวันหยุด แจ็คสัน 94
จอห์น กวางตัวเมีย 80
อาดัม จอห์นสัน 67

ตัวอย่าง

ตัวอย่างออนไลน์

ตาราง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างตารางในเอกสาร HTML

(คุณสามารถหาตัวอย่างเพิ่มเติมที่ด้านล่างของหน้านี้.)

ตาราง HTML

แบบฟอร์มที่กำหนดโดย <table> แท็ก ตารางแต่ละคนมีจำนวนเส้น (กำหนดโดย <tr> แท็ก) แต่ละเส้นจะถูกแบ่งออกเป็นจำนวนของเซลล์ (กำหนดโดย <td> แท็ก) หมายถึงเนื้อหาของตัวอักษร td ข้อมูลตาราง (ตารางข้อมูล) ที่เป็นเซลล์ข้อมูล ข้อมูลเซลล์สามารถประกอบด้วยข้อความ, ภาพ, รายการ, ย่อหน้ารูปแบบแนวนอนโต๊ะและอื่น ๆ

เช่นโต๊ะ

<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>

เบราว์เซอร์จะแสดงต่อไปนี้ ::

แถวที่ 1 มือถือ 1 แถวที่ 1 มือถือ 2
แถวที่ 2, มือถือ 1 แถวที่ 2, มือถือ 2

ตาราง HTML และคุณสมบัติชายแดน

หากคุณไม่ได้กำหนดพรมแดนแอตทริบิวต์ตารางจะไม่แสดง บางครั้งนี้เป็นประโยชน์ แต่เวลาส่วนใหญ่ของเราต้องการที่จะแสดงให้เห็นชายแดน

ใช้คุณสมบัติชายแดนเพื่อแสดงตารางที่มีพรมแดน:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

ส่วนหัวของตาราง HTML

ส่วนหัวของตารางโดยใช้ <TH> แท็กที่กำหนดไว้

เบราว์เซอร์ส่วนใหญ่จะแสดงข้อความส่วนหัวเป็นตัวหนาศูนย์กลาง:

<table border="1">
<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> 定义表格的页脚

บทแนะนำยอดนิยม

Contact US

ตาราง HTML
10/30