Tablosuz Tablo Tasarımı (Divli) – Tableless Table Design

Perşembe, Mart 7, 2013 2 , , , , , Permalink

Günümüzün yeniliklerini kullanırken hala eski eski tablo tasarımı kullanan yerler görünce içiniz acıyor ve düzeltmeye kalkıyor musunuz? Özellikle bir işe girdiniz ve eski sistem tablo (table) kullanan sayfalar gördüğünüz ve ilk iş onları div’e mi çevirmek gerektiğini düşünüyorsunuz ama tablo (table) yapısının divle yapmakla zorlanıyorsanız işte size yardımcı olabilecek bir yazı;

 

Öncelikle örnek olarak tablo (table) ve Css ile yapılmış dizayn kod örneğini ve sonucu şöyle oluyor;

CSS and TABLE

Header 1Header 2Header 3Header 4
line 1 column 1line 1 column 2line 1 column 3line 2 column 4
line 2 column 1line 2 column 2line 2 column 3line 2 column 4
line 3 column 1line 3 column 2line 3 column 3 (more content)line 3 column 4

Üstteki görünümün aynısını Div yapısında tutturmanın zordur. Size bir kolaylık yapıp bunu sizinle paylaşıyorum.

Div ile Tablo Tasarımı

Öncelikle htmlimiz;

<div id="tablecontainer">
<div class="tablecontainerrow">
<div class="column1">Header 1</div>
<div class="column2">Header 2</div>
<div class="column3">Header 3</div>
<div class="column4">Header 4</div>
<div class="clear" />
</div>
<div class="tablecontainerrow">
<div class="column1">line 1 column 1</div>
<div class="column2">line 1 column 2</div>
<div class="column3">line 1 column 3</div>
<div class="column4">line 1 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 2 column 1</div>
<div class="column2">line 2 column 2</div>
<div class="column3">line 2 column 3</div>
<div class="column4">line 2 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 3 column 1</div>
<div class="column2">line 3 column 2</div>
<div class="column3">line 3 column 3 (more content)</div>
<div class="column4">line 3 column 4</div>
</div>
</div>

Htmlimizi bu şekilde ayarladıktan sonra CSS dosyamıza aşağıdaki kodları yapıştırmak yeterli olacaktır.

div#tablecontainer{width:334px;border-bottom:#000 1px solid;}
div.tablecontainerrow{clear:both;overflow:hidden;border-top:#000 1px solid;}
div.column1 {border-left:1px solid #000;}
div.column1, div.column2, div.column3, div.column4 {height: 27px;line-height: 28px;padding-top: 4px; float: left;border-right:#000 1px solid; }
div#tablecontainer div div.column1{width:62px;float:left}
div#tablecontainer div div.column2{width:103px;float:left}
div#tablecontainer div div.column3{width:61px;float:left}
div#tablecontainer div div.column4{width:103px;float:left}

Umarım yararlı bir bilgi olmuştur. Çok basit ve uygulaması kolaydır.

Tablo kullanmayın kullandırmayın -Email templateleri hariç- 🙂

 

DEMO

2 Yorum var

Cevapla

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir