ტეგი thead

ტეგი thead განსაზღვრავს ცხრილის ზედა ნაწილს. გამოიყენება რიგების ისე დასაჯგუფებლად, რომ დაუყოვნებლივ შესაძლებელი იყოს CSS სტილების გარკვეული ჯგუფის გამოყენება. ერთ ცხრილში შეიძლება იყოს მხოლოდ ერთი ტეგი thead.

ტეგი thead ხშირად გამოიყენება ერთად tbody-თან და tfoot-თან HTML ცხრილის ზედა ნაწილის, მთავარი ნაწილის და ქვედა ნაწილის დასასაზღვრად.

მაგალითი

მოდით ტეგი thead-ით გაერთიანებული რიგების ჯგუფს დავუმატოთ ტექსტის წითელი ფერი 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>

cssthead {
  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>

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

Результат:

ასევე იხილეთ