Cədvəl hüceyrələrinin HTML-də birləşdirilməsi

8.1 Xanaların üfüqi istiqamətdə birləşdirilməsi

Cədvəldə xanaların birləşdirilməsi sizə daha çevik və məlumatlı təqdimatlar yaratmağa imkan verir. Bu, xüsusilə bir neçə xanani birləşdirərək başlıqlar və ya ümumi məlumatlar yaratmalı olduğunuz hallarda faydalıdır. HTML-də xanaları birləşdirmək üçün colspan və rowspan atributlarından istifadə olunur.

colspan atributu

colspan atributu xanaları üfüqi istiqamətdə birləşdirir. O, bir xananın neçə sütunu əhatə etməli olduğunu göstərir. Məsələn, əgər sizin colspan="2" atributuna sahib xananız varsa, o, sıradakı iki adi xananın yerini tutacaq.

İstifadə nümunəsi:

Təsəvvür edin ki, sizin üç sütunlu cədvəliniz var və siz istəyirsiniz ki, sıradakı ilk xana iki sütunu əhatə etsin. Bunun üçün colspan="2" istifadə edirsiniz və bu iki xanani birləşdirirsiniz. Bu, bir neçə sütunu əhatə edən başlıqlar yaratmaq və ya bir neçə kateqoriyaya aid məlumatları birləşdirmək üçün faydalıdır.

    
      <table border="1">
        <tr>
          <th>Ad</th>
          <th>Yaş</th>
          <th>Şəhər</th>
        </tr>
        <tr>
          <td>Alisa</td>
          <td>25</td>
          <td>London</td>
        </tr>
        <tr>
          <td colspan="2">Cəmi</td>
          <td>2 yazı</td>
        </tr>
      </table>
    
  

8.2 Hüceyrələrin şaquli olaraq birləşdirilməsi

rowspan atributu hüceyrələri şaquli olaraq birləşdirir. Bu atribut göstərir ki, bir hüceyrə neçə sətri əhatə etməlidir. Məsələn, əgər sizin rowspan="2" atributlu hüceyrəniz varsa, o, sütundakı iki adi hüceyrə yerini tutacaq.

İstifadə nümunəsi:

Təsəvvür edin ki, sizin üç sətirli bir cədvəliniz var və istəyirsiniz ki, sütunun ilk hüceyrəsi iki sətiri əhatə etsin. Bunun üçün rowspan="2" istifadə edirsiniz ki, bu iki hüceyrəni birləşdirəsiniz. Bu, bir neçə sətirə aid olan məlumat kateqoriyaları, məsələn, birləşdirilmiş başlıqlar və ya ümumi məlumatlar yaratmaq üçün əlverişlidir.

    
      <table border="1">
        <tr>
          <th>Ad</th>
          <th>Layihə</th>
          <th>Şəhər</th>
        </tr>
        <tr>
          <td rowspan="2">Alisa</td>
          <td>Layihə A</td>
          <td>London</td>
        </tr>
        <tr>

          <td>Layihə B</td>
          <td>Batumi</td>
        </tr>
      </table>
    
  

8.3 İş prinsiplərinin izahı

colspan və rowspan necə işləyir

Üfüqi birləşmə (colspan): təsəvvür edin ki, siz bir dərsin bir neçə auditoriyada keçirilən bir cədvəl hazırlayırsınız. Siz colspan istifadə edərək xanaları birləşdirə bilərsiniz ki, bir dərsin iki zaman aralığını əhatə etdiyini göstərin.

Şaquli birləşmə (rowspan): təsəvvür edin ki, siz yarış nəticələrinin cədvəlini hazırlayırsınız və bir iştirakçı bir neçə mərhələdə iştirak edir. Siz rowspan istifadə edərək xanaları birləşdirə bilərsiniz ki, bir iştirakçının iki mərhələni əhatə etdiyini göstərin.

Praktiki nümunələr

Bir neçə sütunu əhatə edən başlıqlar yaratmaq: əgər sizin müxtəlif məlumat kateqoriyalarına dair cədvəliniz varsa və siz bir neçə sütunu əhatə edən başlıq yaratmaq istəyirsinizsə, colspan istifadə edin. Məsələn, "İşçilər haqqında məlumat" başlığı "Ad", "Yaş" və "Şöbə" sütunlarını əhatə edə bilər.

Məlumatların şaquli birləşdirilməsi: əgər sizdə şaquli olaraq birləşdirilməsi lazım olan məlumatlar varsa, məsələn, eyni insan və ya obyekt haqqında bir neçə qeyd varsa, rowspan istifadə edin. Məsələn, əgər bir layihə haqqında məlumatınız varsa və bir layihə bir neçə sətir (məsələn, layihənin fazaları) təşkil edirsə, sətirləri rowspan ilə birləşdirin.

8.4 Nümunələr

Təsəvvür edin ki, sizin işçiləri və onların müxtəlif layihələrdə iştirakını göstərən bir cədvəliniz var:

• İşçilər: İvan, Mariya, Pyotr.
• Layihələr: Layihə A, Layihə B.

Siz hüceyrələri birləşdirib göstərmək istəyirsiniz ki, İvan və Mariya eyni anda hər iki layihədə çalışır:

    
<table border="1">
    <tr>
        <th>Ad</th>
        <th>Layihə A</th>
        <th>Layihə B</th>
        <th>Şəhər</th>
    </tr>
    <tr>
        <td>İvan</td>
        <td colspan="2">Bəli</td>
        <td>London</td>
    </tr>
    <tr>
        <td>Mariya</td>
        <td colspan="2">Bəli</td>
        <td>London</td>
    </tr>
    <tr>
        <td>Pyotr</td>
        <td>Bəli</td>
        <th>Xeyr</th>
        <td>Roma</td>
    </tr>
</table>
    
  

Yaxud, İvanın iki layihə üzərində işlədiyini göstərmək istəyirsinizsə:

    
      <table border="1">
        <tr>
          <th>Ad</th>
          <th>Layihə</th>
          <th>Şəhər</th>
        </tr>
        <tr>
          <td rowspan="2">İvan</td>
          <td>Layihə A</td>
          <td>London</td>
        </tr>
        <tr>
          <!-- boş -->
          <td>Layihə B</td>
          <td>London</td>
        </tr>
        <tr>
          <td>Sergey</td>
          <td>Layihə C</td>
          <td>Roma</td>
        </tr>
      </table>
    
  

Mən xüsusi olaraq şərhi qonşu hüceyrəni böyütdüyü boş yerə yerləşdirdim. Bu, qalanlarının harada görünəcəyini daha aydın edir.