Memberi Style Pada Tabel

Dahulu, sebelum CSS sepopuler sekarang, untuk membuat style pada tabel seorang web desainer harus benar-benar jeli untuk memanfaatkan properties tabel pada tag HTML. Properties seperti cellpadding, cellspacing, backgroundcolor, diutak-utik agar bisa menampilkan data dengan bagus.

Sebagai contoh untuk menampilkan data dalam kolom-kolom table, defaultnya kita menggunakan border=1. Namun karena hasilnya tidak bisa disebut sedap dipandang mata, kemudian desainer mengakalinya dengan memberi warna hitam atau gray pada backgroud table dan memberi background warna putih pada kolom (tr).


Sekarang dengan CSS, table dapat kita bentuk untuk menyajikan list data dengan sangat indah.



Contoh pertama adalah style table dengan garis di sekeliling cell (gambar 1)
[code='css']
/*
border-collapse digunakan untuk membuang jarak antar cell, dan mengeliminasi border dobel yang diakibatkan sintak "border: 1px solid #999;" pada cell

*/

table.grid1{
font: 12px Arial;
border-collapse: collapse;
}

table.grid1 th, table.grid1 td{
border: 1px solid #999;
padding-left: 10px;
text-align:left;
}

table.grid1 th{
background: #F0F0F0;
}

/*
memberi warna kuning jika sebuah row disentuh, tapi sayang pada IE5 hover hanya bisa berfungsi pada sintak link (a). Jika ingin berfungsi disemua browser, harus diganti dengan sintak javascript

*/

table.grid1 tr:hover{
background: #FFFFCC;
}

[/code]

Contoh kedua, garis hanya diletakkan di bawah baris saja (gambar 2). Biasanya saya lebih menyukai yang seperti ini.

[code='css']
table.grid2{
font: 12px arial;
margin: 0;
border-collapse:collapse;
}

table.grid2 th{
background: #F0F0F0;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
text-align:left;
padding-left:10px;
}

table.grid2 td{
padding-left:10px;
border-bottom: 1px solid #ccc;
}

table.grid2 tr:hover{
background: #FFFFCC;
}

[/code]

Selamat mencoba .... !

=