Cara Membuat Tabel Responsive di Blogger (dengan HTML dan CSS)

Salah satu kekurangan editor posting visual Blogger adalah tidak ada alat bawaan untuk membuat tabel. Tabel adalah alat penting untuk menyortir dan menyajikan data dalam format yang mudah dimengerti. Meskipun demikian Anda dapat membuat tabel dengan menulis HTML dan CSS secara manual di dalam posting Anda, ini tentunya bukan pilihan yang layak bagi banyak orang khususnya jika mereka kurang pengetahuan tentang HTML dan CSS. Pada artikel ini, saya akan menunjukkan cara menambahkan tabel responsive di posting dan halaman statis Blogger menggunakan HTML dan CSS. Mari kita mulai tutorialnya!

Membuat Tabel HTML di Posting Blog

Jika benar-benar ingin memahami tabel HTML, baca di W3schools.

Anda bisa membuat dan mengedit tabel di Blogger. Untuk melakukan ini, Anda perlu menambahkan kode HTML untuk tabel ke editor posting Blogger.

Langkah 1. Login ke akun blog Blogger Anda.

Langkah 2. Copy kode tabel HTML di bawah:

<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>

Langkah 3.Pada sidebar dashboard Blogger klik "Post", Anda bisa memilih edit posting atau buat postingan baru.

Langkah 4. Beralih ke mode tampilan HTML dari editor posting Blogger dan paste-kan kode yang tadi di copy setelah teks tertentu atau di awal posting atau setelah gambar, di mana pun Anda ingin menampilkan tabel HTML Anda di posting.

Langkah 5. Buat perubahan sesuai pilihan Anda, preview terlebih dahulu untuk melihat hasilnya, jika sudah yakin publikasi posting Anda untuk melihat tabel HTML Anda.

Catatan: Simpan kode HTML di atas ke notepad pada komputer Anda. Itu merupakan kerangka tabel HTML untuk posting blog atau halaman statis Blogger.

Selanjutnya kita akan memformat tabel dengan menambahkan kode CSS pada template Anda agar tampilan jadi menarik dan juga Anda tidak perlu lagi memasukan kode CSS pada setiap postingnya.

Memformat Tabel

Semua format harus dilakukan dengan CSS. Tabel Anda seharusnya tidak mengandung lebar dalam format HTML atau markup pemformatan lainnya.


Langkah 1. Login ke akun Blogger Anda.

Langkah 2. Pilih "Thema" pada sidebar dashboard Blogger, kemudian klik "Edit HTML."

Langkah 3. Copy kode CSS di bawah, dan paste-kan 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:#f9f9f9;color:#444;}
.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;}

Langkah 4. Klik "Save" agar penambahan kode CSS untuk tabel tersimpan.

Seperti yang sudah saya katakan sebelumnya, jika Anda sudah menyimpan kode CSS di atas, Anda tidak perlu lagi memasukan kode CSS pada posting jika ingin membuat tabel. Cukup masukan kerangka tabel HTML yang telah Anda simpan tadi!

Lanjutkan untuk mempelajari 2 attributes yang sering digunakan dalam Tabel HTML yaitu; colspan dan rowspan.

Penggunaan Colspan dan Rowspan pada Tabel

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”.

Menambahkan Attributes Colspan atau Column Span pada Tabel

Attribute colspan biasanya diletakkan dalam tag <th> ataupun <td> dan Anda bisa mengatur “value” nya berapa kotak yang akan di span. Misalkan kita akan menggabungkan kolom judul menjadi satu.

Ini contoh colspan:

kolom judul jadi satu (Attributes Colspan)
Isi 1a	Isi 2a	Isi 3a
Isi 1b	Isi 2b	Isi 3b
Isi 1c	Isi 2c	Isi 3c

Penulisan Tabel HTML nya 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&nbsp;</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>

Memahami penulisannya...

Rumus kuncinya: colspan="3"

"3" ini adalah value-nya, jika Anda ingin menggabungkan 2 kolom, maka ganti value tersebut menjadi "2".

Catatan: Jika Anda membuat 3 kolom dan ingin menggabungkan ketiganya baik itu di tag <th> atau pun <td> maka hapus 2 kode di bawahnya dan sisakan satu lalu tambahkan atributes colspan="3" (untuk lebih jelasnya perhatikan penulisan pada kotak script di atas).

Menambahkan Attributes Rowspan pada Tabel

Attribute Rowspan juga sama diletakkan dalam tag <th> ataupun <td>. Dalam contoh kali ini saya akan menggabungkan cell Isi 1a, dan Isi 1b.

Ini tabel Rowspan!

Judul 1	Judul 2	Judul 3
Isi 1a	Isi 2a	Isi 3a
	Isi 2b	Isi 3b
Isi 1c	Isi 2c	Isi 3c

Berikut contoh penulisan Tabel HTML rowspan:

<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>

Memahami penulisannya...

Kunci utamanya : rowspan="2" Untuk penjelasannya sama dengan colspan. "2" pada rowspan bertindak sebagai value-nya.

Saya harap posting ini bisa bermanfaat. Jika Anda memiliki pertanyaan silahkan tinggalkan di kolom komentar. Terima kasih telah mengunjungi SaranBlogging.