HTML <table> แบบบันทึก

  • หน้าก่อนหน้า <svg>
  • หน้าต่อไป <tbody>

คำนิยามและวิธีใช้

<table> แทรกบอกเชิญ HTML ตาราง。

ตาราง HTML ประกอบด้วย <table> องค์ประกอบและหนึ่งหรือหลาย <tr>、<th> และ <td> องค์ประกอบ:

ตาราง HTML ยังสามารถมีอีกองค์ประกอบต่อไปนี้:

ดูเพิ่มเติมที่:

ตัวอย่าง HTML:HTML ตาราง

คู่มืออ้างอิง HTML DOM:Table วัตถุ

ตัวอย่าง CSS:ตั้งรูปแบบตาราง

ตัวอย่าง

ตัวอย่าง 1

ตาราง HTML ง่ายๆ ที่มีสองคอลัมน์และสองแถว:

<table>
  <tr>
    <th>เดือน</th>
    <th>เงินฝาก</th>
  </tr>
  <tr>
    <td>มกราคม</td>
    <td>￥3400</td>
  </tr>
</table>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

วิธีการเพิ่มเข็มขัดที่ย่อรวม (ใช้ CSS):

<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

วิธีการจัดตารางซ้าย (ใช้ CSS):

<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

วิธีการจัดตารางศูนย์ (ใช้ CSS):

<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

วิธีการเพิ่มสีพื้นหลังตาราง (ใช้ CSS):

<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

วิธีการเพิ่มเนื้อหาช่องว่างภายในตาราง (ใช้ CSS):

<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

วิธีการตั้งความกว้างของตาราง (ใช้ CSS):

<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
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อนหน้า <svg>
  • หน้าต่อไป <tbody>