HTML <th> ອອກອາກາດ

  • ການໄປຕໍ່ຫນ້າກ່ອນ <tfoot>
  • ການໄປຕໍ່ຫນ້າຕໍ່ໄປ <thead>

ການສະຫຼຸບ ແລະ ການນໍາໃຊ້

<th> ແຜງໃສ່ປະກາດຫົວໜ້າກາງ HTML ການຈັດສະບັບ

HTML ການຈັດສະບັບມີສອງເຊວ:

  • ເຊວຫົວໜ້າກາງ - ມີຂໍ້ມູນຫົວໜ້າ (ນຳໃຊ້) <th> ການສ້າງປະກາດ
  • ເຊວຂອງຂໍ້ມູນ - ມີຂໍ້ມູນ (ນຳໃຊ້) <td> ການສ້າງປະກາດ

ໂດຍກົງ:<th> ຂໍ້ຄວາມໃນປະກາດ ແມ່ນມີຄວາມຫົວຫຼືຫົວຫຼາຍ ແລະ ປະສານກາງ:

ໂດຍກົງ, ຂໍ້ຄວາມໃນ <td> ແມ່ນມີຄວາມປົກກະຕິ ແລະ ປະສານຊ້າຍ:

ບໍ່ມີການກ່າວຫາອື່ນ:

HTML ການສອນHTML ກາງຕາລະບັນ

ການສະຫຼຸບ HTML DOMໂອບຄອມເອັສ TableHeader

CSS ການສອນການຈັດສະບັບຮູບແບບຂອງຟອມ

ຄວາມລະອຽດ

ຕົວຢ່າງ 1

ການຈັດສະບັບ HTML ຂະໜາດນ້ອຍທີ່ມີສາມອີຍິບ, ສອງເຊວຫົວໜ້າກາງ ແລະ ສີ່ເຊວຂອງຂໍ້ມູນ:

<table>
  <tr>
    <th>ເດືອນ</th>
    <th>ການປະກັນ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ຕຸລາ</td>
    <td>￥4500</td>
  </tr>
</table>

ກຳລັງຄົ້ນຄວ້າເອງ

ຕົວຢ່າງ 2

ກວດຄືນການປະສານ <th> ຂອງການສະແດງ(ທີ່ໃຊ້ CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">ເດືອນ</th>
    <th style="text-align:left">ການຕັດສິນ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ຕຸລາ</td>
    <td>￥4500</td>
  </tr>
</table>

ກຳລັງຄົ້ນຄວ້າເອງ

ຕົວຢ່າງ 3

ກວດຄືນການເພີ່ມສີທີ່ຫຼັງເຊວຫົວໜ້າກາງການຈັດສະບັບ (ນຳໃຊ້ CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">ເດືອນ</th>
    <th style="background-color:#00FF00">ການຕັດສິນ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
 </table>

ກຳລັງຄົ້ນຄວ້າເອງ

ຕົວຢ່າງ 4

ກວດຄືນຄວາມສູງຂອງເຊວຫົວໜ້າກາງການຈັດສະບັບ (ນຳໃຊ້ CSS):

<table>
  <tr>
    <th style="height:100px">ເດືອນ</th>
    <th style="height:100px">ການປະກັນ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
</table>

ກຳລັງຄົ້ນຄວ້າເອງ

ບັນທັດ 5

ບວກວ່າເປັນການສະແດງທີ່ບໍ່ໄດ້ຫນຸ່ມລະບຸວ່າເຂັມເລຍ(ທີ່ໃຊ້ CSS):

<table>
  <tr>
    <th>ເດືອນ</th>
    <th style="white-space:nowrap">ເງິນທີ່ຕັດກັບລົດໃໝ່</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
</table>

ກຳລັງຄົ້ນຄວ້າເອງ

ບັນທັດ 6

ບວກວ່າເປັນການປະຕິບັດຢູ່ບົດມູນວນນອກຫນື່ງ: <th> ຂອງການສະແດງ(ທີ່ໃຊ້ CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">ເດືອນ</th>
    <th style="vertical-align:bottom">ການປະກັນ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
</table>

ກຳລັງຄົ້ນຄວ້າເອງ

ບັນທັດ 7

ບວກວ່າເຂັມເລຍທີ່ມີລະດັບຫລາຍຫນື່ງຫລືຫລາຍໃນເຂັມເລຍຫົວຂໍ້(ທີ່ໃຊ້ CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">ເດືອນ</th>
    <th style="width:30%">ການປະກັນ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
</table>

ກຳລັງຄົ້ນຄວ້າເອງ

ບັນທັດ 8

ບວກວ່າເຂັມເລຍທີ່ມີຫົວຂໍ້:

<table>
  <tr>
    <th>ຊື່</th>
    <th>ອີເມວ</th>
    <th>ໂທລະສັບ</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

ກຳລັງຄົ້ນຄວ້າເອງ

ບັນທັດ 9

ບວກວ່າເຂັມເລຍທີ່ມີຫົວຂໍ້:

<table>
  <caption>ການປະກັນເດືອນ</caption>
  <tr>
    <th>ເດືອນ</th>
    <th>ການປະກັນ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ຕຸລາ</td>
    <td>￥4500</td>
  </tr>
</table>

ກຳລັງຄົ້ນຄວ້າເອງ

ບັນທັດ 10

ບວກວ່າເຂັມເລຍຂອງຕໍ່ານວນກຳນົດຫລາຍສອງສາມກວ່າການຫລອກລະບຸກັບຕໍ່ານວນກຳນົດ:

<table>
  <tr>
    <th>ຊື່</th>
    <th>ອີເມວ</th>
    <th colspan="2">ໂທລະສັບ</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

ກຳລັງຄົ້ນຄວ້າເອງ

ຜະເພດ

ຜະເພດ ຄູ່ມື ການອະທິບາຍ
abbr ວິດີສານ ກຳນົດວິດີສານລາຍລັກສະນະການລະບຸວ່າເຂັມເລຍຫນື່ງຫລືຫລາຍໃນເຂັມເລຍ.
colspan ໂຕແບບ ກຳນົດເຂັມເລຍຫນື່ງຫລືຫລາຍໃນເຂັມເລຍກຳນົດວຽງ.
headers header_id ກຳນົດເຂັມເລຍຫນື່ງຫລືຫລາຍໃນເຂັມເລຍກັບເຂັມເລຍ.
rowspan ໂຕແບບ ກຳນົດວ່າເຂັມເລຍຕໍ່ານວນກຳນົດສອງໃນເຂັມເລຍຂອງຕໍ່ານວນກຳນົດ.
scope
  • col
  • colgroup
  • row
  • rowgroup
 ກອງສະຫລຸບຂອງຊຸດຫົວແມ່ນຊຸດຫົວກາງສະຖານ, ຊຸດຫົວກາງອາຍຸຫລືອຸປະກອນຫົວກາງກາງສະຖານຫລືອາຍຸ.

ຜົນກະທົບວຽກງານໂລກ

<th> ອີງໃສ່ ຜົນກະທົບວຽກງານໂລກຢູ່ HTML.

ຜົນກະທົບວຽກງານ

<th> ອີງໃສ່ ຜົນກະທົບວຽກງານ HTML.

ການປັບສັບ CSS ຜົນກະທົບດຽວ

ສະເພາະຈະນຳໃຊ້ຄືດັ່ງລາວໃນສະເພາະ <th> ບັນດາສັນຕິພາບ:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

ການສະໜັບສະໜູນຕະຫຼອດພະຍາຍາມ

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