Modifikasi Tampilan Tabel Dengan Css Tabel

Situseo Blog : Dengan menambahkan css tabel pada template atau pada postingan akan membuat tampilan tabel menjadi lebih menarik dan cantik pada segi tampilan warna, bentuk dan teks-nya, tampilan standar tabel hanya menampilkan bentuk baris dan kolom serta ditambah pembatas seperti garis, pada dasarnya css tabel tetap mengacu pada tampilan tabel standar, tapi dengan penambahan css tabel akan memberi tampilan yang berbeda dan lebih bagus tentunya.

Demo

Sebelumnya pernah saya postkan mengenai cara membuat sebuah tabel, tampilan tabel pada postingan tersebut akan menghasilkan tabel seperti yang dijelaskan pada postingan tersebut, berbeda dengan tampilan tabel seperti yang terlihat pada demo (jika kalian melihatnya), dengan menambahkan css tabel akan menghasilkan tampilan tabel yang seperti dalam demo, untuk membentuk tampilan seperti dalam demo, kalian bisa menambahkan kode css tabel dibawah ini dan letakan diatas kode ]]</b:skin>

table[border="1"] {
border-collapse:collapse;
font:normal 12px Verdana,Arial,Sans-Serif;
color:#333;
}
table[border="1"] tr {
background:#F0F0F0;
}
table[border="1"] th, table[border="1"] td {
vertical-align:top;
padding:5px 10px;
border:2px solid #fff;
}
table[border="1"] tr:nth-child(even) {
background:#DEDEDE;
}
table[border="1"] th {
background:#4A6D67;
border-radius: 10px 10px 0px 0px; 
-moz-border-radius: 10px 10px 0px 0px; 
-webkit-border-radius: 10px 10px 0px 0px;
color:#fff;
font-weight:bold;
}

Atau bisa juga css tabel tersebut disatukan penempatannya dengan kode tabel pada postingan dengan menambahkan kode :

<style type="text/css">
...css tabel
</style>

Coba kalian perhatikan warna pada isi tabel pada demo dan warna isi tabel pada contoh dibawah ini :

Kepala 1	Kepala 2	Kepala 3
Baris1 - Kolom1	Baris1 - kolom2	Baris1 - Kolom3
Baris2 - Kolom1	Baris2 - kolom2	Baris2 - Kolom3
Baris3 - Kolom1	Baris3 - kolom2	Baris3 - Kolom3
Baris4 - Kolom1	Baris4 - kolom2	Baris4 - Kolom3

Perbedaan yang terlihat adalah warna pada isi tebel (bukan kepala) pada demo adalah baris pertama mempunyai warna yang lebih tua dibandingan warna dibawahnya dan seterusnya secara horizontal, berbeda dengan contoh diatas perbedaan warna isi tabel secara vertical, untuk membuat tampilan warna isi tabel berbeda secara vertical, kode css-nya seperti ini :

table[border="1"] {
border-collapse:collapse;
font:normal 12px Verdana,Arial,Sans-Serif;
color:#333;
}
table[border="1"] tr {
background:#F0F0F0;
}
table[border="1"] th, table[border="1"] td {
vertical-align:top;
padding:5px 10px;
border:2px solid #fff;
}
table[border="1"] td:nth-child(odd) {
background:#DEDEDE;
}
table[border="1"] th {
background:#4A6D67;
border-radius: 10px 10px 0px 0px; 
-moz-border-radius: 10px 10px 0px 0px; 
-webkit-border-radius: 10px 10px 0px 0px;
color:#fff;
font-weight:bold;
}

Kalian bisa menemukan perbedaan dari kedua contoh kode css tabel tersebut diatas, untuk memodifikasi tampilan tabel lebih sesuai dengan keinginan, kalian bisa modifikasi pada bagian css-nya dengan tambahan kode css yang sesuai tentunya.

Sedangkan untuk kode tabel standar yang saya pergunakan untuk contoh diatas adalah seperti berikut :

<table border="1" style="width: 400px;"><tbody>
<tr><th>Kepala 1</th><th>Kepala 2</th><th>Kepala 3</th></tr>
<tr><td>Baris1 - Kolom1</td><td>Baris1 - kolom2</td><td>Baris1 - Kolom3</td></tr>
<tr><td>Baris2 - Kolom1</td><td>Baris2 - kolom2</td><td>Baris2 - Kolom3</td></tr>
<tr><td>Baris3 - Kolom1</td><td>Baris3 - kolom2</td><td>Baris3 - Kolom3</td></tr>
<tr><td>Baris4 - Kolom1</td><td>Baris4 - kolom2</td><td>Baris4 - Kolom3</td></tr>
</tbody> </table>

untuk lebih jelas mengenai cara pembuatan tabel, kalian bisa membaca caranya pada post "Cara Membuat Tabel" link aktif ada pada alenia 2.

Semoga bermanfaat,