Cara Membuat Tabel Responsive Di Postingan Blogspot
Cara membuat tabel responsive di postingan blogspot itu gampang sekali jika kamu menyimak langkah – langkahnya berikut ini.
Sebagai media informasi, halaman blog bisa menyajikan informasi apapun kepada pembaca, baik itu dalam teks, audio, dan video. Dalam hal format teks, kita juga bisa membuat tabel di postingan blogspot atau pun wordpress. Terkadang untuk menyajikan informasi yang jelas kita memang perlu menyertakan tabel.
Bagaimana ya cara membuat tabel di blog … pada saat kita membuat blog dan ingin membuat postingan di blogspot, pada teks editor memang tidak bisa kita temukan tombol untuk pembuatan tabel, artinya kita harus membuatnya sendiri dengan kode HTML. tapi anda tidak perlu khawatir, membuat tabel di blogger dengan kode HTML itu mudah seperti pada contoh di bawah.
CARA MEMBUAT TABEL DI BLOG
Perlu anda ketahui, untuk menuliskan kode HTML dalam pembuatan tabel di postingan plogspot, kita harus beralih dulu dari mode “compose” ke mode “HTML” , anda cukup mengklik tombolnya yang letaknya pada bagian sudut kiri atas, tepat di atas tombol editor.
Cara membuat di postingan blog sebenarnya sederhana saja, berikut ini merupakan kode HTML yang merupakan format dasar dalam pembuatan tabel :
<table> dan </table>, <tr> dan </tr>, <td> dan </td>
Dari format dasar di atas, kita bisa kembangkan dalam membuat tabel seperti contoh berikut ini :
1. Cara membuat tabel 2 kolom kesamping dan 1 baris kebawah, maka kita cukup menuliskan kode html berikut pada postingan blogger :
<table width=”500″>
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table>
hasilnya akan tampil seperti gambar tebel berikut :
| Kolom 1 | Kolom 2 |
2. Jika ingin merubahnya menjadi 3 kolom kesamping dan 1 baris kebawah anda cukup menambahkan kode <td>Kolom 3</td> saja sebelum kode </table> dan hasilnya akan terlihat seperti ini :
Cara membuat tabel 2 kolom kesamping dan 2 baris kebawah, maka kita cukup menuliskan kode html berikut pada postingan di blog :
<table width=”500″>
<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 seperti gambar tabel berikut ini :
| Kolom 1 A | Kolom 1 B |
| Kolom 2 A | Kolom 2 B |
CATATAN : bagian table width …. itu adalah untuk mengatur lebar tabel, anda bisa membuat eksperimen sendiri.
3. Jika ingin merubahnya menjadi 3 kolom kesamping dan 2 kolom kebawah anda cukup menambahkan kode <td>Kolom 3 A dan 3 B </td> di antara <tr> dan </tr> pertama dan kedua
<table width=”500″>
<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 seperti gambar tabel berikut ini :
| Kolom 1 A | Kolom 2 A | Kolom 3 A |
| Kolom 1 B | Kolom 2 B | Kolom 3 B |
4. Cara membuat tabel 3 kolom kesamping dan 3 kolom kebawah. jika ingin membuat tabel 3 kolom kesamping dan kebawah maka anda cukup menambahkan kode ini sebelum kode </table>
<table width=”500″>
<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 seperti 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 jika setelah kode tersebut anda pasang dan hasilnya tidak sama dengan contoh tabel di blog ini anda jangan heran, itu permasalahannya cuma di CSS nya saja, karena setiap template beda dan tidak semua template blogger ada CSS untuk tabel.
Solusinya yaitu dengan menambahkan kode CSS sendiri di template blog anda, anda bisa memakai kode 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 bisa diakses menggunakan media HP, masalahnya … hal ini akan membuat tampilan halaman blog menjadi terpotong jika tidak dibuat dengan responsive. Begitu juga dengan tabel yang anda buat, anda perlu mengantisipasi tampilan pada smartphone dengan membuat tabel yang responsive.
Cara membuat tabel responsive di blogspot juga sederhana saja, cukup mengedit kode HTML menambahkan kode tertentu seperti langkah berikut ini.
Berikut ini cara membuat tabel responsive di postingan blogspot :
1. Login ke Dashboard blogspot Anda
2. Pilih Theme lalu klik Edit HTML
3. Cari kode ]]></b:skin> .Caranya, tekan Ctrl+F, masukkan kode ]]></b:skin> ke kolom pencarian, lalu tekan “enter”. anda akan ditunjukkan kode tersebut dengan highlight warna kuning.
4. Letakkan kode dibawah ini tepat 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) &gt; td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) &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=&quot;_blank&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