.
Beralih ke table dalam kontent website, sebenarnya ada toolsnya yakni “table2css converter” yang bisa langsung mengkonvert table menjadi div hanya dengan beberapa klik. Namun sayangnya tool ini hanya bisa membuat tabel statik dengan ukuran-ukuran absolut. Bagaimana jika table tersebut merupakan table dinamis, multicolumn, multirow seperti daftar harga barang, statistik atau member, dimana data diambil secara loop dari database?
.
Berikut contoh membuat tabel div yang mempunyai 8 kolom (columns) dan 2 baris (rows).
.
Pertama, buat kontainer yang bertidak sebagai <table> </table>.
<div class="kontainer"></div>
Properti css nya adalah:
.kontainer { width:100%; /* penuh layar atau fluid/flexible, gunakan ukuran px untuk fixed width */ margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/ /* bertindak seperti <table align="center">*/ border: 1px solid #000 /* border, opsional */ }
Kedua, tambahkan row/baris di dalam div kontainer tadi, yang bertindak sebagai <tr></tr>.
<div class="kontainer"> <div class="baris"></div> </div>
Properti cssnya:
.baris { width: 100% /* harus 100% supaya penuh ke area table */ }
Ketiga, tambahkan beberapa kolom (contoh ini 8 kolom) diantara div baris tadi, yang bertindak sebagai <td></td>.
<div class="kontainer"> <div class="baris"> <div class="kolom">1</div> <div class="kolom">2</div> <div class="kolom">3</div> <div class="kolom">4</div> <div class="kolom">5</div> <div class="kolom">6</div> <div class="kolom">7</div> <div class="kolom">8</div> </div> <div style="clear: both;" /> <!-- tambahkan ini, supaya div kontainer melingkupi semua div yang ada di dalamnya --> </div>
Properti css nya:
.kolom { width: 12.2%; /* pembagian 100% dengan 8 kolom, seharusnya 12.5%, */ /* diberikan kompensasi seperlunya karena penggunaan margin,*/ /* padding maupun border nantinya akan mempengaruhi lebar kolom */ float: left; /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */ }
.
Berikut screenshot hasil sementara:
.
.
Untuk menambahkan baris lainnya, baris kedua, ketiga dan seterusnya, cukup ulangi div baris beserta div kolom sebanyak baris yang diperlukan. Berikut contoh setelah diatambahkan baris (baris ke 2):
<div class="kontainer"> <div class="baris"> <div class="kolom">1</div> <div class="kolom">2</div> <div class="kolom">3</div> <div class="kolom">4</div> <div class="kolom">5</div> <div class="kolom">6</div> <div class="kolom">7</div> <div class="kolom">8</div> </div> <div class="baris"> <!-- baris ke dua --> <div class="kolom">1</div> <div class="kolom">2</div> <div class="kolom">3</div> <div class="kolom">4</div> <div class="kolom">5</div> <div class="kolom">6</div> <div class="kolom">7</div> <div class="kolom">8</div> </div> <div style="clear: both;" /> <!-- jangan lupa untuk selalu menempatkan tag ini sebelum penutup div kontainer --> </div>
.
Kode lengkapnya adalah:
.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Contoh Table menggunakan div</title> <style type="text/css"> .kontainer { width:100%; /* penuh layar atau fluid/flexible, gunakan ukuran px untuk fixed width */ margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/ /* bertindak seperti <table align="center">*/ border: 1px solid #000 /* border, opsional */ } .baris { width: 100% /* harus 100% supaya penuh ke area table */ } .kolom { width: 12.2%; /* pembagian 100% dengan 8 kolom, seharusnya 12.5%, */ /* diberikan kompensasi seperlunya karena penggunaan margin,*/ /* padding maupun border nantinya akan mempengaruhi lebar kolom */ float: left; /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */ } </style> </head><body> <div class=“kontainer”> <div class=“baris”> <div class=“kolom”>1</div> <div class=“kolom”>2</div> <div class=“kolom”>3</div> <div class=“kolom”>4</div> <div class=“kolom”>5</div> <div class=“kolom”>6</div> <div class=“kolom”>7</div> <div class=“kolom”>8</div> </div> <div class=“baris”> <!– baris ke dua –> <div class=“kolom”>1</div> <div class=“kolom”>2</div> <div class=“kolom”>3</div> <div class=“kolom”>4</div> <div class=“kolom”>5</div> <div class=“kolom”>6</div> <div class=“kolom”>7</div> <div class=“kolom”>8</div> </div> <div style=“clear: both;” /> <!– jangan lupa untuk selalu menempatkan tag ini sebelum penutup div kontainer –> </div> </body> </html>
.
Sesuaikan style tambahan seperti warna background, border, text dan sabagainya. Selanjutnya, untuk pengisian data bisa menggunakan parameter-parameter php sesuai dengan kebutuhan.
.
Dalam contoh ini sengaja menggunakan atribut class bukan id dalam mengidentifikasi css properties karena sesuai dengan standard W3C bahwa id adalah harus unik untuk menamai suatu elemen dalam sebuah halaman web.
.
Demo: Klik di sini
Download: Klik di sini
.
Sementara untuk tutorial membuat layout menggunakan css lihat referensi ini:
http://kusaeni.com/blog/blueprint-css
http://bimoweb.com/layout-web-tanpa-tabel-untuk-ajax.html
Komentar (7)
Arsip Statis