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.
