Eticheta tfoot

Eticheta tfoot definește partea de jos a unui tabel. Este utilizată pentru a grupa rânduri în așa fel încât să se poată aplica imediat stiluri CSS unui anumit grup. Un tabel poate avea doar o singură etichetă tfoot.

Eticheta tfoot este adesea folosită împreună cu thead și tbody pentru a defini partea de sus, partea principală și partea de jos a unui tabel HTML. În mod implicit, browserul va plasa conținutul tfoot în partea de jos a tabelului, iar thead - în partea de sus.

Exemplu

Să atribuim un grup de rânduri, grupate prin eticheta tfoot, culoarea roșie a textului cu ajutorul proprietății 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;
}

Результат:

Exemplu

Iar aici, să observăm că thead nu este în partea de sus, iar tfoot nu este în partea de jos, cu toate acestea browserul le plasează în locurile lor corespunzătoare:

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;
}

Результат:

Vedeți și