CodeGym /Kurslar /Frontend SELF AZ /Adaptiv cədvəllər

Adaptiv cədvəllər

Frontend SELF AZ

Səviyyə , Dərs

Mövcuddur

9.1 Kaydırma (Scroll)

Cədvəllər tez-tez strukturlaşdırılmış məlumatların göstərilməsi üçün istifadə olunur, amma kiçik ekranlı cihazlarda onları göstərmək çətin ola bilər. Adaptiv cədvəllər müxtəlif cihazlarda, o cümlədən mobil telefonlar və planşetlərdə məlumatların qavranılmasını və onlarla qarşılıqlı əlaqəni yaxşılaşdırmağa imkan yaradır. Gəlin adaptiv cədvəllər yaratmaq üçün bir neçə texnikaya nəzər salaq.

Adaptiv cədvəllər yaratmağın sadə yollarından biri - üfüqi kaydırmanın əlavə edilməsi. Bu metod cədvəl strukturunu saxlayır və istifadəçilərə dar ekranlarda məlumatları üfüqi olaraq kaydırmağa imkan verir.

Nümunə:

CSS

    
      .table-container {
        overflow-x: auto;
        width: 100%;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Kaydırmalı adaptiv cədvəl</title>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body>
      <div class="table-container">
        <table>
          <thead>
          <tr>
            <th>Sütun 1</th>
            <th>Sütun 2</th>
            <th>Sütun 3</th>
            <th>Sütun 4</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>Məlumat 1</td>
            <td>Məlumat 2</td>
            <td>Məlumat 3</td>
            <td>Məlumat 4</td>
          </tr>
          <!-- Digər sətirlər -->
          </tbody>
        </table>
      </div>
      </body>
      </html>

Kod izahı:

.table-container: cədvəl konteynerin enini aşarsa üfüqi kaydırma əlavə edir
table: cədvəlin enini 100% edir və hüceyrələrin sərhədlərini birləşdirir

9.2 Sütunların gizlədilməsi (Column Hiding)

Bu metod dar ekranlarda az əhəmiyyətli sütunları gizlədərək əsas məlumatların görünməsini təmin edir. Bunu media-query-lər vasitəsiylə etmək olar.

Nümunə:

CSS

    
      @media (max-width: 600px) {
        .hide {
          display: none;
        }
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Adaptiv sütunları gizlədən cədvəl</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>Sütun 1</th>
              <th>Sütun 2</th>
              <th class="hide">Sütun 3</th>
              <th class="hide">Sütun 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Məlumat 1</td>
              <td>Məlumat 2</td>
              <td class="hide">Məlumat 3</td>
              <td class="hide">Məlumat 4</td>
            </tr>
            <!-- Digər sətirlər -->
            </tbody>
          </table>
        </body>
      </html>

Kodun izahı:

.hide: media-query-lərdən istifadə edərək 600px-dən kiçik ekranda müəyyən sütunları gizlədir
table: cədvəlin enini 100% edir və xanalardakı sərhədləri birləşdirir

9.3. Bloklara çevirmək (Stacking)

Bloklara çevirmək cədvəlin sətirlərini şaquli şəkildə bir-birinin ardınca təsvir olunan bloklara çevirir dar ekranlarda. Bu, cədvəli mobil cihazlarda daha oxunaqlı edir.

Nümunə:

CSS

    
      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

      @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
          display: block;
        }

        th {
          display: none;
        }

        td {
          display: flex;
          justify-content: space-between;
          padding: 10px;
          border-bottom: 1px solid #ccc;
        }

        td::before {
          content: attr(data-label);
          font-weight: bold;
        }
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Bloklara çevirmə ilə adaptiv cədvəl</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>Sütun 1</th>
              <th>Sütun 2</th>
              <th>Sütun 3</th>
              <th>Sütun 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td data-label="Sütun 1">Məlumat 1</td>
              <td data-label="Sütun 2">Məlumat 2</td>
              <td data-label="Sütun 3">Məlumat 3</td>
              <td data-label="Sütun 4">Məlumat 4</td>
            </tr>
            <!-- Başqa sətirlər -->
            </tbody>
          </table>
        </body>
      </html>

Kod izahı:

Media sorğuları: cədvəli 600px-dən kiçik ekranlarda blok elementlərə çevirir
td::before: hər bir hücrə dəyərinin qarşısına, müvafiq sütunun adını göstərən psevdoelement əlavə edir ki, məlumat konteksti saxlanılsın

9.4. Kart (Card Layout) Formatına Transformasiya

Bu metod cədvəlin hər bir sətrinin dar ekranlarda ayrıca bir kartlara çevrilməsini nəzərdə tutur. Bu, mobil cihazlarda məlumatın oxunaqlığını yaxşılaşdırır.

Nümunə:

CSS

    
      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

      @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
          display: block;
        }

        th {
          display: none;
        }

        tr {
          margin-bottom: 10px;
          border-bottom: 2px solid #ccc;
          padding-bottom: 10px;
        }

        td {
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          border: none;
        }

        td::before {
          content: attr(data-label);
          font-weight: bold;
          margin-right: 10px;
        }
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Kartlara çevrilən adaptiv cədvəl</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>Sütun 1</th>
              <th>Sütun 2</th>
              <th>Sütun 3</th>
              <th>Sütun 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td data-label="Sütun 1">Məlumat 1</td>
              <td data-label="Sütun 2">Məlumat 2</td>
              <td data-label="Sütun 3">Məlumat 3</td>
              <td data-label="Sütun 4">Məlumat 4</td>
            </tr>
            <!-- Digər sətirlər -->
            </tbody>
          </table>
        </body>
      </html>

Kodun İzahı:

Media sorğuları: cədvəli blok elementlərə çevirir və 600px-dən daha dar ekranlar üçün kartlar yaradır
td::before: hər bir xanadakı dəyərdən əvvəl sütunun adını ehtiva edən pseudo-element əlavə edir ki, məlumatın konteksti qorunsun

9.5 CSS Frameworks istifadəsi

Bootstrap kimi bir çox CSS-frameworks adaptiv cədvəllər yaratmaq üçün hazır həllər təklif edir. Belə frameworklərdən istifadə prosesi sadələşdirir və hazır stillər və komponentlər təqdim edir.

Bootstrap istifadəsi ilə nümunə:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Bootstrap ilə adaptiv cədvəl</title>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        </head>
        <body>
          <div class="container">
            <table class="table table-responsive">
              <thead>
              <tr>
                <th>Sütun 1</th>
                <th>Sütun 2</th>
                <th>Sütun 3</th>
                <th>Sütun 4</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
              </tr>
              <!-- Başqa sətirlər -->
              </tbody>
            </table>
          </div>
          <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        </body>
      </html>

Kodun izahı:

table.table-responsive: Bootstrap sinfi, dar ekranlarda cədvəllər üçün üfüqi scroll əlavə edir
container: Bootstrap sinfi konteynerin mərkəzləşdirilməsi və maksimum eni üçün istifadə olunur

Əvvəlki Əvvəlki dərs

Sonrakı Növbəti dərs

Şərhlər

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION