Tegin tfoot

Tegin tfoot tablisanyň aşaky bölegini kesgitleýär. Bir topara birwagtda CSS stillaryny ýerine ýetirmek üçin hatarlary şeýle guruplaşdyrmak üçin ulanylýar. Bir tablisada diňe bir tfoot tegini bolup biler.

Tegin tfoot köplenç thead we tbody tegileri bilen bilelikde HTML tablisanyň ýokarky bölegini, esasy bölegini we aşaky bölegini kesgitlemek üçin ulanylýar. Bölünmedik ýagdaýda brauzer tfoot-iň mazmunyny tabilisanyň aşagynda, thead-i bolsa ýokarynda ýerleşdirer.

Mysal

Geliň, tfoot tegini bilen birleşdirilen hatar gurupunyň tekstini gyzyl reňkde kesgitleýäli color häsiýetiniň kömegi bilen:

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

Результат:

Mysal

Şu ýerde bolsa, thead-iň ýokarda däl, tfoot-iň bolsa aşakda däl ýerleşenine seredeli, şonda hem brauzer olary öz ýerlerine ýerleşdirer:

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

Результат:

Şeýle-de serediň