بنية thead وtbody وtfoot

أقسام الجدول

thead

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

tbody

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

tfoot

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

جدول منظم ومكتمل

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

لماذا نستخدم thead وtbody وtfoot؟

tbody قابل للتمرير

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

tbody الضمني

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

عناصر tbody متعددة

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

تنسيق أقسام الجدول

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

سلوك قارئات الشاشة

صفوف متعددة داخل thead

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

تحقق سريع

مراجعة: thead وtbody وtfoot