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)
/*
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;
}
Contoh kedua, garis hanya diletakkan di bawah baris saja (gambar 2). Biasanya saya lebih menyukai yang seperti ini.
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;
}
Selamat mencoba …. !
achedy. Lahir di Trenggalek,
adalah seorang programmer web dan bapak dari dua orang anak. Tinggal
di Surabaya sejak tahun 1996. Menulis adalah hobinya sejak kuliah. Blog
ini hanyalah opini pribadi yang tidak terkait dengan perusahaan,
partai, asosiasi, dan forum tempat blogger beraktifitas. Bisa dihubungi
melalui email achedy_at_penamedia.com 
8 Comments, Comment or Ping
1. lilamr
mas, kalau misalnya kita punya halaman kosong…
terus kita mau nempatin 1 gambar di tengah-tengah halaman (misalnya tombol enter)
nah, kalo ngatur yang seperti ini pake css gimana ya?
Feb 21st, 2007
2. achedy
Yang dimaksud tengah adalah tengah pada koordinat horisontal dan tengah pada koordinat vertikal. Yang saya ketahui saat ini, untuk #1 Membuat center pada koordinat horisontal adalah dengan
.tengah{text-align:center}Namun untuk yang vertikal saya belum menemukannya selain membuat margin pada bagian atas. Namun kendalanya perubahan resolusi akan berpengaruh terhadap posisinya.
Ada yang tahu ?
Feb 22nd, 2007
3. lilamr
Ok..
makasih mas.
Feb 22nd, 2007
4. lilamr
kalo misalnya pake margin nya satuan % bisa gak ya?
margin-right: 50%
margin-left:50%
margin-top: 50%
margin-bottom:50%
btw, emang margin bisa pake satuan % ya?
Feb 22nd, 2007
5. achedy
#4 Sebenarnya bisa, tapi kalau kita implementasikan yang center hanya horisontalnya saja. Akan terjadi scrol pada sisi vertikal. Kelihatannya % untuk horisontalnya tetap dihitung dari resolusi vertikalnya.
Feb 22nd, 2007
6. nasbi
mas kok sulit kali tutorialnya
Aug 1st, 2008
7. peman
makasih tuk semuanya mas…………..
Sep 22nd, 2008
8. isoke
Cara menggunakannya gimana mas ..? Kasih satu cintoh dong, saya masih pemula banget nich ..
Thanks
Dec 6th, 2008
Reply to “Memberi Style Pada Tabel”