HTML <thead> ອອກຈາກ

  • ການໄປຫາບາສາດກ່ອນ <th>
  • ການໄປຫາບາສາດຕໍ່ໄປ <time>

ການກໍານົດ ແລະ ການນໍາໃຊ້

<thead> ສິ່ງພາຍໃນ

<thead> ສິ່ງພາຍໃນ <tbody> ແລະ </tfoot> ສິ່ງພາຍໃນບັນຊີລາຍການສາຍອາກາດສາມາດນຳໃຊ້ສິ່ງນີ້ເພື່ອການຕັດສະພາບການຈັດວາງຕາຕະລາງຂອງການຈັດວາງຕາຕະລາງ.

ບັນຊີລາຍການສາຍອາກາດສາມາດນຳໃຊ້ສິ່ງນີ້ເພື່ອຫຼິ້ນຫຼິ້ນໃນທີ່ສາຍອາກາດ. ແຕ່ພວກເຂົາສາມາດນຳໃຊ້ສິ່ງນີ້ເພື່ອຫຼິ້ນຫຼິ້ນໃນທີ່ສາຍອາກາດທີ່ຫຼາຍເປັນຕົວເວລາ. ແຕ່ພວກເຂົາສາມາດນຳໃຊ້ສິ່ງນີ້ເພື່ອຫຼິ້ນຫຼິ້ນໃນທີ່ສາຍອາກາດທີ່ຫຼາຍເປັນຕົວເວລາ.

ເຫັນດີ:<thead> ສິ່ງພາຍໃນສິ່ງ: <tr> ແບບກົດໝາຍ.

<thead> ແບບກົດໝາຍຕ້ອງຖືກນຳໃຊ້ໃນຕົວການ: <table> ສິ່ງພາຍໃນສິ່ງ: <caption> ແລະ <colgroup> ຫຼັງສິ່ງ: <tbody>、</tfoot> ແລະ <tr> ກ່ອນສິ່ງ:

ຄຳເຕືອນ:ໂດຍປົກກະຕິ:<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

ນຳໃຊ້ CSS ເພື່ອການຕັດສະພາບ <thead>, <tbody> ແລະ <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>ລວມ:</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

ການສະແດງຄືນສະຕິດຕາມຕົວເອງ

ຕົວຢ່າງ 3

ວິທີການຕັດສະພາບຕິດຕາມລະຫວ່າງທາງ: <thead> ຂອງຂໍ້ມູນ (ນຳໃຊ້ CSS):

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>ພະຕິການ</th>
      <th>ການນັບບັນຈຸ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ຕຸລາ</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>ພະຕິການ</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

ການສະແດງຄືນສະຕິດຕາມຕົວເອງ

ຕົວຢ່າງ 4

ວິທີການຕັດສະພາບຕິດຕາມລະຫວ່າງທາງພາຍລຸ່ມ: <thead> ຂອງຂໍ້ມູນ (ນຳໃຊ້ CSS):

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>ພະຕິການ</th>
      <th>ການນັບບັນຈຸ</th>
    </tr>
  </thead>
   <tbody>
    <tr>
      <td>ຕຸລາ</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>ພະຕິການ</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

ການສະແດງຄືນສະຕິດຕາມຕົວເອງ

ຂອງອາກາດລະບຽບ

<thead> ອີກຢ່າງໜຶ່ງແມ່ນການສະໜັບສະໜູນ ຂອງອາກາດລະບຽບທົ່ວໄປ.

ຂອງອາກາດລະບຽບ

<thead> ອີກຢ່າງໜຶ່ງແມ່ນການສະໜັບສະໜູນ ຂອງອາກາດລະບຽບ HTML.

ການປັບປຸງ CSS ຜູ້ສະເໜີຄືນ

ບັນຊີບັນນາທິການທົ່ວໄປຈະສະແດງຕາມຄືນນີ້ <thead> ປະກອບສ່ວນ:

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

ການສະໜັບສະໜູນບັນຊີບັນນາທິການ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ
  • ການໄປຫາບາສາດກ່ອນ <th>
  • ການໄປຫາບາສາດຕໍ່ໄປ <time>