ตาราง (Tables) ใน HTML

ตาราง HTML ใช้สร้างตารางโดยใช้แท็ก <table> ในตาราง แต่ละแถวระบุโดยแท็ก <tr> และหัวตารางกำหนดโดยแท็ก <th> ข้อมูลตารางกำหนดโดยแท็ก <td>

ไวยากรณ์

<table> <tr> <th>หัวตาราง</th> <th>หัวตาราง</th> </tr> <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr> <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr> </table>

แอตทริบิวต์ตาราง HTML

องค์ประกอบ caption ใน HTML

เราสามารถตั้งคำอธิบาย (caption) ให้ตารางโดยใช้องค์ประกอบ caption ของ HTML

ไวยากรณ์

<caption>ข้อความ</caption>

ตัวอย่าง

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
  }
  table {
    margin: 2rem auto;
    width: 400px;
  }
  caption {
    color: #fff;
    font-size: 1.5rem;
  }
</style>
<body>
<h1>HTML Tables</h1>
<table border="2">
  <caption>ข้อมูลนักเรียน</caption>
  <tr>
    <th>ชื่อ</th>
    <th>เลขที่</th>
  </tr>
  <tr>
    <td>John</td>
    <td>031717</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>051717</td>
  </tr>
</table>
</body>
</html>

ผลลัพธ์

แสดงตารางพร้อม caption "ข้อมูลนักเรียน" มีหัวคอลัมน์ ชื่อ และ เลขที่ พร้อมข้อมูล 2 แถว