Selasa, 30 Januari 2007

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.

CSS Grid

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 .... !

=

8 komentar:

  1. 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?

    BalasHapus
  2. 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 ?

    BalasHapus
  3. 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?

    BalasHapus
  4. #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.

    BalasHapus
  5. mas kok sulit kali tutorialnya

    BalasHapus
  6. makasih tuk semuanya mas..............

    BalasHapus
  7. Cara menggunakannya gimana mas ..? Kasih satu cintoh dong, saya masih pemula banget nich ..

    Thanks

    BalasHapus

Artikel mungkin sudah tidak up to date, karena perkembangan jaman. Lihat tanggal posting sebelum berkomentar. Komentar pada artikel yg usianya diatas satu tahun tidak kami tanggapi lagi. Terimakasih :)