ตารางอย่างง่าย

นำเสนอข้อมูลในรูปแบบแถวและคอลัมน์ด้วยแท็ก table, tr, th และ td

6 นาที · 3 คำถาม

ตารางเวลา รายการราคา อันดับกีฬา: ข้อมูลบางอย่างอ่านได้อย่างเป็นธรรมชาติในรูปแบบ แถว และ คอลัมน์ นั่นคือสิ่งที่ตารางใน HTML มีไว้เพื่อ แค่สามแท็กก็เพียงพอที่จะเริ่มต้น: <table> ห่อหุ้มทั้งตาราง <tr> (table row) สร้างแถว และ <td> (table data) สร้างเซลล์ภายในแถว

<table>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>0.30 euros</td>
  </tr>
</table>

ในการตั้งชื่อให้แต่ละคอลัมน์ ให้แทนที่ <td> ด้วย <th> (table header) ในแถวแรก เบราว์เซอร์จะแสดงเซลล์ส่วนหัวเหล่านี้เป็น ตัวหนา และจัดกึ่งกลาง ซึ่งทำให้แตกต่างจากข้อมูล

<table>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
</table>

เบราว์เซอร์สร้างตารางทีละแถว: เซลล์แรกของแต่ละ <tr> จะไปอยู่ในคอลัมน์แรก เซลล์ที่สองในคอลัมน์ที่สอง และไล่ไปเรื่อย ๆ โดยค่าเริ่มต้น ตารางจะแสดงผลโดยไม่มีเส้นขอบที่มองเห็น: นั่นเป็นเรื่องปกติ รูปลักษณ์ (เส้น สี ระยะห่าง) จะถูกจัดการภายหลังด้วย CSS

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. แท็กใดสร้างแถวของตาราง?
   • <td>
   • <tr>
   • <table>
   • <row>
2. อะไรคือความแตกต่างระหว่าง <td> และ <th>?
   • <th> สร้างเซลล์ส่วนหัว ส่วน <td> สร้างเซลล์ข้อมูล
   • <th> สร้างทั้งตาราง ส่วน <td> สร้างแถว
   • ไม่มี ทั้งสองใช้แทนกันได้
3. ควรใช้ตาราง HTML เพื่ออะไร?
   • จัดวางเลย์เอาต์ของเว็บไซต์ทั้งหมด
   • นำเสนอข้อมูลในรูปแบบแถวและคอลัมน์
   • ใช้แทนรายการแบบจุดนำหน้า