HTML Jadvallar

HTML Jadvallar


HTML Jadvaliga Namuna

Tartib raqami Ismi Familiyasi Natijalar
1 Marlyn Monroe 95
2 James Bond 98
3 David Beckham 48
4 Javokhir Kudratov 90

HTML Jadvalini Ifodalash

Namuna:

<table style="width:100%">
 <tr>
   <td>Will</td>
   <td>Smith</td>
   <td>50</td>
 </tr>
 <tr>
   <td>Micheal</td>
   <td>Jackson</td>
   <td>94</td>
 </tr>
</table>

Namunaga Izohlar:

Jadvallar <table> tegi bilan belgilanadi.

Jadvallar <tr> tegi yordamida qatorlarga bo'linadi.

Jadval qatorlari <td>tegi orqali jadval ma'lumotlariga bo'linadi;

Shuningdek jadval qatori <th> tegi bilan jadval sarlavhasini yozish mumkin.


...   <td> jadval ma'lumotlari jadvalning konteyneri hisoblanadi.
Ular turli xildagi ma'lumotlarni o'z ichiga oladi misol uchun matn, rasmlar, ro’yxatlar, boshqa jadvallar va h.k.


HTML Jadvali Border Atributi Bilan

Agar siz jadvalning chegaralarini aniqlamasangiz, jadval chegarasiz ko'rsatiladi.

Chegaralar quyidagi atribut orqali qo'shiladi:

Namuna:

<table border="1" style="width:100%">
<tr>
    <td>Bruno</td>
    <td>Mars</td>
    <td>50</td>
</tr>
<tr>
    <td>Bob</td>
    <td>Marley</td>
    <td>94</td>
</tr>
</table>

...   border atributi HTML standardlariga to’g’ri kelmaydi. border atributini yaxshisi CSS da ishlatilgani ma’qul.

Border(chegara) kiritish uchun, CSS border xususiyatidan foydalaning:

Namuna:

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

HTML Jadvalida Collapsed Borders

Agar siz jadval chegaralari faqat chiziq holatida bo’lishini hohlasangiz CSS border-collapse atributini ishlating

Namuna:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

HTML jadvalda Cell Padding

Jadval chegarasidan yozuvgacha bo’lgan masofani o’rnatish, agar o’rnatilmasa, yozuv jadval chegarasiga yopishib yoziladi.

padding o'rnatish uchun, CSS padding xususiyatidan foydalaning:

Namuna:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}

HTML Jadval Sarlavhasi

Jadval sarlavhasi <th> tegi bilan aniqlanadi.

Deyarli barcha asosiy browserlar jadval sarlavhasini qalin va markazda ko’rsatadi.

Namuna:

<table style="width:100%">
<tr>
    <th>Ismi</th>
    <th>Familiyasi</th>
    <th>Ballari</th>
</tr>
<tr>
    <td>Sarvarkhuja</td>
    <td>Murodov</td>
    <td>94</td>
</tr>
</table>

Teg ichidagi qatorlarni chapga tekislash uchun,CSS text-align xususiyatidan foydalaning:

Namuna:

th {
    text-align: left;
}

HTML Jadvallarida Chegara Oralig’i

Chegara oralig’i yacheykalar orasidagi oraliq belgilaydi.

Jadvalda chegara oralig’i o’rnatish uchun, CSS border-spacing ni ishlatamiz.

Namuna:

table {
    border-spacing: 5px;
}

...   Agar jadval chegalari buzilsa, chegara-oralig’ini ta’siri yo’q.


Bir Qancha Ustunlarni Umumiy Katakga Joylash

Buning uchun, colspan atributidan foydalanamiz:

Namuna:

<table style="width:100%">
  <tr>
    <th>Ismi</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

Bir Qancha Ustunni Jadval Yacheykalari Ichiga Qo’yish

Yacheykaga bittadan ko’p ustunni qo'yish uchun colspan atributidan foydalaniladi:

Namuna:

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Steve Jobs</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

HTMLda Yaratilgan Jadvalga Nom Berish

Jadvalga izoh qo’shish uchun, <caption> tegidan foydalaniladi:

Namuna:

<table style="width:100%">
<caption>Monthly savings</caption>
  <tr>
    <th>Oy</th>
    <th>Daromad</th>
  </tr>
  <tr>
    <td>Yanvar</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Fevral</td>
    <td>$50</td>
  </tr>
</table>

...   <table> tegidan so’ng darhol <caption> tegi ishlatilishi kerak.


Jadval Uchun Maxsus Ko’rinish

Jadvalda maxsus ko’rinishini aniqlash uchun, jadvalga bir id atributini qo’shish kerak:

Namuna:

<table id="t01"
>
  <tr>
    <th>Ismi</th>
    <th>Familiyasi</th>
    <th>Ballari</th>
  </tr>
  <tr>
    <td>Mishel</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

CSS faylida siz jadval ko’rinishini belgilashingiz mumkin:

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}

Va yana boshqa stillarni qo’shishingiz mumkin:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white; background-color: black;
}

Bo’lim xulosasi:

  • HTML <table> elementi jadval kiritishda ishlatiladi
  • HTML <tr> elementi qator kiritishda ishlatiladi
  • HTML <td> elementi jadvaldagi ma'lumotlarni kirishda ishlatiladi.
  • HTML <th> element to jadval boshini bildiradi
  • HTML <caption> elementi hadval sarlavhasini qo'yishda ishlatiladi
  • CSS border jadval chegarasini aniqlashda ishlatiladi
  • CSS border-collapse jadval chegarsini chiziq holatida ko'rsatadi
  • CSS padding jadval kengligini o'zgartirishda yordam beradi.
  • CSS text-align jadvaldagi matnlarni qaysi tomondan boshlanishida ishlatiladi.
  • CSS border-spacing yacheykalar orasidagi oraliqni belgilaydi
  • colspan attributi bitta umumiy ustun qiladi
  • rowspan attributi bitta umumiy qator qilishda ishlatiladi.
  • id attributi jadvalning yagona ekanligini bildiradi.

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017