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

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

تگ thead در HTML چيست؟

تگ <thead> به مرورگر مي‌گويد که محتوا داخل آن سرصفحه جدول است. اين کار به مرورگر کمک مي‌کند تا جدول‌هاي بزرگ را بهتر مديريت کند و هنگام استفاده از ويژگي‌هايي مثل اسکرول، سرصفحه ثابت باقي بماند.

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

<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>
</table>

در اين مثال، رديف اول جدول داخل <thead> قرار دارد و به عنوان سرصفحه جدول نمايش داده مي‌شود.

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

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

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

<style>
thead th {
  background-color: #f2f2f2;
  color: #333;
  padding: 8px;
}
tbody td {
  padding: 8px;
  text-align: center;
}
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>
</table>

با CSS مي‌توان ظاهر سرصفحه جدول را متمايز و زيبا کرد تا خوانايي جدول افزايش يابد.