Cara membuat tabel blogger dengan CSS sederhana

Cara membuat tabel HTML sederhana menggunakan CSS pada postingan blog. Membuat tabel pada blog untuk banyak kebutuhan, sebagai contoh pada blog yang memposting seputar gadget maka tabel ini dibutuhkan untuk membuat rincian spesifikasi pada sebuah gadget. Atau pada blog yang memposting seputar resep masakan maka tabel ini digunakan untuk daftar resep dari masakan yang akan di buat.

Selain dua contoh yang saya sebutkan di atas, sebenarnya banyak sekali alasan kenapa kita butuh membuat tabel tersebut. Dan pada kesempatan kali ini saya akan membagikan tutorial cara membuat tabel sederhana dengan menggunakan CSS. Dan tentunya tidak perlu mengedit template, CSS sendiri adalah kumpulan Skrip untuk membentuk struktur HTML itulah yang saya tahu ( koreksi jika saya salah ).

Sebagai contoh seperti pada dua tabel berikut.

Tabel pertama tampilannya seperti ini, tabel ini terlihat biasa saja karena menggunakan skrip HTML standar.

1. TABEL TANPA CSS
TD2	TD2	TD2
TD3	TD3	TD3
TD4	TD4	TD4
TD5	TD5	TD5
TD6	TD6	TD6

Tabel tersebut menggunakan rangkaian skrip seperti berikut.

HTML

<table border="1" style="width: 100%;">
<tbody>
<tr><td colspan="3">1. TABEL TANPA CSS</td></tr>
<tr><td>TD2</td><td>TD2</td><td>TD2</td></tr>
<tr><td>TD3</td><td>TD3</td><td>TD3</td></tr>
<tr><td>TD4</td><td>TD4</td><td>TD4</td></tr>
<tr><td>TD5</td><td>TD5</td><td>TD5</td></tr>
<tr><td>TD6</td><td>TD6</td><td>TD6</td></tr>
</tbody></table>

Kemudian tabel yang kedua adalah tabel menggunakan CSS dan tampilannya seperti ini.

2. TABLE MENGGUNAKAN CSS
TD2	TD2	TD2
TD3	TD3	TD3
TD4	TD4	TD4
TD5	TD5	TD5
TD6	TD6	TD6

Dan tabel di atas menggunakan skrip HTML yang di tambah CSS seperti berikut.

HTML

<table border="1" class="table">
<tbody>
<tr><td class="th" colspan="3">2. TABLE MENGGUNAKAN CSS </td></tr>
<tr><td>TD2</td><td>TD2</td><td>TD2</td></tr>
<tr><td>TD3</td><td>TD3</td><td>TD3</td></tr>
<tr><td>TD4</td><td>TD4</td><td>TD4</td></tr>
<tr><td>TD5</td><td>TD5</td><td>TD5</td></tr>
<tr><td>TD6</td><td>TD6</td><td>TD6</td></tr>
</tbody></table>

CSS

<style type="text/css">
.table {
  border-collapse: separate;
  width: 100%;
  border: px solid #999999;
  border-radius: 6px;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  box-shadow: 0px 0px 10px 2px #999;
}
.th {
  text-align: center;
  background: green;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 3px #000;
}
td {
  border: px solid #888;
  background: white;
  padding: 0 0 0 10px;
}
tr:first-child td:first-child { border-top-left-radius: 5px; }
tr:first-child td:last-child { border-top-right-radius: 5px; }
tr:last-child td:first-child { border-bottom-left-radius: 5px; }
tr:last-child td:last-child { border-bottom-right-radius: 5px; }
</style>

Untuk penempatan skrip CSS tersebut kamu bisa menyimpannya tepat di atas kode HTML atau meletakkannya secara terpisah.

Jika ingin menerapkannya secara langsung pada postingan, kamu tinggal membuat sebuah postingan baru kemudian gunakan mode HTML untuk menulis skrip tersebut atau copy skrip CSS dan HTML di atas kemudian tempelkan pada postingan yang akan kamu buat, contohnya seperti gambar berikut.

 Gambar oleh : Dark Cloud 

Atau jika ingin menempatkan CSS secara terpisah, kamu bisa menempatkan CSS pada widget yang ada di dashboard blogger caranya pada dashboard kamu pilih opsi Tata letak seperti gambar berikut.

Kemudian tambahkan gadget terserah mau disimpan pada sidebar atau lokasi lainnya.

Selanjutnya pilih HTML/JavaScript lalu klik icon plus yang berada tepat di sampingnya.

Kemudian kamu tempelkan skrip CSS tersebut pada kolom yang tersedia, kalau untuk judul kamu boleh isi boleh tidak , kemudian kamu klik simpan.

Dengan begitu jika kamu ingin menambahkan tabel pada setiap postingan, kamu hanya tinggal menempelkan kode skrip HTML nya saja tanpa menyertakan skrip kode CSS nya.

Kamu juga bisa menambahkan skrip CSS tersebut pada template yang kamu gunakan caranya kamu hapus dulu kode <style type="text/css"> dan </style> yang ada dibagikan paling atas dan paling bawah pada skrip, kemudian buka opsi tema/template pada dashboard lalu pilih edit HTML dan tempelkan CSS tersebut tepat di atas kode ]]></b:skin> atau </style>

Demikian artikel saya kali ini, mudah-mudahan pembahasan di atas dapat dipahami dengan baik dan semoga artikel ini dapat memberikan manfaat bagi kalian.