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

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

تگ tr در HTML چيست؟

تگ <tr> به مرورگر مي‌گويد که يک رديف جديد در جدول ايجاد شود. هر رديف مي‌تواند شامل چندين سلول باشد و داخل تگ‌هاي <thead>، <tbody> يا <tfoot> قرار گيرد.

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

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

در اين مثال، هر <tr> يک رديف جدول را تشکيل مي‌دهد و شامل سلول‌هاي <th> يا <td> است.

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

ويژگي	توضيح
align	تراز محتواي سلول‌ها (چپ، مرکز، راست)
valign	تراز عمودي محتواي سلول‌ها (top, middle, bottom)
bgcolor	رنگ پس‌زمينه رديف

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

<style>
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:hover {
  background-color: #d1e7ff;
}
td, th {
  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 مي‌توان رديف‌ها را با رنگ متفاوت براي رديف‌هاي زوج و فرد مشخص کرد و افکت‌ها هنگام هاور اضافه نمود.