HTML <tbody> 标籤

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

paglilinaw at paggamit

<tbody> ay ginagamit upang magkumpolsyon ang batayan ng content ng HTML table.

<tbody> ang tag na <thead> at <tfoot> ang mga elemento na ito ay pinagsamang gamit upang itakda ang bawat bahagi ng table (batayan, header, footer).

Ang mga browser ay maaaring gamitin ang mga elemento na ito upang ipaalis ang header at footer nang mag-isa habang inililipat ang batayan ng table. Gayundin, kapag inililipat ang malaking table sa ilalim ng maraming pahina, ang mga elemento na ito ay maaaring ipaalis ang header at footer sa itaas at ibaba ng bawat pahina.

Babala:<tbody> ang elemento ay dapat magkaroon ng isa o higit pang <tr> tag。

<tbody> ang marka ay dapat gamitin sa mga sumusunod na konteksto: bilang <table> ang mga anak ng elemento, anumang <caption>、<colgroup> at <thead> pagkatapos ng elemento.

Mga tagubilin:Bilang default, ang mga elementong <thead>, <tbody> at <tfoot> ay hindi makakaimpluwensya sa pagkakabuo ng table. Gayunpaman, maaari mong gamitin ang CSS upang itakda ang estilo ng mga elementong ito (tingnan ang mga halimbawa sa ibaba)!

mga halimbawa

halimbawa 1

HTML table na naglalaman ng <thead>, <tbody> at <tfoot> elements:

<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>ang kabuuan</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

ลองเดาเอง

halimbawa 2

Gamit ang CSS upang itakda ang estilo ng <thead>, <tbody> at <tfoot>:

<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>ang kabuuan</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

ลองเดาเอง

halimbawa 3

paano mag-ayon <tbody> ang nilalaman (gamit ang 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>

ลองเดาเอง

halimbawa 4

paano mag-ayon sa taas <tbody> ang nilalaman (gamit ang 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>