Тег tfoot

Тегот tfoot го дефинира долниот дел на табелата. Се користи за групирање на редови на таков начин што веднаш на одредена група може да се применат CSS стилови. Во една табела може да има само еден тег tfoot.

Тегот tfoot често се користи заедно со thead и tbody за дефинирање на горниот дел, главниот дел и долниот дел на HTML табелата. Стандардно прелистувачот ќе го постави содржината на tfoot во долниот дел на табелата, а thead - во горниот.

Пример

Да и зададеме црвена боја на текстот на групата редови, обединети со тегот tfoot, со помош на својството color:

html<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surn</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>name1</td>
      <td>surn1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>name2</td>
      <td>surn2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>count: 2</td>
      <td>-</td>
      <td>total: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

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

Результат:

Пример

А овде, да погледнеме, thead не е на врвот, а tfoot не е на дното, сепак прелистувачот ги поставува на нивните места:

html<table>
  <tfoot>
    <tr>
      <td>count: 2</td>
      <td>-</td>
      <td>total: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>name1</td>
      <td>surn1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>name2</td>
      <td>surn2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surn</th>
      <th>Salary</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

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

Результат:

Погледнете ги исто така