✔ Menciptakan Tabel Responsive Di Postingan Blog

Penggunaan tabel di dalam postingan terkadang diharapkan untuk menampilkan sebuah data semoga terlihat rapi dan gampang dibaca. Maka dari itu, pada postingan kali ini saya akan menyebarkan tutorial Cara Membuat Tabel Responsive di Postingan Blog dengan memakai CSS.

Membuat tabel responsive memakai CSS, selain akan terlihat rapi dan responsive juga tampilannya lebih menarik dan dapat dikustomisasi. Apalagi kalau teman memakai template VioMagz, nah cara ini juga dapat teman lakukan untuk menciptakan tabel di template VioMagz tersebut.

Karena tabel yang kita buat memakai CSS, jadi ini tidak akan mempengnaruhi skor kecepatan blog sobat.

Membuat Tabel Responsive di Postingan Blog

Tabel responsive pada blog sangat penting semoga tampilan tabel tetap rapi dan dapat mengikut ukuran layar perangkat baik laptop atau smartphone.


Berikut ini yakni cara menciptakan tabel responsive pada blog dengan memakai CSS.

1. Buka dashboard blog sobat, kemudian klik sajian Tema dan pilih Edit HTML.
2. Salin isyarat CSS di bawah ini, kemudian tempatkan sebelum isyarat ]]></b:skin>.

/* CSS Table */ table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} table{border-collapse:collapse;border-spacing:0;} .post-body table td,.post-body table caption{border:1px solid #e9e9e9;font-size:16px;padding:10px;text-align:left;vertical-align:top;} .post-body table tr th {border:1px solid $(body.link.color);font-weight:bold;color:#fff;padding:10px 10px;text-align:left;vertical-align:top;font-size:16px} .post-body table th {background:#7babed} .post-body table.tr-caption-container {border:1px solid #f1f1f1;} .post-body table caption{border:none;font-style:italic;} .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;} .post-body table tr:nth-child(even) > td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;} .post-body td a{display:inline-block} .post-body td a:hover {color:#7f9bdf;border-color:#adbce0;} .post-body td a[target="_blank"]:after {margin-left:5px;} .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 td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;} table {max-width:100%;width:100%} 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%}

3. Selanjutnya, simpan Tema.

Keterangan:
7babed - Warna background judul tabel.

Untuk menciptakan tabel pada postingan, teman harus menuliskan isyarat pemangginya melalui postingan mode HTML.


Contoh penulisan menciptakan tabel pada postingan di mode HTML:

<table cellpadding="0" cellspacing="0" style="text-align: left;"> <tbody> <tr><th>Judul Kolom 1</th> <th>Judul Kolom 2</th> <th>Judul Kolom 3</th></tr> <tr><td>Isi kolom 1a</td> <td>Isi kolom 2a</td> <td>Isi kolom 3a</td></tr> <tr><td>Isi kolom 1b</td> <td>Isi kolom 2b</td> <td>Isi kolom 3b</td></tr> <tr><td>Isi kolom 1c</td> <td>Isi kolom 2c</td> <td>Isi kolom 3c</td></tr> <tr><td>Isi kolom 1d</td> <td>Isi kolom 2d</td> <td>Isi kolom 3d</td></tr> <tr><td>Isi kolom 1e</td> <td>Isi kolom 2e</td> <td>Isi kolom 3e</td></tr> </tbody> </table>

Hasilnya:

Judul Kolom 1	Judul Kolom 2	Judul Kolom 3
Isi kolom 1a	Isi kolom 2a	Isi kolom 3a
Isi kolom 1b	Isi kolom 2b	Isi kolom 3b
Isi kolom 1c	Isi kolom 2c	Isi kolom 3c
Isi kolom 1d	Isi kolom 2d	Isi kolom 3d
Isi kolom 1e	Isi kolom 2e	Isi kolom 3e

Ingat ya sob, menciptakan tabel harus dalam mode HTML, bukan Compose. Selanjutnya, silahkan publish postingan tabel yang telah teman buat dan lihat hasilnya.

Kurang lebih itulah Cara Membuat Tabel Responsive di Postingan Blog yang dapat teman blogger coba. Berikan komentar teman kalau mempunyai hambatan atau permasalahan seputar postingan ini. Selamat mencoba dan salam sukses.
Sumber http://www.randi.id

Share this post

Berlangganan update artikel terbaru via email: