Perlu sobat ketahui, di blogger atau blogspot sebenarnya ada beberapa cara untuk membuat tabel di dalam postingan blog Anda. Mulai dari menggunakan microsoft word yang di simpan dalam format HTML, excel, menggunakan Kode HTML langsung pada blog dan banyak lagi cara lainnya. Kesemua cara tersebut memiliki tingkat kesulitan dan kerumitan masing-masing.
Jadi bisa dikatan membuat tabel di blog memang susah-susah gampang! Mungkin bagi yang sudah menguasai kode html tentunya untuk membuat sebuah tabel di blog sangat lah mudah, tetapi yang tidak mengerti dengan kode html tentunya akan mengalami kesulitan dalam pembuatannya.
Nah untuk itulah di kesempatan kali ini saya akan mencoba untuk membuat sebuah tutorial bagaimana caranya agar Anda dapat membuat tabel di postingan menggunakan kode HTML. Silahkan Anda cek dulu tampilaan tabel pada template default blogger agar meyakinkan Anda semua.
Sebelum saya menjelaskan panjang lebar tentang menggunakan Kode HTML-nya, Silahkan Anda terlebih dahulu copy paste kode CSS di bawah ini, dan simpan tepat di atas atau sebelum kode ]]></b:skin> atau </style>.
/* Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td, .post-body table caption{border:1px solid #e6e6e6;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #009abf;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #eee;}
.post-body th{font-weight:700;}
.post-body table caption{border:none;font-style:italic;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;}
.post-body td:hover{background:#fefefe;}
.post-body th{background:#00acd6;color:#fff;}
.post-body th:hover{background:#009fc6;}
.post-body td a{color:#444;}
.post-body td a:hover{color:#4db2ec;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body li {list-style-type:square;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.widget ul {padding:0;}
Setelah Anda menyimpan Kode CSS di atas selanjutnya kita akan mempelajari beberapa attributes yang sering di gunakan dalam tabel HTML.
Kode dibawah ini adalah kerangka dari Tabel HTML yang telah disesuaikan dengan kode CSS yang tadi Anda copy pastekan di atas. Jadi setiap Anda mau membuat tabel maka kerangka dibawah inilah yang di gunakan. Untuk mencobanya silahkan Anda buat postingan baru dan copy paste kode dibawah ini lalu masuk ke bagian penulisan HTML kemudian simpan, lalu Anda kembali lagi ke penulisan normal dengan meng klik Compose.
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td>Isi 1a</td>
<td>Isi 2a</td>
<td>Isi 3a</td>
</tr>
<tr>
<td>Isi 1b</td>
<td>Isi 2b</td>
<td>Isi 3b</td>
</tr>
<tr>
<td>Isi 1c</td>
<td>Isi 2c</td>
<td>Isi 3c</td>
</tr>
</tbody>
</table>
Jangan dulu panik jika pada area penulisan posting, bordernya tidak muncul. klik dulu Pratinjau untuk melihat perubahan. Maka kode yang Anda pastekan tadi, tampilannya akan seperti tabel di bawah ini. Tabel yang Anda gunakan dengan yang saya pakai bedanya hanyalah pada background-nya saja.
| Judul 1 |
Judul 2 |
Judul 3 |
| Isi 1a |
Isi 2a |
Isi 3a |
| Isi 1b |
Isi 2b |
Isi 3b |
| Isi 1c |
Isi 2c |
Isi 3c |
Jika tampilannya seperti tabel di atas maka anda telah sukses membuat tabel pada postingan blog. Selamat.
Untuk selanjutnya kita akan mempelajari 2 Attributes yang sering digunakan dalam Tabel HTML yaitu Colspan (Column Span) dan Rowspan. Berikut dibawah ini sekilas pengertian tentang keduanya.
Colspan dan rowspan adalah html attributes yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehingga satu unit kolom atau row ini menjadi lebih lebar. Colspan adalah kependekan dari “column span” yang bisa mengartikan sebagai “berapa kotak kesamping” sedangkan rowspan mengartikan “berapa kotak kebawah”.
Cara Menggunakan Attributes Colspan (Column Span).
Attribute colspan biasanya diletakkan dalam tag <th> ataupun <td> dan Anda bisa mengatur “value”nya berapa kotak yang akan di span. Contoh misalkan kita akan menggabungkan column judul menjadi satu, maka penulisan kodenya seperti berikut.
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr>
<th colspan="3" style="text-align: center;"><b style="text-align: left;">Cara Menggunakan Attributes Colspan </b><b style="text-align: left;">(Column Span)</b></th>
</tr>
<tr>
<td>Isi 1a</td>
<td>Isi 2a</td>
<td>Isi 3a</td>
</tr>
<tr>
<td>Isi 1b</td>
<td>Isi 2b</td>
<td>Isi 3b</td>
</tr>
<tr>
<td>Isi 1c</td>
<td>Isi 2c</td>
<td>Isi 3c</td>
</tr>
</tbody>
</table>
Maka hasilnya akan seperti tabel di bawah
| Cara Menggunakan Attributes Colspan (Column Span) |
| Isi 1a |
Isi 2a |
Isi 3a |
| Isi 1b |
Isi 2b |
Isi 3b |
| Isi 1c |
Isi 2c |
Isi 3c |
Penjelasannya :
Rumus utamanya : colspan="3"
"3" ini adalah value-nya, misalkan Anda ingin menggabungkan 2 columns, maka ganti value tersebut menjadi "2".
Perlu Anda ingat juga jika kita membuat 3 columns dan ingin menggabungkan ketiganya baik itu di tag <th> atau pun <td>. maka hapus 2 kode di bawahnya dan sisakan satu lalu tambahkan colspan="3". untuk lebih jelasnya perhatikan penulisan pada kotak script di atas.
Cara Menggunakan Attributes Rowspan.
Attribute Rowspan juga sama diletakkan dalam tag <th> ataupun <td>. Dalam contoh kali ini saya akan menggabungkan cell Isi 1a, dan Isi 1b. berikut penulisan kodenya.
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td rowspan="2"><div style="text-align: center;">
<span style="font-size: large;">Isi 1a</span></div>
</td>
<td>Isi 2a</td>
<td>Isi 3a</td>
</tr>
<tr>
<td>Isi 2b</td>
<td>Isi 3b</td>
</tr>
<tr>
<td>Isi 1c</td>
<td>Isi 2c</td>
<td>Isi 3c</td>
</tr>
</tbody>
</table>
Maka hasilnya akan seperti tabel di bawah ini
| Judul 1 |
Judul 2 |
Judul 3 |
Isi 1a
|
Isi 2a |
Isi 3a |
| Isi 2b |
Isi 3b |
| Isi 1c |
Isi 2c |
Isi 3c |
Penjelasannya :
Rumus utamanya : rowspan="2"
Untuk penjelasannya sama dengan colspan di atas. "2" pada rowspan sebagai value-nya.
Mungkin untuk postingan kali ini tentang cara membuat tabel responsive di blogger dengan kode HTML cukup sampai disini. Mohon maaf bila ada penjelasaan yang kurang di mengerti atau kurang pahami. Jika Anda masih mengalami kesulitan silahkan tinggalkan komentar di bawah.
