10 Mobil Uyumlu Tablo

Tablolar masaüstü düzenin de harika görünüyorlar, ama mobile sisteme geçince tablolar düzensiz ve kötü görünüyor.

Mobil Uyumlu Tabloların Temelleri

Öncelikle biçimlendirme veya herhangi bir sabit genişlikleri kaldırın.

Önce:

<table width="540">
  <tr>
    <td width="300">Header 1</td>
    <td width="60">Header 2</td>
    <td>Header 3</td>
    <td>Header 4</td>
  </tr>
</table>

Sonra:

<table>
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
    <td>Header 3</td>
    <td>Header 4</td>
  </tr>
</table>

Bu sütun genişliklerini kontroletmek güzel olurdu ama tarayıcı yapmak en iyisi.

Tablolarınız için önce bazı güzel dolgu ve çerçever stilleri ayarlayın.

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #bbb
}
td,th {
    border-top: 1px solid #ddd;
    padding: 4px; 8px;
}

Bazı çizgili satırlar (nth-child IE8 tarafından desteklenmiyor) bunun için aşadaki kodu kullanın.

tbody tr:nth-child(even)  td { background-color: #eee; }

Mobil Uyumlu Tablo

Tablo düzeninizi bozmadan, yatay bir şekilde kaydırmaya izin vermektedir. Öncelikle değiştirmek zorunda olduğumuz display: block; ve overflow-x: auto; – Sadece küçük cihazlarda bunu kullanmak için medya sorgusu kullanabilirsiniz.

@media screen and (max-width: 640px) {
	table {
		overflow-x: auto;
		display: block;
	}
}

MASAÜSTÜ

Beverage	Short (8 oz)	Tall (12 oz)	Grande (16 oz)	Venti (20-24 oz)	Trenta (31oz)
Brewed Coffee	180mg	260mg	330mg	415mg	-
Brewed Decaf Coffee	15mg	20mg	25mg	30mg	-
Caffè Americano	75mg	150mg	225mg	300mg	-

Bu tablo (320px genişliğinde) mobilde kullanıcıya alt kısımında bulunan tabloları kaydırma özelliğiyle kolaylık sağlamaktadır.

MOBİL (sağa kaydırma)

Beverage	Short (8 oz)	Tall (12 oz)	Grande (16 oz)	Venti (20-24 oz)	Trenta (31oz)
Brewed Coffee	180mg	260mg	330mg	415mg	-
Brewed Decaf Coffee	15mg	20mg	25mg	30mg	-
Caffè Americano	75mg	150mg	225mg	300mg	-

Diğer seçenekleri şimdi çok daha güçlü...

1. Footable – jQuery

respt1-d

Mobilde 3. sütundan sonraki sütunlar alt tarafa geçmektedir.

Mobilde 2. satırdaki gibi ilk 3. sütundan sonrasını alt tarafa atarak küçük cihazlarda tablonun bozulması engelleniyor.

Github: github.com/bradvin/FooTable
Demo and Docs: fooplugins.com/footable-demos

2. Foundation Zurb – Kilitli İlk Sütün

respt2-d

Mobile geçince ilk sütunu kilitler.

Masaüstü düzende yatay düzgün bir şekilde görünürken mobile geçince ilk sütunu kilitleyerek diğer sütunların kaymasıyla mobilde bozulmayı önlenmiş.

Demo: zurb.com/playground/projects/responsive-tables/index.html

3. Stacktable

respt3-d

Mobilde her şey bir sütundur.

Masaüstü düzende yatay bir şekilde duran tablolar mobil cihazlarda başlık satırı ve alt satırlarıyla alt alta sıralanıyor.

Demo: johnpolacek.github.io/stacktable.js/
Github: github.com/johnpolacek/stacktable.js

4. Mobil Uyumlu Tablo

respt4-d

Mobilinde yazılar ölçeklendirilir

Bu oldukça ilginç jQuery komutu veri özelliklerine göre tablonun yazı tipi boyutunu dönüşebilecek.

Yukarıdaki örnekte, tablo etiketinin iki özellikleri data-max = "30" ve data-min = "11" içeren minimum ve maksimum piksel yazı tipi boyutunu göstermektedir.

Github: github.com/ghepting/jquery-responsive-tables
Demo: garyhepting.com/jquery-responsive-tables/

5. Filament Grubu – Tablo Bölücü

swipe-minimap

Bu jQuery çözümü tabloda ekran için farklı her türlü seçenekler sunmaktadır.

fgmode-switch

Mobil düzende seçilen sütun adına göre sıralama gerçekleştirmektedir.

Github: https://github.com/filamentgroup/tablesaw

6. TablePress – WordPress

respt6-d

Mobil görünüm de başlık sütunu kilitlidir.

Masaüstü düzeninde yatay bir şekilde duran tablo mobil düzene geçtiğinde üstarafda bulunan başlık sütununu sol tarafa dikey sıralayıp kilitler.

Tablonun Demosu İçin Tıklayın: tablepress.org/demo/
Mobil Uyulu Uzatma: tablepress.org/extensions/responsive-tables/

7. ng Mobil Uyumlu Tablo

respt7-d

Mobilde veri dikey sunulmaktadır.

Yatay pozisyonda duran tablonuz mobilde geçince dikey bir pozisyon alacaktır.

Makale: netgenlabs.com/Blog/Responsive-Data-Tables-with-ngResponsiveTables-jQuery-plugin
Demo: http://netgen.github.io/jquery.ngResponsiveTables/

8. Codepen (Charlie Cathcart)

Bu örnek öncekiler gibi ancak herhangi bir JavaScript olmadan kayıt yapmak için CSS i kullanır.

Demo: http://codepen.io/pixelchar/pen/rfuqK

9. Codepen (Dudley Story)

Bu veriler tablo hücrelerine niteliklerini oluşturmak için kısa (non-jQuery) Javascript kullanır. Sonra CSS medya sorgu kullanan bir mobil ekran biçimlendirmek için özelliklerini alır.