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

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

تگ th در HTML چيست؟

تگ <th> نشان‌دهنده يک سلول عنوان در جدول است و معمولاً متن آن به صورت **پررنگ و مرکزچين** نمايش داده مي‌شود. اين سلول‌ها کمک مي‌کنند کاربران بفهمند هر ستون يا رديف جدول چه محتوايي دارد.

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

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

در اين مثال، سلول‌هاي <th> در رديف سرصفحه جدول، عنوان ستون‌ها را نمايش مي‌دهند.

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

ويژگي	توضيح
colspan	ادغام سلول‌ها در ستون‌ها
rowspan	ادغام سلول‌ها در رديف‌ها
scope	مشخص کردن محدوده ستون يا رديف (col, row, colgroup, rowgroup)
align	تراز افقي محتوا (left, center, right)
valign	تراز عمودي محتوا (top, middle, bottom)

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

<style>
th {
  padding: 8px;
  text-align: center;
  background-color: #d9d9d9;
  font-weight: bold;
}
td {
  padding: 8px;
  text-align: center;
  border: 1px solid #333;
}
tr:nth-child(even) td {
  background-color: #f2f2f2;
}
tr:hover td {
  background-color: #d1e7ff;
}
table {
  border-collapse: collapse;
  width: 50%;
}
</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 مي‌توان سلول‌هاي عنوان جدول را متمايز کرد و ظاهر حرفه‌اي و خوانايي بيشتري به جدول‌ها داد.