Modifikasi Tampilan Tabel Dengan Css Tabel

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.

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>

sehingga menjadi seperti berikut

 <style type="text/css">
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;
}
</style>
<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>

Contoh hasilnya sebagai berikut

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

Semoga bermanfaat

Sumber : http://situseo.blogspot.com