Tables

Table so'zi jadval deb tarjima qilinadi.

HTML jadvallari veb-saxifada ma'lumotlarni satrlar va ustunlarga ajratib ko'rsatish imkoniyatini beradi.

Table (jadval)

<table>  tegi HTML jadvalini  ko'rsatish uchun ishlatiladi.

Bilamizki jadval qatorlar va ustunlardan tashkil topadi. Namunada 7ta  qator va 3ta ustun bor.

Jadvalda qatorlarni ko'rsatish uchun  <tr>   dan foydalaniladi. tr  qisqartmasi Table Row so'zidan olingan bo'lib Jadval Qatori degan ma'noni anglatadi.

Jadval ustunlarni ko'rsatish uchun  <td>  dan foydalaniladi. td so'zi Table Data so'zidan olingan bo'lib Jadval Ma'lumoti degan ma'noni anglatadi.

Tepadagi namunada bitta qatorda 3ta ustun bor. Bu degani  bitta  <tr>  ni ichida 3ta   <td>  bor degani.

Jadvalning sarlavhasini ko'rsatish uchun  <th>  dan foydalaniladi.  th so'zi Table Header so'zidan olingan bo'lib Jadval Sarlovhasi degan ma'noni anglatadi.

Demak

  • tr  jadvalda qatorlar ni ko'rsatish uchun ishlatiladi
  • td jadvalda ustunlarni ko'rsatish uchun ishlatiladi va u <tr>  ni ichida yoziladi. <td> ni ichida jadval ma'lumoti yoziladi. td ichida boshqa bir Html element (p, div, img) larni yozsak ham bo'ladi. 
  • th jadval sarlavhasini ko'rsatish uchun ishlatiladi va u <tr> ni ichida yoziladi. 
  • td bilan th ni farqi th teksni qalin va katak o'rtasida  ko'rsatiladi. Xuddi sarlovhani ajratib ko'rsatgandek th ham ajratib ko'rsatadi.

Namuna

<!DOCTYPE html>
<html>
 <body>
   	<h1>HTML Table (Jadval)</h1>

    <table>
      <tr>
        <th>Isim</th>
        <th>Familiya</th>
        <th>Tel</th>
      </tr>
      <tr>
        <td>Ali </td>
        <td>Alijonnov</td>
        <td>555-66-22</td>
      </tr>
      <tr>
        <td>Vali</td>
        <td>Valijonov</td>
        <td>666-44-88</td>
      </tr>
      <tr>
        <td>Bobur</td>
        <td>Boburov</td>
        <td>777-55-44</td>
      </tr>
    
    </table>
   
 </body>
</html>

Natija


Namunada

  • 4ta qator  bor demak html kodda 4ta <tr>  bor.  
  • 1chi qator da sarlovha yozilgan va ularni ajtarib ko'rsatish uchun <th> dan foydalanilgan.
  • har bitta qatorda 3tadan ustun bor . Shu sababda har bitta qatorda 3ta <td>  yozilgan.

Table Border

Border so'zi chegara degan ma'noni anglatadi.

Jadvalda cheqara qo'shish uchun CSS dan foydalaniladi.

Namuna


<!DOCTYPE html>
<html>
 <head>
  <style>
      table, th, td {
  		border: 1px solid black;
       }
  </style>
 </head>
  <body>
   	<h1>HTML Table Border</h1>

    <table>
      <tr>
        <th>Isim</th>
        <th>Familiya</th>
        <th>Tel</th>
      </tr>
      <tr>
        <td>Ali </td>
        <td>Alijonnov</td>
        <td>555-66-22</td>
      </tr>
      <tr>
        <td>Vali</td>
        <td>Valijonov</td>
        <td>666-44-88</td>
      </tr>
      <tr>
        <td>Bobur</td>
        <td>Boburov</td>
        <td>777-55-44</td>
      </tr>
      <tr>
        <td>Sanjar</td>
        <td>Sanjarov</td>
        <td>444-55-77</td>
      </tr>
    
    </table>
   
 </body>
</html>

Table Collapsed Borders

Jadval chegaralarini bitta joyga keltirish uchun  border-collapse  xususiyatidan foydalaning.

Namuna

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

Table Add Cell Padding

Table cell deganda jadvalning kataklari nazarda tushiniladi.

Padding bu elementning chegarasi bilan element kontenti (teksti) orasidagi bo'sh joy.

Demak table add cell padding deganda jadval elementlari kontenti va chegarasi orasiga bo'sh joy qo'shish tushiniladi.

Jadvalga padding qo'shish uchun css dan foydalanamiz.

Namuna

th, td 
{
   padding: 15px;
}

Headinf Left-align 

Jadval Sarlavhasi teksnini chap tomondan joylashtirish.

Namuna

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

 

Cell that Spans Many Columns

Bir necha ustunlarni qamrab olgan jadval katagi.

Jadvalda bitta katak bir nechda ustunni (<td> larni) qamrab olishi mumkin va buni   colspan   atributi orqali qilish mumkin.

 colspan  ustunlarni qamrab olishi kerak bo'lgan katakka yoziladi. Nechta ustunni qamrab olish qiymati  colspan  qiymatiga yoziladi.

Namuna

<!DOCTYPE html>
<html>
 <body>

    <table>
      <tr>
        <th>Isim</th>
        <th colspan="2"> Tel Raqamlar</th>
      </tr>
      <tr>
        <td>Ali </td>
        <td>123-33-55</td>
        <td>555-66-22</td>
      </tr>
      <tr>
        <td>Vali</td>
        <td>554-80-23</td>
        <td>666-44-88</td>
      </tr>
      <tr>
        <td>Sanjar</td>
        <td>***-**-**</td>
        <td>444-55-77</td>
      </tr>
    </table>
   
 </body>
</html>

Namunada  Tel Raqam   katagi  2ta ustunni qamrab olishi kerak edi shu boisdan unga collapse="2"  yozildi.

Katak xohlagancha ustunlarni qamrab olishi mumkin.

Cell that Spans Many Rows

Bir nechta qatorlarni qamrab oladigan katak.

Jadvalda bitta katak bir nechda qatorlarni (<tr> larni)  qamrab olishi mumkin va buni   rowspan   atributi orqali qilish mumkin.

 rowspan  qatorlarni qamrab olishi kerak bo'lgan katakka yoziladi. Nechta qatorni qamrab olish qiymati  rowspan  qiymatiga yoziladi.

Namuna

<!DOCTYPE html>
<html>
 <body>

    <table>
      <tr>
        <th>Isim</th>
  	<td>Ali </td>
      </tr>
      <tr>
        <th rowspan="2">Tel</th>
        <td>555-66-22</td>
      </tr>
      <tr>
        <td>666-44-88</td>
      </tr>
    </table>
   
 </body>
</html>

Add a Caption

Jadval  nomini yoki tarifini kiritish uchun  <caption>  elementidan foydalansak bo'ladi.

Namuna

<!DOCTYPE html>
<html>
 <body>
    <table>
      <caption>Ishchilar ro'yxati</caption>
      <tr>
        <th>Isim</th>
        <th>Familiya</th>
        <th>Tel</th>
      </tr>
      <tr>
        <td>Ali </td>
        <td>Alijonnov</td>
        <td>555-66-22</td>
      </tr>
      <tr>
        <td>Vali</td>
        <td>Valijonov</td>
        <td>666-44-88</td>
      </tr>
      <tr>
        <td>Bobur</td>
        <td>Boburov</td>
        <td>777-55-44</td>
      </tr>
    
    </table>
   
 </body>
</html>

Table Style

Jadvalni o'zimiz xoxlagandek stillar berishimiz mumkin.

Jadvalning qatorlarini o'qish oson bo'lishi uchun uning juft va toq qatorlarini rangini ajratib ko'rsatish mumkin. Buning uchun   tr:nth-child(...)   xususiyatidan foydalaning. 

  tr:nth-child(...)   degani tr (qatorning)    nchi bolasi degani. Ya'ni ... lar o'rniga nechinchi qatorga shu xususiyatni (stillarni) berish kerak ekanligini yozishimiz kerak.

 ... lar o'rniga quyidagilarni yozish mumkin.

  • even - juf bo'lgan qatorlar
  • odd - toq bo'lgan qatorlar
  • n - qandaydir butun son shu nchi qatorlar

 tr:nth-child  ning qolgan xususiyatlari haqida CSS darslarida to'liq malumot olishingiz mumkin. Html darslarida table elementini o'rgansak yetarli.

Namuna

tr:nth-child(even)
{
    background-color: green;
}
      
tr:nth-child(odd) 
{
    background-color: yellow;
}
      
tr:nth-child(5) 
{ /*5chi qator*/
    background-color: red;
}

Mavzu yakuni

  • Jadvalni yaratish uchun HTML <table> elementidan foydalaning.
  • Jadval qatori yaratish uchun HTML <tr> elementidan foydalaning.
  • Jadval ustuni yaratish uchun HTML <td> elementidan foydalaning.
  • Jadval sarlavhasini yaratish uchun HTML <th> elementidan foydalaning.
  • Jadval nomini yaratish uchun HTML <caption> elementidan foydalaning.
  • Jadval chegarasini ko'rsatish uchun  CSSning border xususiyatidan foydalaning.
  • Jadval chegaralar oralig'ini ixchamlashtirish uchun CSS-ning border-callopse   xususiyatidan foydalaning.
  • Katakchalarni to'ldirish uchun CSS padding xususiyatidan foydalaning.
  • Elementning  matnini tekislash uchun CSS text-align xususiyatidan foydalaning.
  • Kataklar orasidagi bo'shliqni o'zgartirish  uchun CSS border-spacing xususiyatidan foydalaning.
  • Bir nechta ustunlarni qamrab olish uchun colspan atributidan foydalaning.
  • Bir nechta qatorini qamrab olish uchun rowspan atributidan foydalaning.
  • Jadval qatorlarini bir biridan ajratib ko'rsatish uchun tr:nth-chield() xususiyatidan foydalaning.