Теги thead

Теги thead қисми болоии ҷадвалро муайян мекунад. Барои гурӯҳбандии сатрҳо барои он истифода мешавад, ки дар ҳоли лозим ба як гурӯҳи муайян дар як ҳанг услубҳои CSS татбиқ карда шаванд. Дар як ҷадвал фақат як теги thead метавонад вуҷуд дошта бошад.

Теги thead аксар вақт якҷоя бо tbody ва tfoot барои муайян кардани қисми болоӣ, қисми асосӣ ва қисми поёнии ҷадвали HTML истифода мешавад.

Намуна

Биёед ба гурӯҳи сатрҳое, ки бо теги thead гурӯҳбандӣ шудаанд, бо истифода аз хосияти color ранги сурх илова кунем:

html<table>
  <thead>
    <tr>
      <th>Ном</th>
      <th>Насаб</th>
      <th>Маош</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ном1</td>
      <td>насаб1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>ном2</td>
      <td>насаб2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>шумора: 2</td>
      <td>-</td>
      <td>ҷамъ: 1200$</td>
    </tr>
  </tfoot>
</table>

cssthead {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Намуна

Дар ин ҷо thead дар боло набуд, ва tfoot дар поён набуд, аммо браузер онҳоро дар ҷойҳои худ ҷойгир мекунад:

html<table>
  <tfoot>
    <tr>
      <td>шумора: 2</td>
      <td>-</td>
      <td>ҷамъ: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>ном1</td>
      <td>насаб1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>ном2</td>
      <td>насаб2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Ном</th>
      <th>Насаб</th>
      <th>Маош</th>
    </tr>
  </thead>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Ҳамчунин бубинед