آموزش و يادگيري تگ tfoot در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <tfoot> آشنا مي‌شويم. اين تگ براي تعريف بخش پايين يا جمع‌بندي جدول استفاده مي‌شود و معمولاً شامل رديف‌هايي (<tr>) با سلول‌هاي <td> يا <th> است.

تگ tfoot در HTML چيست؟

تگ <tfoot> به مرورگر مي‌گويد که محتوا داخل آن پايين جدول يا جمع‌بندي جدول است. اين بخش معمولاً شامل جمع کل، ميانگين يا يادداشت‌هاي پاياني جدول مي‌شود و هنگام اسکرول جداول طولاني، مي‌تواند ثابت بماند.

مثال ساده از تگ tfoot

<table border="1">
  <thead>
    <tr>
      <th>نام</th>
      <th>سن</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>علي</td>
      <td>25</td>
    </tr>
    <tr>
      <td>مينا</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>ميانگين سن</td>
      <td>27.5</td>
    </tr>
  </tfoot>
</table>

در اين مثال، رديف آخر جدول داخل <tfoot> قرار دارد و جمع‌بندي ميانگين سن را نمايش مي‌دهد.

ويژگي‌هاي مهم تگ tfoot

ويژگي	توضيح
هيچ ويژگي اختصاصي	تگ `<tfoot>` صرفاً براي مشخص کردن بخش پايين يا جمع‌بندي جدول استفاده مي‌شود.

مثال ترکيبي با CSS

<style>
tfoot td {
  font-weight: bold;
  background-color: #f2f2f2;
  padding: 8px;
  text-align: center;
}
tbody td {
  padding: 8px;
  text-align: center;
}
thead th {
  background-color: #d9d9d9;
  padding: 8px;
}
table {
  border-collapse: collapse;
  width: 50%;
  border: 1px solid #333;
}
</style>

<table>
  <thead>
    <tr>
      <th>نام</th>
      <th>سن</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>علي</td>
      <td>25</td>
    </tr>
    <tr>
      <td>مينا</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>ميانگين سن</td>
      <td>27.5</td>
    </tr>
  </tfoot>
</table>

با CSS مي‌توان ظاهر بخش پايين جدول را متمايز و خواناتر کرد تا جمع‌بندي جدول به خوبي ديده شود.