Таг 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;
}

Результат:

Погледајте такође