Cara Gampang Menciptakan Tabel Postingan Blog Responsive Di Blogspot

Baca Juga

Tutorial cara menciptakan tabel postingan blog responsive ini saya tulis sesudah saya sendiri mengalami kesulitan dalam menciptakan postingan blog dalam bentuk tabel. Sebenarnya tidak terlalu susah juga untuk membuatnya. Hanya saja kala itu belum tahu caranya jadi kelihatan susah. Setelah membaca pencerahan di google akibatnya tahu dan ternyata mudah. Kita hanya perlu memasang isyarat css yang mengatur model dan semoga tabel dapat responsif.

Tips Serupa: Cara Membuat Notifikasi Cookies di Blogger Tanpa Menambah Loading Blog.

Bagi pengguna nonametemplate dari Bung Frangki ibarat template yang saya gunakan ini sudah ada isyarat css untuk tabel postingan. Makara yang perlu kau lakukan hanya memanggil isyarat tersebut. Sebagai demo coba resize browser kau ketika membuka poatingan ini. Tabel keterangan di bawah responsif kan?

Tabel Postingan

Namun kalau kau bukan pengguna template tersebut, silahkan copy css berikut dan paste di bawah isyarat </b:skin>.

/* CSS Post Table */ .postbody table{bordercollapse:collapse;borderspacing:0;} .postbody table td {border:1px solid #e9e9e9;padding:10px;textalign:left;verticalalign:top;} .postbody table th {border:1px solid #5a97ff;padding:10px;textalign:left;verticalalign:top;background:#4588f3 !important;color:#fff} .postbody td, .postbody th{verticalalign:top;textalign:left;fontsize:13px;padding:3px 5px;} .postbody table tr:nthchild(even) > td {backgroundcolor:#f9f9f9;} .postbody th{background:#fff;fontweight:400;texttransform:uppercase;fontsize:14px} .postbody table {maxwidth:100%;width:100%;margin:1.5em auto;} .postbody table.sectioncolumns td.first.columnscell{borderleft:none} .postbody table.sectioncolumns{border:none;tablelayout:fixed;width:100%;position:relative} .postbody table.columns2 td.columnscell{width:50%} .postbody table.columns3 td.columnscell{width:50%} .postbody table.columns4 td.columnscell{width:30%} .postbody table.sectioncolumns td.columnscell{verticalalign:top} .postbody table.trcaptioncontainer{padding:4px;marginbottom:.5em} .postbody td.trcaption{fontsize:80%} .postbody td img, .postbody th img {liststyle:none;maxwidth:100%;height:auto;padding:0 !important;margin:0 !important} .postbody table.trcaptioncontainer img, .postbody table.trcaptioncontainer img, .postbody img {liststyle:none;maxwidth:100%; height:auto;padding:0 !important;margin:0 !important} .postbody table.trcaptioncontainer td {border:none;padding:0 !important;margin:0 !important} .postbody table caption{maxwidth:100%;height:auto;border:none !important;padding:0 !important} 

Setelah selesai, kini gunakan isyarat berikut untuk menciptakan tabel di postingan blog.

<table><tbody> <tr> <th>Nama</th>         <th>Keterangan</th> </tr> <tr> <td>Ukuran layar</td> <td>14 Inch</td> </tr> <tr> <td>Resolusi</td>     <td>1366 x 768</td> </tr> <tr> <td>Processor</td>    <td>Intel i36006U dualcore 2GHz</td> </tr> <tr> <td>RAM</td>          <td>4GB DDR4</td> </tr> <tr> <td>Tipe Grafis</td>  <td>Intel HD Graphics</td> </tr> <tr> <td>Hardisk</td>      <td>1TB 5400rpm</td> </tr> <tr> <td><b>HARGA</b>      </td> <td><b>Rp 4.950.000 (Tokopedia)</b></td> </tr> </tbody> </table> 

Keterangan isyarat di atas adalah:

No	Nama	Keterangan
1	<table>	Untuk mendefinisikan tabel
2	<tr>	Untuk mendefinisikan baris tabel
3	<td>	Untuk mendefinisikan kolom tabel
4	<th>	Untuk mendefinisikan judul

Jika ingin menambahkan kolom cukup tambahkan isyarat kolom yaitu <td> hingga isyarat penutupnya </td>. Begitupun juga untuk menambahkan baris, tambahkan isyarat baris yaitu <tr> dengan penutupnya </tr>.

Sekian cara gampang menciptakan tabel postingan blog responsif, kalau kau masih belum paham dengan klarifikasi saya silahkan berkomentar.