Prvok tfoot

Prvok tfoot definuje spodnú časť tabuľky. Používa sa na zoskupenie riadkov takým spôsobom, aby bolo možné okamžite aplikovať CSS štýly na určitú skupinu. V jednej tabuľke môže byť iba jeden prvok tfoot.

Prvok tfoot sa často používa spoločne s thead a tbody na definovanie hornej časti, hlavnej časti a spodnej časti HTML tabuľky. Predvolene prehliadač umiestni obsah tfoot do spodnej časti tabuľky a thead - do hornej.

Príklad

Skupine riadkov zoskupených prvkom tfoot nastavme červenú farbu textu pomocou vlastnosti color:

html<table>
  <thead>
    <tr>
      <th>Meno</th>
      <th>Priezvisko</th>
      <th>Plat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>meno1</td>
      <td>priezvisko1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>meno2</td>
      <td>priezvisko2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>počet: 2</td>
      <td>-</td>
      <td>celkom: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

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

Результат:

Príklad

A tu sa pozrime, thead nie je hore, ale tfoot nie je dole, avšak prehliadač ich umiestňuje na svoje miesta:

html<table>
  <tfoot>
    <tr>
      <td>počet: 2</td>
      <td>-</td>
      <td>celkom: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>meno1</td>
      <td>priezvisko1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>meno2</td>
      <td>priezvisko2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Meno</th>
      <th>Priezvisko</th>
      <th>Plat</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

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

Результат:

Pozrite tiež