Prvek tfoot

Prvek tfoot definuje spodní část tabulky. Používá se pro seskupení řádků tak, aby bylo možné okamžitě aplikovat CSS styly na určitou skupinu. V jedné tabulce může být pouze jeden prvek tfoot.

Prvek tfoot se často používá společně s thead a tbody pro definování horní části, hlavní části a spodní části HTML tabulky. Ve výchozím nastavení prohlížeč umístí obsah tfoot do spodní části tabulky a thead - do horní části.

Příklad

Pojďme skupině řádků seskupených prvkem tfoot nastavit červenou barvu textu pomocí vlastnosti color:

html<table>
  <thead>
    <tr>
      <th>Jméno</th>
      <th>Příjmení</th>
      <th>Plat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>jméno1</td>
      <td>příjmení1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>jméno2</td>
      <td>příjmení2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>počet: 2</td>
      <td>-</td>
      <td>celkem: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

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

Результат:

Příklad

A zde se podívejme, thead není nahoře a tfoot není dole, přesto je prohlížeč umisťuje na svá místa:

html<table>
  <tfoot>
    <tr>
      <td>počet: 2</td>
      <td>-</td>
      <td>celkem: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>jméno1</td>
      <td>příjmení1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>jméno2</td>
      <td>příjmení2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Jméno</th>
      <th>Příjmení</th>
      <th>Plat</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

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

Результат:

Viz také