Тег 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;
}

Результат:

Дагы караңыз