HTML <tbody> แทร็ก

  • หน้าก่อน <table>
  • หน้าต่อไป <td>

คำอธิบายและการใช้งาน

<tbody> แท็กใช้เพื่อจัดกลุ่มเนื้อหาในตาราง HTML

<tbody> องค์ประกอบ <thead> และ <tfoot> องค์ประกอบเหล่านี้ใช้ร่วมกันเพื่อกำหนดส่วนต่างๆ ของตาราง (เนื้อหา หัวตาราง ท้ายตาราง)

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

คำเตือน：<tbody> องค์ประกอบภายในต้องมีหนึ่งหรือหลายองค์ประกอบ <tr> แท็ก。

<tbody> ตามที่กำหนดให้ใช้ตาม <table> องค์ประกอบลูกขององค์ประกอบ <caption>、<colgroup> และ <thead> หลังจากองค์ประกอบ

คำเตือน：โดยมาตรฐาน <thead>、<tbody> และ <tfoot> จะไม่มีผลบนการจัดตัวตาราง แต่คุณสามารถตั้งค่าสไตล์สำหรับองค์ประกอบเหล่านี้ด้วย CSS (ดูตัวอย่างด้านล่าง)!

ตัวอย่าง

ตัวอย่าง 1

ตาราง HTML ที่มีองค์ประกอบ <thead>、<tbody> และ <tfoot>:

<table>
  <thead>
    <tr>
      <th>เดือน</th>
      <th>ออมทรัพย์</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>เดือนมกราคม</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>เดือนกุมภาพันธ์</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>รวม</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ตั้งค่าสไตล์สำหรับ <thead>、<tbody> และ <tfoot> ด้วย CSS:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>เดือน</th>
      <th>ออมทรัพย์</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>เดือนมกราคม</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>เดือนกุมภาพันธ์</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>รวม</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

ทดลองด้วยตัวเอง

ตัวอย่าง 3

แนวทางการจัดตัว <tbody> เนื้อหา (ใช้ CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>เดือน</th>
      <th>ออมทรัพย์</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>เดือนมกราคม</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>เดือนกุมภาพันธ์</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

ทดลองด้วยตัวเอง

ตัวอย่าง 4

แนวทางการจัดตัวตรงของตาราง <tbody> เนื้อหา (ใช้ CSS):

<table style="width:50%;">
  <tr>
    <th>เดือน</th>
    <th>ออมทรัพย์</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>เดือนมกราคม</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>เดือนกุมภาพันธ์</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

ทดลองด้วยตัวเอง

คุณสมบัติโลกละแวก

<tbody> แทร็กยังสนับสนุน คุณสมบัติโลกละแวกใน HTML。

คุณสมบัติเหตุการณ์

<tbody> แทร็กยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML。

การตั้งค่า CSS โดยมาตรฐาน

โดยทั่วไป บราวเซอร์ส่วนใหญ่จะแสดงค่าเริ่มต้นตามต่อไปนี้ <tbody> องค์ประกอบ：

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

การสนับสนุนเบราเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อน <table>
  • หน้าต่อไป <td>