Cədvəllərin yaradılması

6.1 table və tr elementləri

HTML-də cədvəllər məlumatları cədvəl formatında təşkil etmək üçün istifadə olunur. Cədvəllərin yaradılması üçün əsas istifadə edilən tag-lar <table>, <tr> və <td>-dir. Gəlin onları ətraflı nəzərdən keçirək.

<table>

<table> bütün cədvəl üçün konteyner rolunu oynayır. Onun içərisində cədvəl sətirləri yerləşdirilir. Hər bir sətir <tr> tag-ı ilə müəyyən edilir.

İstifadə nümunəsi:

    
      <table>
        <!-- cədvəlin sətirləri və hüceyrələri burada əlavə olunacaq -->
      </table>
    
  

<tr> tag-ı (table row)

<tr> tag-ı cədvəl sətirini ifadə edir. <tr> tag-ının içərisində cədvəl hüceyrələri yerləşdirilir. Hər bir hüceyrə <td> və ya <th> tag-ı ilə müəyyən edilir.

İstifadə nümunəsi:

    
      <table>
        <tr>
          <!-- sətirin hüceyrələri burada əlavə olunacaq -->
        </tr>
      </table>
    
  

6.2 td və th elementləri

<td> etiketi (table data)

<td> etiketi cədvəl sətirində məlumat hücrəsini təyin etmək üçün istifadə olunur. Bu hücrələr cədvəlin məlumatlarını ehtiva edir və etiketi ilə işarələnmiş sətirdə yerləşir.

İstifadə nümunəsi:

    
      <table>
        <tr>
          <td>Hücrə 1</td>
          <td>Hücrə 2</td>
          <td>Hücrə 3</td>
        </tr>
      </table>
    
  

<th> etiketi (table head)

<th> etiketi cədvəlin başlıq hücrələrini təyin etmək üçün istifadə olunur. <th> daxilindəki mətn adətən qalın şriftlə göstərilir və mərkəzə hizalanır.

İstifadə nümunəsi:

    
      <table>
        <tr>
          <th>Başlıq 1</th>
          <th>Başlıq 2</th>
          <th>Başlıq 3</th>
        </tr>
      </table>
    
  

Cədvəl nümunəsi:

    
      <table>
        <tr>
          <th>Ad</th> <th>Yaş</th> <th>Şəhər</th>
        </tr>
        <tr>
          <td>İvan</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>Mariya</td> <td>25</td> <td>Frankfurt</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>Paris</td>
        </tr>
      </table>
    
  

6.3 Cədvəllərin üslublaşdırılması

Cədvəlləri mütləq CSS ilə üslublaşdırmaq lazımdır — bu, məlumatların vizuallığını və oxunaqlığını əhəmiyyətli dərəcədə artırır.

Məsələn, siz hər hücrəyə çərçivə əlavə etmək qərarına gəldiniz: təqdirəlayiqdir, amma hər hücrənin çərçivəsi olduğuna görə, indi hər iki hücrəni ikiqat çərçivə ayırır — hər bir hücrənin öz çərçivəsi var. 🤦‍♂️

Çərçivənin istədiyiniz kimi görünməsini istəyirsinizsə, CSS-dən istifadə edərək qonşu çərçivələri birləşdirməlisiniz. Bunun üçün xüsusi bir property var — border-collapse.

Bizim cədvəlin yaxşı üslublaşdırılmasının nümunəsi:

    
      <table>
        <tr>
          <th>Ad</th> <th>Yaş</th> <th>Şəhər</th>
        </tr>
        <tr>
          <td>İvan</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>Mariya</td> <td>25</td> <td>Frankfurt</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>Paris</td>
        </tr>
      </table>
    
  

    
      table {
        width: 50%; /* Cədvəlin enini müəyyən edir */
        border-collapse: collapse; /* Hücrələrin arasındakı ikiqat sərhədləri aradan qaldırır */
      }

      th, td {
        border: 1px solid black; /* Hücrələr üçün sərhədləri müəyyən edir */
        padding: 8px; /* Hücrələrin içində boşluq əlavə edir */
        text-align: left; /* Mətni sola düzləndirir */
      }

      th {
        background-color: #f2f2f2; /* Başlıqlar üçün fon rəngini müəyyən edir */
      }
    
  

Burada biz görürük ki:

• Hər bir hücrənin qalınlığı 1 piksel olan qara sərhədi var
• Hücrələrin arasındakı ikiqat sərhədlər aradan qaldırılıb
• Hər bir hücrədə daxili boşluqlar var ki, mətn sərhədlərə yapışmasın
• Başlıq hücrələrinin fərqli fon rəngi var

Gözəllik!