Tutorial Cara Menciptakan Tabel Responsive Di Postingan Blogspot

Cara menciptakan tabel responsive di postingan blogspot itu gampang sekali bila anda menyimak langkah - langkahnya berikut ini.

Sebagai media informasi, halaman blog dapat menyajikan warta apapun kepada pembaca, baik itu dalam teks, audio, dan video. Dalam hal format teks, kita juga dapat menciptakan tabel di postingan blogspot atau pun wordpress. Terkadang untuk menyajikan warta yang terang kita memang perlu menyertakan tabel.

Bagaimana ya cara menciptakan tabel di blog ... pada ketika kita membuat blog dan ingin membuat postingan di blogspot, pada teks editor memang tidak dapat kita temukan tombol untuk pembuatan tabel, artinya kita harus membuatnya sendiri dengan isyarat HTML. Namun anda tidak perlu khawatir, membuat tabel di blogger dengan isyarat HTML itu gampang menyerupai pada referensi di bawah.


CARA MEMBUAT TABEL DI BLOG

Perlu anda ketahui, untuk menuliskan isyarat HTML dalam pembuatan tabel di postingan plogspot, kita harus beralih dulu dari mode "compose" ke mode "HTML" , anda cukup mengklik tombolnya yang letaknya pada bab sudut kiri atas, sempurna di atas tombol editor.

Cara menciptakan di postingan blog bahwasanya sederhana saja, berikut ini ialah isyarat HTML yang merupakan format dasar dalam pembuatan tabel :

<table> dan </table>, <tr> dan </tr>, <td> dan </td>

Dari format dasar di atas, kita dapat kembangkan dalam menciptakan tabel menyerupai referensi berikut ini :

1. Cara menciptakan tabel 2 kolom kesamping dan 1 baris kebawah, maka kita cukup menuliskan isyarat html berikut pada postingan blogger :

<table width="500" border="1">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table>

hasilnya akan tampil menyerupai gambar tebel berikut :

Kolom 1

Kolom 2

2. Jika ingin merubahnya menjadi 3 kolom kesamping dan 1 baris kebawah anda cukup menambahkan isyarat <td>Kolom 3</td> saja sebelum isyarat </table> dan akibatnya akan terlihat menyerupai ini :

Cara menciptakan tabel 2 kolom kesamping dan 2 baris kebawah, maka kita cukup menuliskan isyarat html berikut pada postingan di blog :

<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
</tr>
</table>

hasilnya akan tampil menyerupai gambar tabel berikut ini :

Kolom 1 A	Kolom 1 B
Kolom 2 A	Kolom 2 B

CATATAN : bab table width .... itu ialah untuk mengatur lebar tabel, anda dapat menciptakan eksperimen sendiri.


3. Jika ingin merubahnya menjadi 3 kolom kesamping dan 2 kolom kebawah anda cukup menambahkan isyarat <td>Kolom 3 A dan 3 B </td> di antara <tr> dan </tr> pertama dan kedua

<table width="500" border="1">
<tr>
<td>Kolom 1 A</td>
<td>Kolom 2 A</td>
<td>Kolom 3 A</td>
</tr>
<tr>
<td>Kolom 1 B</td>
<td>Kolom 2 B</td>
<td>Kolom 3 B</td>
</tr>
</table>

hasilnya akan tampil menyerupai gambar tabel berikut ini :

Kolom 1 A	Kolom 2 A	Kolom 3 A
Kolom 1 B	Kolom 2 B	Kolom 3 B

4. Cara menciptakan tabel 3 kolom kesamping dan 3 kolom kebawah. bila ingin menciptakan tabel 3 kolom kesamping dan kebawah maka anda cukup menambahkan isyarat ini sebelum isyarat </table>

<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
<td>Kolom 1 C </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
<td>Kolom 2 C </td>
</tr>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>
</table>

hasilnya akan tampil menyerupai gambar tabel berikut ini :

Kolom 1 A	Kolom 1 B	Kolom 1 C
Kolom 2 A	Kolom 2 B	Kolom 2 C
Kolom 3 A	Kolom 3 B	Kolom 3 C

Namun bila sehabis isyarat tersebut anda pasang dan akibatnya tidak sama dengan referensi tabel di blog ini anda jangan heran, itu permasalahannya cuma di CSS nya saja, alasannya ialah setiap template beda dan tidak semua template blogger ada CSS untuk tabel.

Solusinya yaitu dengan menambahkan isyarat CSS sendiri di template blog anda, anda dapat menggunakan isyarat CSS ini :

th, td {margin:0;padding: 5px; border:1px solid #ccc; text-align:center;}

AGAR TABEL DI POSTINGAN BLOG TAMPIL RESPONSIVE

Saat ini internet juga dapat diakses menggunakan media HP, masalahnya ... hal ini akan menciptakan tampilan halaman blog menjadi terpotong bila tidak dibentuk dengan responsive. Begitu juga dengan tabel yang anda buat, anda perlu mengantisipasi tampilan pada smartphone dengan menciptakan tabel yang responsive.

Cara menciptakan tabel responsive di blogspot juga sederhana saja, cukup mengedit isyarat HTML menambahkan isyarat tertentu menyerupai langkah berikut ini.

Berikut ini cara menciptakan tabel responsive di postingan blogspot :

1. Login ke Dashboard blogspot Anda
2. Pilih Theme kemudian klik Edit HTML
3. Cari kode ]]></b:skin>  .Caranya, tekan Ctrl+F, masukkan kode ]]></b:skin> ke kolom pencarian, kemudian tekan "enter". anda akan ditunjukkan isyarat tersebut dengan highlight warna kuning.
4. Letakkan isyarat dibawah ini sempurna di atas kode ]]></b:skin>

/* CSS Post Table */ .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #e9e9e9;} .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;} .post-body table tr:nth-child(even) &amp;gt; td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) &amp;gt; td:hover {background-color:#0082d8;} .post-body th{background:#bcdbfe;font-weight:bold;text-transform:uppercase;font-size:14px} .post-body th:hover{background:#fdfdfd;} .post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px} .post-body td a:hover {color:#7f9bdf;border-color:#adbce0;} .post-body td a[target=&amp;quot;_blank&amp;quot;]: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 {font-size:80%;padding:0px 8px 8px !important;} .post-body li {list-style-type:square;} img {max-width:100%;height:auto;border:none;} 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;}

5. Terakhir, klik Simpan Tema