HTML Jadvalda Padding va Spacing

HTML jadval hujayralarining ichidagi bo'shliq (padding) va hujayralar orasidagi masofa (spacing) ni sozlash mumkin.

Jadval Misollari

Padding bilan

<table style="padding: 15px;">
  <caption>Padding bilan</caption>
  <tr>
    <td>salom</td>
    <td>salom</td>
    <td>salom</td>
  </tr>
  <tr>
    <td>salom</td>
    <td>salom</td>
    <td>salom</td>
  </tr>
  <tr>
    <td>salom</td>
    <td>salom</td>
    <td>salom</td>
  </tr>
</table>

Spacing bilan

<table style="border-spacing: 30px;">
  <caption>Spacing bilan</caption>
  <tr>
    <td>salom</td>
    <td>salom</td>
    <td>salom</td>
  </tr>
  <tr>
    <td>salom</td>
    <td>salom</td>
    <td>salom</td>
  </tr>
  <tr>
    <td>salom</td>
    <td>salom</td>
    <td>salom</td>
  </tr>
</table>

---

HTML Jadval - Hujayra Paddingi

Hujayra paddingi — bu hujayra chetlari va ichidagi kontent orasidagi bo'shliq.
Odatiy holatda padding 0 ga teng.

Jadval hujayralariga padding qo'shish uchun CSS padding xususiyatidan foydalaniladi:

sarlavha, hujayra {
  padding: 15px;
}

Faqat yuqoridan padding qo'shish uchun padding-top xususiyatidan foydalaning.
Boshqa tomonlarga padding qo'shish uchun padding-bottom, padding-left, va padding-right xususiyatlarini ishlating:

sarlavha, hujayra {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

---

HTML Jadval - Hujayra Spacingi

Hujayra spacingi — bu har bir hujayra orasidagi masofa.
Odatiy holatda bu masofa 2 pikselga teng.

Jadval hujayralari orasidagi masofani o'zgartirish uchun CSS border-spacing xususiyatini jadval elementiga qo'llang:

jadval {
  border-spacing: 30px;
}