Membuat table multicolumn dengan div dan css

May
07

Membuat table multicolumn dengan div dan css

Internet, Webdesign, htmlEntry Feed Trackback

Perlahan namun pasti, penggunaan tag table dalam sebuah website sudah mulai ditinggalkan baik itu dalam membuat layout maupun kontent website itu sendiri. Bahkan pembuatan layout tanpa table sudah sangat lumrah kita jumpai dan menjadi suatu keharusan saat dengan alasan file size menjadi lebih kecil dan tentu saja mempengaruhi waktu load. Apalagi dengan diluncurkannya standard Blueprint CSS Framework oleh google code yang jelas membantu para web designer untuk membuat multicolumn div, div column span dan masih banyak lagi yang dulunya hanya bisa dilakukan jika menggunakan tabel. Namun yang akan aku bahas adalah membuat table untuk isi website menggunakan div. (Untuk membuat tableless layout, lihat referensi di akhir post ini)

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

Jangan Lupa Bookmark Yah...

Hide Sites

12 Comments So Far

kalau salah satu kolomnya ada yg di merge cell nya gmana bro ngakalinnya ?

misal kolom 2 di merge ama kolom 3 tapi cuma di baris ke 2…ngerti kan ?

klau table yg di atas kan table umum

mohon penjelasan suhu…

[Reply]
namakamu reply on May 7th, 2008:
Bisa aja, itu namanya colspan.
Kita ambil contoh baris pertama, colom ke satu dan kedua mau di merge (span).
aslinya:

<div class=“baris”> <div class=“kolom”>1</div> <div class=“kolom”>2</div>

dirubah menjadi:

<div class=“baris”> <div class=“kolomspan”>1</div>

kolom2 harus dihapus, karena kita anggap sudah merged dengan kolom 1

di cssnya kita tambahkan..

.kolomspan { width: 24.4px; /* jumlah width kol 1 dengan kol 2 */ float:left }

[Reply]

gerald at May 7, 08 at 3:52 pm
What the hell about DIV CSS
i dont understand what are you talking about ….

Great Tutorial Bro

i Love you

[Reply]
namakamu reply on May 7th, 2008:

[Reply]
chika-mela-santi.3gp reply on May 7th, 2008:
i love you to

wakakakakak

[Reply]
potoseleb reply on May 9th, 2008:
me too

wakakaka

[Reply]

Girls Photo at May 7, 08 at 5:53 pm
wah lengkap tutorialnya… thanks brooo

[Reply]

ario dipoyono at May 8, 08 at 4:03 pm
Kayaknya malah lebih banyak tag nya deh, alasan menggunakan div sbg pengganti layout table ditujukan untuk mengurangi jumlah tag, sehingga diharapkan dokumen di donlot bisa lbh cepat.

kayak gitu deh, maaf klo salah he he

[Reply]
namakamu reply on May 9th, 2008:
haha.. untuk contoh ini mungkin ya.., tapi kan masih div, gak ada table, tr, td.
tapi entarnya kalau ada yang table di dalam table gitu pasti lebih enak pake div kan

eh, link segera dipasang, tengkyu.

[Reply]
bimoweb.com reply on May 10th, 2008:
sudah saya pasang bos, silahkan di cek di blogrollnya
nama link nya blog situs kamu

btw tolong label situsku diganti jadi
bimoweb[dot]com

he he tenkyu bos

[Reply]

bimoweb.com at May 8, 08 at 6:46 pm
waw infonya keren nih, mau coba ah

[Reply]
namakamu reply on June 11th, 2008:
hehe

[Reply]

gopaan at Jun 6, 08 at 8:06 pm