A tfoot tag

A tfoot tag a tábla alsó részét határozza meg. Sorok csoportosítására használjuk úgy, hogy azonnal alkalmazni lehessen CSS stílusokat egy bizonyos csoportra. Egy táblában csak egy tfoot tag lehet.

A tfoot tagot gyakran együtt használják a thead és a tbody tagokkal a HTML tábla felső része, fő része és alsó része megadásához. Alapértelmezetten a böngésző a tfoot tartalmát a tábla aljára, a thead tartalmát pedig a tetejére helyezi.

Példa

Adjunk a tfoot taggal csoportosított soroknak piros szövegszínt a color tulajdonság segítségével:

html<table>
  <thead>
    <tr>
      <th>Név</th>
      <th>Vezetéknév</th>
      <th>Fizetés</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>név1</td>
      <td>vezetéknév1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>név2</td>
      <td>vezetéknév2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>darab: 2</td>
      <td>-</td>
      <td>összesen: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

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

Результат:

Példa

Itt nézzük meg, hogy a thead nem felül, a tfoot pedig nem alul van, ennek ellenére a böngésző a helyükre rendezi őket:

html<table>
  <tfoot>
    <tr>
      <td>darab: 2</td>
      <td>-</td>
      <td>összesen: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>név1</td>
      <td>vezetéknév1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>név2</td>
      <td>vezetéknév2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Név</th>
      <th>Vezetéknév</th>
      <th>Fizetés</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

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

Результат:

Lásd még