ტეგი 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;
}

Результат:

იხილეთ აგრეთვე