Make Up Tabel Dengan Css

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

Untuk membentuk tampilan seperti dalam demo di atas, 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>

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>

Oleh : Situseo