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.

Header 1  
Header 2  
Header 3  






Kolom 1  
Kolom 2  
Kolom 3  






Kolom 1  
Kolom 2  
Kolom 3  






Kolom 1  
Kolom 2  
Kolom 3  

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

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.