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.

...

Ç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 {
		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

ID ADI DERS TARAYICI
1 ALİ CSS CHROME
2 AHMET CSS FİREFOX

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;
    }
  } 
önizleme buton

Responsive Web Tasarım Derslerine buradan ulaşabilirsiniz…

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5681

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.