HTML <tfoot> ອອກຈາກ

  • ບ່ອນໄກກ່ອນ <textarea>
  • ບ່ອນໄກຕໍ່ໄປ <th>

ອະທິບາຍ ແລະ ການນໍາໃຊ້

<tfoot> ແຕ່

<tfoot> ແລະ <thead> ແລະ <tbody> ສັບພາສານີ້ຂອງ

ບັນດາສັບພາສາສາມາດນຳໃຊ້ສັບພາສານີ້, ເພື່ອຫຼິ້ນຕົວເອກະສານທີ່ສາມາດຫຼິ້ນຕົວຢ່າງອິດສະຫຼະ ເມື່ອຫຼິ້ນຕົວທີ່ບັນທຶກ. ອີກຄັ້ງ, ເມື່ອຫຼິ້ນຕົວອຸບັດຕິດຕາມເພີ່ມຂື້ນຂອງຕາມກຳນົດ, ບັນດາສັບພາສານີ້ສາມາດຫຼິ້ນຕົວຢ່າງສະໜາມສຳຫຼັບແຕ່ກຳນົດເພີ່ມຂື້ນ.

ຄຳເຕືອນ: ໃນເງິນໄຂ <tr> ແຕ່

<tfoot> ກົດລະບຽບ <table> ສ່ວນລຸ່ມຂອງ <caption>、<colgroup>、<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

ບວກມາດຕະການການຕັດລົງ <tfoot> ຂອງເນື້ອຫຼັກ (ນຳໃຊ້ CSS):

<table style="width:100%">
  <tr>
    <th>ເດືອນ</th>
    <th>ການປະຂອງ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ຕຸລາ</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>ລວມ</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

ທົດລອງຄົນທີ່ຕົກລົງ

ຕົວຢ່າງ 4

ບວກມາດຕະການການຕັດລົງທີ່ຕໍ່າ <tfoot> ຂອງເນື້ອຫຼັກ (ນຳໃຊ້ CSS):

<table style="width:100%">
  <tr>
    <th>ເດືອນ</th>
    <th>ການປະຂອງ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ຕຸລາ</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>ລວມ</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

ທົດລອງຄົນທີ່ຕົກລົງ

ຜົນງານຂອງປະກາດທົດສະຫຼະ

<tfoot> ອອກຈາກ ຜົນງານຂອງປະກາດທົດສະຫຼະ.

ຜົນງານຂອງປະກາດ

<tfoot> ອອກຈາກ ຜົນງານຂອງປະກາດ HTML.

ການປັບປຸງ CSS ຄົງທີ່

ບັນດາບັນຊີບັນນາທິການຈະສະແດງຄືກັນພາຍໃນຕົວເລກທີ່ຫຼາຍທີ່ສຸດ <tfoot> ປະເພດ:

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

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

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