Membuat Tabel Cantik pada Blog

(Terimaksih kepada Mainbom.com)

Tahap Pertama:

1. Login ke Blogger > Template > Edit HTML
2. Jangan lupa centang "Expand Template Widget"
3. Cari kode ]]></b:skin> lalu sisipkan kode CSS berikut ini tepat di atas ]]></b:skin>
<!-- Nice Table Mainbom.com-->
table th {
    padding-top: 7px;
    text-align: left;
}
.nice-table {
    border-collapse: collapse;
    border-spacing: 0;
}
.nice-table tr:first-child th {
    border-top: 0 none;
}
.nice-table th:first-child {
    border-left: 0 none;
}
.nice-table tr:first-child th:last-child {
    border-right-color: #5C6785;
}
.nice-table th {
    background-color: #5C6785;
    color: white;
    font-weight: bold;
}
.nice-table th, .nice-table td {
    border: 1px solid #EBEBEB;
    padding: 3px 10px;
}
.nice-table td {
    background-color: #E6E6E6;
    border-color: #E5E5E5 #CCCCCC #E5E5E5 #E5E5E5;
    color: #444444;
}
.nice-table td:last-child {
    border-right-color: #E5E5E5;
}
.nice-table tr:nth-of-type(2n) td {
    background-color: #FFFFFF;
    border-right-color: #E5E5E5;
}
.nice-table.spaced-table td, .nice-table.spaced-table th {
    padding: 10px;
}
.nice-table.wide {
    width: 95%;
}
.nice-table.narrow {
    width: 75%;
}
.nice-table.narrower {
    width: 50%;
}
.nice-table.narrowest {
    width: 35%;
}
<!-- Nice Table Mainbom.com-->4. Klik Simpan template


Tahap ke dua


Tahap Kedua:

Tahap kedua adalah saat anda membuat postingan Blogger yang akan menggunakan tabel, pastikan edit entri pada mode HTML bukan "Compose". Untuk membuat tabelnya silahkan ikuti contoh kode di bawah ini

<table class="nice-table" width="100%" ><tbody>
<tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr>
<tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris 1</td> <td>kolom 3 baris 1</td> </tr>
<tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> <td>kolom 3 baris 2</td> </tr>
<tr> <td>kolom 1 baris 3</td> <td>kolom 2 baris 3</td> <td>kolom 3 baris 3</td> </tr>
<tr> <td>kolom 1 baris 4</td> <td>kolom 2 baris 4</td> <td>kolom 3 baris 4</td> </tr>
</tbody> </table>

Ini adalah contoh tabel dengan 3 kolom dan 4 baris
Header 1 Header 2 Header 3
kolom 1 baris 1 kolom 2 baris 1 kolom 3 baris 1
kolom 1 baris 2 kolom 2 baris 2 kolom 3 baris 2
kolom 1 baris 3 kolom 2 baris 3 kolom 3 baris 3
kolom 1 baris 4 kolom 2 baris 4 kolom 3 baris 4

Catatan:
Jika ingin menambah atau mengurangi jumlah kolom dan baris, silahkan mengedit dengan memperhatikan kode <td> dan <tr>
Disetiap kolom akan ada kode <td> dan </td>
Disetiap baris akan ada kode <tr> dan </tr>
"Tahap Pertama" cukup dilakukan sekali saja, dan "Tahap Kedua" dilakukan setiap membuat tabel
Ada pertanyaan silahkan