Responsive Web Tasarım Tablo Tasarımı

Veri tabloları olan web uygulamalarını geliştirdiğimizde, duyarlı bir tablo oluşturmak için geliştiricileri uğraştıran bir uygulamadır. Akıllı telefonlar gibi cihazlarda normal tablolar görünmez.

Tablolar her zaman ekran genişliğine otomatik olarak ayarlanmaz. Bunun nedeni tablo içeriğinin genelikle belirli bir minumum alan gerektirmesidir. Böylece, Telefon ve Tabletler gibi küçük ekranlarda Tablo verisinin ekranın dış alana çıkar. Tablonun tam içeriği cihazlarda görünmez.

Framework ile duyarlı tablo oluşturmak kolaydır. Ancak herhangi bir eklenti veya çerçeve kullanmadan duyarlı tablo nasıl oluşturulur? CSS ile duyarlı Tablo mümkünmü? Evet CSS ile duyarlı tablo yapılır. javascript kullanılmadan duyarlı tablo tasarlanır.

Bu makalede duyarlı tablo için çözümler ve CSS3 medya sorguları ile düzeni değiştirerek, duyarlı bir Tablo nasıl yapılacağını göreceğiz.

Duyarlı Tablolar

En basit yoldan Responsive Tablo yapımı, scrool yatay kaydırma çubuklarını çıkarak göstermek.

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

ÇIKTI:

Ekran, tam içeriği görüntülemek için çok küçükse, duyarlı bir Tablo yatay kaydırma çubuğunu görüntüler. Efekti görmek için Tarayıcı penceresini yeniden boyutlandırın:

İkinci Yöntemle Duyarlı Tablo Oluşturma

Ekranın boyutunu küçülttüğünüzde, Ekran sınırları dışına çıkarsa büyük olasılıkla tablonun toplam genişliği piksel cinsinden belirtilmiş ve Bu tablo ekrana göre duyarlı olması için yüzde cinsinden CSS veya HTML olarak ayarlamanız gerekir.

Genel olarak, Tabloların Duyarlı olmasının bazı özellikleri vardır. Örneğin, Tablo genişliğini piksel cinsinden değil, yüzdesel olarak kullanıyorsanız, Bu Tablo otomatik olarak ekranın genişliğine göre uyarlanır.

table {
        table-layout: fixed;
        width:100%;
      }

Ancak, bu teknik bazı basit tablolar için uygundur. Eğer tablo verilerinin kelimeleri uzunsa küçük ekranlarda yine sorun yaratacaktır. Tablo sütunlarına kısa kelimeler girilirse ekrana sığmasada bir alt satıra geçer veya uzun kalimeler yerine simge resimler girilerek bu tablo düzeni kullanılabilir.

Üçüncü Yöntem Duyarlı Tablo Oluşturma

Bu yöntemde CSS özelliği Attr işlevinden faydalanacağız. Attr() CSS işlevi, seçilen öğenin bir niteliğinin değerini almak ve stil sayfasında kullanmak için kullanılır. Sahte elemanlar üzerinde kullanılabilir, bu durumda, söz konusu öğenin kaynak öğesindeki özniteliğin değeri döndürülür.

CSS:

a:after {
         content:attr(href);
        }

CSS Attr özelliğinden faydalanarak oluşturulan tablo:

HTML Tablomuz

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>ADI</th>
      <th>DERS</th>
      <th>TARAYICI</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="ID">1</td>
      <td data-label="ADI">ALİ</td>
      <td data-label="DERS">CSS</td>
      <td data-label="TARAYICI">CHROME</td>
    </tr>
    <tr>
      <td data-label="ID">2</td>
      <td data-label="ADI">AHMET</td>
      <td data-label="DERS">CSS</td>
      <td data-label="TARAYICI">FİREFOX</td>
    </tr>
  </tbody>
</table>

Farklı olarak data-label ekliyoruz bu da bizim Tablonun başlıklarıdır. CSS Kısmında lazım olacaktır.

body {
    font-family: arial;
  }

  table {
    border: 1px solid #ccc;
    width: 100%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
  }

  table tr {
    border: 1px solid #ddd;
    padding: 5px;
  }

  table th, table td {
    padding: 10px;
    text-align: center;
  }

  table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
  }

  /*Mobil telefon için css kodları*/

  @media screen and (max-width: 600px) {

    table {
      border: 0;
    }

    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 2px solid #ddd;
    }

    table td {
      display: block;
      text-align: right;
      font-size: 13px;
      border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
      border-bottom: 0;
    }

 /*data-label valulerini alarak sütünümuza eklemiş oluyoruz*/

    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
  }
 

Responsive Web Tasarım Derslerine buradan ulaşabilirsiniz…