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

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

تگ tbody در HTML چيست؟

تگ <tbody> به مرورگر مي‌گويد که محتوا داخل آن بدنه جدول است. اين کار باعث مي‌شود جداول بزرگ بهتر مديريت شوند و استايل‌ها يا اسکرول‌ها به صورت جداگانه روي بدنه جدول اعمال شوند.

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

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

در اين مثال، رديف‌هاي داده داخل <tbody> قرار دارند و بخش اصلي جدول را تشکيل مي‌دهند.

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

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

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

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

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