table, tr, td และ th

ตาราง HTML

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

องค์ประกอบ table, tr และ td

th เทียบกับ td

<table>
  <tr>
    <th>Language</th>    <!-- header: bold + centered by default -->
    <th>Year Created</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>HTML</td>         <!-- data cell -->
    <td>1991</td>
    <td>Markup</td>
  </tr>
</table>

โครงสร้างตารางพื้นฐาน

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Widget Pro</td>
    <td>$49.99</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Widget Lite</td>
    <td>$19.99</td>
    <td>Out of Stock</td>
  </tr>
</table>

เส้นขอบตารางด้วย CSS

table {
  border-collapse: collapse;  /* merge double borders into one */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

ตารางไม่ได้มีไว้สำหรับจัดวางหน้า

ตารางที่ปรับตามหน้าจอ

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    <!-- table content -->
  </table>
</div>

/* Or use CSS: */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

เซลล์ว่าง

<tr>
  <td>Alice</td>
  <td>95</td>
  <td></td>          <!-- Empty: renders blank -->
</tr>

/* CSS to style empty cells */
td:empty::before {
  content: '—';
  color: #999;
}

ดูตัวอย่าง thead และ tbody

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

การจัดรูปแบบคอลัมน์ด้วย col และ colgroup

<table>
  <colgroup>
    <col style="width: 200px; background: #f9f9f9;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>

การสลับสีแถวด้วย CSS

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

/* nth-child(even) for even rows instead */

ตรวจสอบความเข้าใจ

ทบทวน: table tr td th