HTML - Membuat table dengan span ( tableless design)

Ketika membaca sebuah cerita tentang test seorang web programmer dengan sebuah perusahaan saya melihat salah satu test yang dilakukan adalah membuat design web tanpa menggunakan tabel atau istilahnya tableless.
Melihat ini saya tertantang untuk mencoba melakukannya, berikut contoh kode yang saya bikin, CMIIW.
Metode ini bisa diakalin dengan penggunaan tag span atau div yang diatur dengan css sehingga tampilannya lebih bagus.

<div id="table">
<div class="header">
<span class="kolom satu">Header 1</span>
<span class="kolom dua">Header 2</span>
<span class="kolom tiga">Header 3</span>
</div>
<div class="baris">
<span class="kolom satu">Kolom 1</span>
<span class="kolom dua">Kolom 2</span>
<span class="kolom tiga">Kolom 3</span>
</div>
<div class="baris">
<span class="kolom satu">Kolom 1</span>
<span class="kolom dua">Kolom 2</span>
<span class="kolom tiga">Kolom 3</span>
</div>
<div class="baris">
<span class="kolom satu">Kolom 1</span>
<span class="kolom dua">Kolom 2</span>
<span class="kolom tiga">Kolom 3</span>
</div>
</div>

Kode diatas adalah kode html yang nantinya disisipkan pada tag body, kemudian kita tambahkan kode css untuk mepercantik tampilannya.

<style type="text/css" media="screen">
#table{width:350px;}
div span{display:inline-block;}
div .header{background:#95AABC;font-weight:bold;}
.kolom{width:90px;padding:2px;margin:2px;}
.baris{border-bottom:1px solid #000;cursor:pointer;}
.baris:hover{background:#fff59f;}
.ganjil{background:#ddd;}
.genap{backgound:#eee;}
</style>

Begini kira-kira tampilannya (gambar)

Header 1Header 2Header 3

Baris 1, Kolom 1Baris 1, Kolom 2Baris 1, Kolom 3

Baris 2, Kolom 1Baris 2, Kolom 2Baris 2, Kolom 3

Baris 3, Kolom 1Baris 3, Kolom 2Baris 3, Kolom 3

Dengan ditambahkan property :hover maka tabel jadi lebih hidup,,
Untuk lebih bagus bisa juga ditambahkan zebra style untuk tabelnya dimana setiap baris memiliki warna yang beda dengan yang diatas atau dibawahnya..
Ini contoh yang saya kembangkan sendiri, menambahkan zebra style dan sebuah checkbox pada masing-masing baris, untuk zebra style menggunakan javascript agar lebih atraktif.

Tulis Komentar dengan akun Facebook Anda.