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

Результат:

Ҳам қаранг