MohirDox

Ko'rinishi

HTML Jadval Sarlavhalari ​

HTML jadvallarida har bir ustun yoki qator uchun, yoki bir nechta ustun/qatorlar uchun sarlavhalar bo'lishi mumkin.

Jadval Sarlavhalari Misollari ​

Ustun Sarlavhalari ​

html
<table>
  <tr>
    <th>EMIL</th>
    <th>TOBIAS</th>
    <th>LINUS</th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <!-- boshqa qatorlar -->
</table>

Qator Sarlavhalari ​

html
<table>
  <tr>
    <th>8:00</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>9:00</th>
    <td> </td>
    <td> </td>
  </tr>
  <!-- boshqa qatorlar -->
</table>

Ham Qator, Ham Ustun Sarlavhalari ​

html
<table>
  <tr>
    <th></th>
    <th>DUSHANBA</th>
    <th>SESHANBA</th>
    <th>CHORSHANBA</th>
    <th>PAYSHANBA</th>
    <th>JUMA</th>
  </tr>
  <tr>
    <th>8:00</th>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <!-- boshqa qatorlar -->
</table>

Bir Necha Ustunlarni Qamrab Olgan Sarlavha ​

html
<table>
  <tr>
    <th colspan="3">DEKABR</th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <!-- boshqa qatorlar -->
</table>

HTML Jadval Sarlavhalari ​

Jadval sarlavhalari <th> elementi bilan belgilanadi. Har bir <th> elementi jadval katakchasini ifodalaydi.

Misol:

html
<table>
  <tr>
    <th>Ism</th>
    <th>Familiya</th>
    <th>Yosh</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Vertikal Jadval Sarlavhalari ​

Agar birinchi ustunni sarlavha sifatida ishlatmoqchi bo'lsangiz, har bir qatorning birinchi katakchasini <th> elementi bilan belgilang:

Misol:

html
<table>
  <tr>
    <th>Ism</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Familiya</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Yosh</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

Jadval Sarlavhalarini Joylashtirish ​

Odatiy holatda, jadval sarlavhalari qalin va markazda joylashadi:

html
<table>
  <tr>
    <th>Ism</th>
    <th>Familiya</th>
    <th>Yosh</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Jadval sarlavhalarini chapga joylashtirish uchun CSS text-align xususiyatidan foydalaning:

css
th {
  text-align: left;
}

Bir Necha Ustunlar Uchun Sarlavha ​

Siz bir nechta ustunlarni qamrab oluvchi sarlavha yaratishingiz mumkin.

html
<table>
  <tr>
    <th colspan="2">Ism</th>
    <th>Yosh</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Buning uchun <th> elementiga colspan atributini qo'llang.

TIP

Siz colspan va rowspan haqida Jadval colspan & rowspan bobida batafsil o'rganasiz.

Jadval Sarlavhasi (Caption) ​

Jadvalga umumiy sarlavha qo'shishingiz mumkin.

html
<table>
  <caption>Oylik tejashlar</caption>
  <tr>
    <th>Oy</th>
    <th>Tejash</th>
  </tr>
  <tr>
    <td>Yanvar</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Fevral</td>
    <td>$50</td>
  </tr>
</table>

Jadvalga sarlavha qo'shish uchun <caption> tegidan foydalaning.

TIP

Eslatma: <caption> tegi <table> tegidan darhol keyin yozilishi kerak.