tfoot тегі

tfoot тегі кестенің төменгі бөлігін анықтайды. Белгілі бір топқа бірден CSS стильдерін қолдану үшін жолдарды топтау мақсатында қолданылады. Бір кестеде тек бір ғана tfoot тегі болуы мүмкін.

tfoot тегі жиі thead және tbody тегтерімен бірге HTML кестесінің жоғарғы бөлігін, негізгі бөлігін және төменгі бөлігін анықтау үшін қолданылады. Әдепкі бойынша браузер tfoot мазмұнды кестенің төменгі бөлігіне, ал thead мазмұнды жоғарғы бөлігіне орналастырады.

Мысал

tfoot тегімен біріктірілген жолдар тобына color қасиетін қолданып, мәтіннің қызыл түсін берейік:

html<table>
  <thead>
    <tr>
      <th>Аты</th>
      <th>Тегі</th>
      <th>Жалақы</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>аты1</td>
      <td>тегі1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>аты2</td>
      <td>тегі2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>саны: 2</td>
      <td>-</td>
      <td>барлығы: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

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

Результат:

Мысал

Ал мында, thead жоғарыда емес, ал tfoot төменде емес орналасқанына қарамастан, браузер оларды өз орнына қоятынын көрейік:

html<table>
  <tfoot>
    <tr>
      <td>саны: 2</td>
      <td>-</td>
      <td>барлығы: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>аты1</td>
      <td>тегі1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>аты2</td>
      <td>тегі2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Аты</th>
      <th>Тегі</th>
      <th>Жалақы</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

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

Результат:

Сондай-ақ қараңыз