HTML <table> ປະເພດ

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

<table> ອັບສັນຕີນວິດຍິນຕາມລະບຽບ HTML

ເຄື່ອງມື HTML ແມ່ນສະໝອງ <table> ສະໝອງເປັນ <tr>ແລະ<th> ແລະ <td> ສະໝອງເປັນ:

ເຄື່ອງມື HTML ກໍ່ສາມາດກວມເອົາສິ່ງຕ່າງໆນີ້:

ອີງຕາມ:

ການສອນ HTMLHTML ກາງ

ການປະກາດ HTML DOMໂອບເປັນຕົວເລກ

ການສອນ CSSການກວດສອບລະຫວ່າງເຄື່ອງມື

ຄວາມຈິງ

ຕົວຢ່າງ 1

ເຄື່ອງມື HTML ທີ່ມີສອງປະຕູການແລະສອງອາຍຸ

<table>
  <tr>
    <th>ເດືອນ</th>
    <th>ການບັນຈຸ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
</table>

ກຳລັງທົດລອງຢ່າງສຳລັບຕົນເອງ

ຕົວຢ່າງ 2

ວິຊາ: ການເພີ່ມບາດກະຈາຍໃນເຄື່ອງມື

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>ເດືອນ</th>
    <th>ການບັນຈຸ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ຕຸລາ</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

ກຳລັງທົດລອງຢ່າງສຳລັບຕົນເອງ

ຕົວຢ່າງ 3

ວິຊາ: ການກັບຄູ່ກັນເຄື່ອງມືທີ່ຢູ່ຂ້າງຊ້າຍ

<table style="float:right">
  <tr>
    <th>ເດືອນ</th>
    <th>ການບັນຈຸ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ຕຸລາ</td>
    <td>￥4500</td>
  </tr>
</table>

ກຳລັງທົດລອງຢ່າງສຳລັບຕົນເອງ

ຕົວຢ່າງ 4

ວິຊາ: ການກັບຄູ່ກັນເຄື່ອງມື

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
  <tr>
    <th>ເດືອນ</th>
    <th>ການບັນຈຸ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ຕຸລາ</td>
    <td>￥4500</td>
  </tr>
</table>

ກຳລັງທົດລອງຢ່າງສຳລັບຕົນເອງ

ຕົວຢ່າງ 5

ວິຊາ: ການເພີ່ມສີທຳລາຍໃນເຄື່ອງມື

<table style="background-color:#00FF00">
  <tr>
    <th>ເດືອນ</th>
    <th>ການບັນຈຸ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ຕຸລາ</td>
    <td>￥4500</td>
  </tr>
</table>

ກຳລັງທົດລອງຢ່າງສຳລັບຕົນເອງ

ຕົວຢ່າງ 6

ວິຊາ: ການເພີ່ມເຂດກະຈາຍໃນເຄື່ອງມື

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>ເດືອນ</th>
    <th>ການບັນຈຸ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ຕຸລາ</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

ກຳລັງທົດລອງຢ່າງສຳລັບຕົນເອງ

ຕົວຢ່າງ 7

ວິຊາ: ການກວດສອບລະຫວ່າງເຄື່ອງມື

<table style="width:400px">
  <tr>
    <th>ເດືອນ</th>
    <th>ການບັນຈຸ</th>
  </tr>
  <tr>
    <td>ມັງກອນ</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>ຕຸລາ</td>
    <td>￥4500</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>

ກຳລັງທົດລອງຢ່າງສຳລັບຕົນເອງ

ປະເພດທົ່ວໄປ

<table> ປະເພດຍັງມີ ປະເພດທົ່ວໄປ.

ອາການຂອງ HTML

<table> ປະເພດຍັງມີ ອາການຂອງ HTML.

ການກະກຽມ CSS ຜູ້ສະໜອງຄືນ

ສະເພາະບັນດາຄົນຕິດຕາມຈະໃຊ້ຄູ່ມີຂອງຕໍ່ານີ້ສະແດງ <table> ປະເພດ:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

ກຳລັງທົດລອງຢ່າງສຳລັບຕົນເອງ

ການສະໜັບສະໜູນບັນດາຄົນຕິດຕາມ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ