Cara Membuat Table 4 Kolom dengan CSS

Tutorial kali ini ane mo bagi tips cara membuat table 4 kolom dengan CSS, tips ini ane dapat dari Japarus terus ane coba untuk repost tapi tetap dengan mencamtumkan sumbernya karena tutorial ini bukan ane sendiri yang buat.

Ok langsung saja, untuk membuat table 4 kolom ini caranya cukup mudah :
1. Yang pasti loggin dulu ke Blogger sobat
2. Klik tab Template lalu Edit Template HTML
3. Centang pada Expand Widget Templates, lalu cari kode ]]></b:skin>
4. Kalau sudah ketemu, copy lalu pastekan kode berikut tepat diatas kode ]]></b:skin>

.isiboks {
background-color:#ccc;
font-family:comic sans ms;
font-size:12px;
color:#3d010a;
padding:5px;
width:200px;
}
.isiboks:hover{
background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-Hq8ek8Sr4N5fQgHH9jQo_wH_1AJ1xouNdNn-hMAMpQPNJuWGlOsvEt_XNqzo7SRmBz3Mbx68nsMnHFNEAv4iFX7Ur6uoHoHaWyRF7rk3082sojfzQAgDGG5ym2Y7Pg0u0b4Tk0XAaY/s400/bgsGR_bgTablesilver.jpg);
}
.isiboks a{
font-family:tahoma;
font-weight:bold;
color: #003366;
text-decoration:none;
}
.isiboks a:hover{
color:#FF00FF;
}
td.judulboks{
text-align:center;
font-size:22px;
font-weight:bold;
color:#3d010a;
font-family:Tahoma;
}
td.judulboks:hover{
background:#fff url(http://japarus.xtgem.com/bgrpagar.jpg);
color: #999900;
border-color:#FF0000;
}

5. lalu Klik Save Template

Langkah selanjutnya, dengan cara memasukannya kedalam postingan atau dengan Add Widget. Sobat sudah pada mengertikan maksudnya. Tidak perlu dijelasin lagi... :) Dalam konten HTML/JavaScript, copy lalu pastekan kode berikut :

<table background="#FFF" bordercolor="cdd4cd" border=1 cellspacing="10" width="420">
<tr bordercolor="d8ffde">
<td class="judulboks" colspan=5 bgcolor="#CCCCCC">Judul Tabel 4 Kolom</td></tr>
<td class="isiboks" bordercolor="#d8ffde">
01. <a target="_blank" href="Link Judul-01">Judul-01</a> Tuliskan teks di sini !<br />
02. <a target="_blank" href="Link Judul-02">Judul-02</a> Tuliskan teks di sini !<br />
03. <a target="_blank" href="Link Judul-03">Judul-03</a> Tuliskan teks di sini !<br />
04. <a target="_blank" href="Link Judul-04">Judul-04</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-05">Judul-05</a> Tuliskan teks di sini !<br />
02. <a target="_blank" href="Link Judul-06">Judul-06</a> Tuliskan teks di sini !<br />
03. <a target="_blank" href="Link Judul-07">Judul-07</a> Tuliskan teks di sini !<br />
04. <a target="_blank" href="Link Judul-08">Judul-08</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-09">Judul-09</a> Tuliskan teks di sini !<br />
02. <a target="_blank" href="Link Judul-10">Judul-10</a> Tuliskan teks di sini !<br />
03. <a target="_blank" href="Link Judul-11">Judul-11</a> Tuliskan teks di sini !<br />
04. <a target="_blank" href="Link Judul-12">Judul-12</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-13">Judul-13</a> Tuliskan teks di sini !<br />
02. <a target="_blank" href="Link Judul-14">Judul-14</a> Tuliskan teks di sini !<br />
03. <a target="_blank" href="Link Judul-15">Judul-15</a> Tuliskan teks di sini !<br />
04. <a target="_blank" href="Link Judul-16">Judul-16</a> Tuliskan teks di sini !
</td>

</table>

Ket:
Untuk Widht="420" adalah lebar tabelnya, silahkan sobat sesuaikan dengan lebar widget pada tempalte sobat sendiri.

Sekian untuk tutorial Cara Membuat Table 4 Kolom Dengan CSS.

Salam,