7 Style Tabel Modifikasi CSS3 Untuk Blogger

Tabel blog pada dasarnya adalah sebuah element pada blog yang mempunyai petak-petak atau column dan row dengan garis yang mengelilinginya. Penggunaan tabel sudah sangat lumrah dan tidak jarang digunakan oleh para blogger untuk kepentingan tertentu.

Mungkin anda pernah menemukan sebuah blog dengan tabel yang mempunyai tampilan  yang dikombinasikan dengan berbagai variasi warna baik itu warna background, garis (border) dan penggabungan beberapa cell sehingga tampilannya terlihat sangat mencolok. Sebetulnya, tabel seperti itu adalah tabel hasil modifikasi dengan cara menambahkan kode CSS kedalam template dan jika tidak menggunakan tambahan CSS, maka tampilannya akan terlihat sangat sederhana.

Sebelum mendesain tampilan tabel, ada baiknya jika anda membaca Panduan Lengkap Membuat & Mengatur Tabel Pada Blog, karena artikel tersebut akan menjadi referensi anda untuk pembuatan dan modifikasi tabel blog.

Well, sebelum lanjut saya ingin memberikan sebuah kerangkan tabel komplit dengan pembagian-pembagian seperti Judul, Header, Column dan Row dalam satu kesatuan seperti yang bisa anda lihat dibawah ini :

<table border="1">
   <caption>TITLE</caption>
<tbody>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
    <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
    <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</tbody>
</table>

Kerangka table diatas, jika ditampilkan tanpa ada tambahan CSS yang mengatur tampilannya, maka akan terlihat seperti gambar di bawah ini.

Nah, jika ingin memberikan sedikit sentuhan agar tampilan table diatas menjadi lebih baik dan lebih mencolok, sebaiknya anda menambahkan kode CSS kedalam template dan dibawah ini ada 7 style tabel yang sudah siap pakai (Pure CSS3), lengkap dengan demo by image sehingga memudahkan anda untuk memilih sesuai selera.

CSS Tabel dan Cara Menempatkannya Didalam Template

Pilih salah satu kode CSS tabel yang akan saya berikan sebentar, kemudian copy kode tersebut dan pastekan tepat berada di atas tag ]]></b:skin>.

1. Hitam Biru Style - CSS

table[border="1"] {border-collapse:collapse;}
table[border="1"] caption {font:normal normal 11px Arial,Sans-Serif;color:#fff;background-color:#333;}
table[border="1"] tr {background:#fafafa;}
table[border="1"] caption {background:#000;vertical-align:top; padding:5px 10px; border:1px solid #bbb;color:#fff}
table[border="1"] th, table [border="1"] td {vertical-align:top; padding:5px 10px; border:1px solid #bbb;}
table[border="1"] tr:nth-child(even) {background:#f5f5f5;}
table[border="1"] th {background:#418AA4;color:#fff;font-weight:bold;}

2. Black Style - CSS

table[border="1"] {border-collapse:collapse;font:normal normal 11px Arial,Sans-Serif;color:#ccc;-webkit-box-shadow:0 1px 3px black;-moz-box-shadow:0 1px 3px black;box-shadow:0 1px 3px black;}
table[border="1"] caption {font:normal normal 11px Arial,Sans-Serif;color:#fff;background-color:#333;}
table[border="1"] tr {background-color:#222;}
table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:1px solid #3c3c3c;}
table[border="1"] td:nth-child(even) {background-color:#1c1c1c;}
table[border="1"] th {background-color:#555;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666',endColorstr='#555');background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#555));background-image:-webkit-linear-gradient(top,#666,#555);background-image:-moz-linear-gradient(top,#666,#555);background-image:-ms-linear-gradient(top,#666,#555);background-image:-o-linear-gradient(top,#666,#555);background-image:linear-gradient(top,#666,#555);color:black;font-size:12px;text-shadow:0 1px 0 rgba(255,255,255,.4);font-weight:bold;}

3. Grey Dark Style - CSS

table[border="1"] {color: #333;font-family: Helvetica, Arial, sans-serif;border-collapse:collapse; border-spacing: 0;}
table[border="1"] caption {height: 30px;color:#fff;background-color:#555;}
table[border="1"] td, th {border: 1px solid transparent;height: 30px;transition: all 0.3s;}
table[border="1"] th {background: #DFDFDF;font-weight: bold;}
table[border="1"] td {background: #FAFAFA;text-align: center;}
table[border="1"] tr:nth-child(even) td { background: #F1F1F1;}
table[border="1"] tr:nth-child(odd) td { background: #FEFEFE; }
table[border="1"] tr td:hover { background: #666; color: #FFF; }

4. Dark Green Style - 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"] td:nth-child(odd) {background:#DEDEDE;}
table[border="1"] th, table[border="1"] caption  {background:#4A6D67;color:#fff;font-weight:bold;}

5. Red Vs Gray Style - CSS

table[border="1"]{border-collapse:collapse;margin:0px;}
table[border="1"],table[border="1"] th, table[border="1"] td{border:1px solid #ccc;padding:2px 7px;}
table[border="1"] caption {font:normal normal 11px Tahoma,Sans-Serif;color:#fff;background-color:#800000;}
td{vertical-align:top;}
table[border="1"] th{background-color:#fafafa;text-align:left;}

6. Shadow Style - CSS

table[border="1"] caption {font:normal normal 11px Tahoma,Sans-Serif;color:#fff;background-color:#C2B084;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);-moz-box-shadow:0 1px 3px rgba(0,0,0,.5);box-shadow:0 1px 3px rgba(0,0,0,.5);}
table[border="1"] {border-collapse:collapse;font:normal normal 11px Verdana,Arial,Sans-Serif;color:#666;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);-moz-box-shadow:0 1px 3px rgba(0,0,0,.5);box-shadow:0 1px 3px rgba(0,0,0,.5);}
table[border="1"] tr {background-color:#fafafa;}
table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:1px solid white;}
table[border="1"] tr:nth-child(even) {background-color:#f5f5f5;}
table[border="1"] th {background-color:#ECE9D8;color:#ACA899;font-weight:bold;}

7. Blogger Style - CSS

table[border="1"] {border-collapse:collapse;font:normal normal 11px Trebuchet,"Trebuchet MS",Arial,Sans-Serif;color:#3366CC;}
table[border="1"] tr {background:#E1D4C1;}
table[border="1"] th, table[border="1"] caption, table[border="1"] td {vertical-align:top;padding:5px 15px;border:1px solid #fff;}
table[border="1"] td:nth-child(odd) {background:#F5EDE3;}
table[border="1"] th {background:#104386;color:#99CCFF;font-weight:bold;}

CSS diatas bisa anda modifikasi kembali sehingga menghasilkan tampilan yang lebih sempurna lagi serta sesuai dengan apa yang anda harapkan. Semoga bermanfaat dan terima kasih!