HTML jadval

Jadval shunday yoziladi

<table>
    <tr>
        <td>Ism</td>
        <td>Tavallud sanasi</td>
        <td>Tavallud joyi</td>
    </tr>
    <tr>
        <td>Al Xorazmiy</td>
        <td>783</td>
        <td>Xiva</td>
    </tr>
    <tr>
        <td>Al Beruniy</td>
        <td>973</td>
        <td>Kat</td>
    </tr>
</table>

Brauzerga qaraymiz

Ism Tavallud sanasi Tavallud joyi
Al Xorazmiy 783 Xiva
Al Beruniy 973 Kat

Mana sizlarga jadval.

Ravshanroq namayon bo'lishi uchun kodni o'zgartiramiz.

<style>
    td {
        border: 1px solid black;
    }
</style><table>
    <tr>
        <td>Ism</td>
        <td>Tavallud sanasi</td>
        <td>Tavallud joyi</td>
    </tr>
    <tr>
        <td>Al Xorazmiy</td>
        <td>783</td>
        <td>Xiva</td>
    </tr>
    <tr>
        <td>Al Beruniy</td>
        <td>973</td>
        <td>Kat</td>
    </tr>
</table>
Ism Tavallud sanasi Tavallud joyi
Al Xorazmiy 783 Xiva
Al Beruniy 973 Kat

table tarjimasi jadval. tr table row degani, manosi "jadvalning qatori". td table data degani, manosi "jadvalning ma'lumoti".

Jadvalimizda 3-ta qator. Har bitta qatorga o'z tr javob beradi. Birinchi qatorga birinchi tr, ikkinchisiga ikkinchi tr, uchinchisiga uchinchi. Birinchi qatorda uchda katak bor. Har bitta katakka o'z td unsuri javob beradi. Birinchi katakka birinchi td, ikkinchiga ikkinchi td, unchinchiga uchinchi td.

Jadvalni sal chiroyliroq qilamiz.

<style>
    td {
        border: 1px solid black;
    }
    table {        border-collapse: collapse;    }</style>
<table>
    <tr>
        <td>Ism</td>
        <td>Tavallud sanasi</td>
        <td>Tavallud joyi</td>
    </tr>
    <tr>
        <td>Al Xorazmiy</td>
        <td>783</td>
        <td>Xiva</td>
    </tr>
    <tr>
        <td>Al Beruniy</td>
        <td>973</td>
        <td>Kat</td>
    </tr>
</table>
Ism Tavallud sanasi Tavallud joyi
Al Xorazmiy 783 Xiva
Al Beruniy 973 Kat

Jadval eniga chozilish uchun yana CSS qo'shamiz.

<style>
    td {
        border: 1px solid black;
    }
    table {
        border-collapse: collapse;
        width: 100%;    }
</style>
<table>
    <tr>
        <td>Ism</td>
        <td>Tavallud sanasi</td>
        <td>Tavallud joyi</td>
    </tr>
    <tr>
        <td>Al Xorazmiy</td>
        <td>783</td>
        <td>Xiva</td>
    </tr>
    <tr>
        <td>Al Beruniy</td>
        <td>973</td>
        <td>Kat</td>
    </tr>
</table>
Ism Tavallud sanasi Tavallud joyi
Al Xorazmiy 783 Xiva
Al Beruniy 973 Kat