Kasblar

HTML

CSS

Bo'limlar

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.