 |
| Tabel di Blog. |
Cara Membuat Tabel Responsive di Postingan Blog - Didalam dunia blogging pastinya kebutuhan menciptakan tabel untuk menampilkan data yang berupa daftar di postingan sangatlah penting, penggunaan tabel yang responsive akan membantu pengguna seluler dalam melihat isi tabel tersebut.
Data yang ditampilkan pada tabel biasanya berupa data yang spesifik & terstrukur rapih, misalnya untuk daftar harga handphone, daftar fitur template, dan masih banyak lagi yang lainnya. Jika semua data tersebut di tulis secara manual maka hasilnya akan terlihat awut-awutan.
Tabel responsive ialah sebuah tampilan tabel yang mampu dibaca secara utuh di semua perangkat hp atau browser. Terkadang bila kita tidak menciptakan sebuah tabel yang responsive maka tampilan tabelnya akan terpotong dan tidak akan tampil secara utuh dikarenakan resolusi layar tiap perangkat berbeda beda.
Tentu saja itu akan menjadi sebuah duduk perkara besar, alasannya ialah bila seorang pengunjung melalui perangkat seluler dan melihat tampilan tabel yang tidak mampu dibaca secara utuh maka sudah dipastikan pengunjung itu bakalan lari meninggalkan blog sobat tanpa meninggalkan jejak.
Akan tetapi untuk menciptakan tabel yang responsive cukuplah rumit bila harus memakai bahasa-bahasa css dan html, untuk itu Admin disini akan menjelaskan perihal cara menciptakan sebuah tabel responsive tanpa memakai bahasa css dan html yang membosankan.
Langkah pertama yang harus sobat lakukan yaitu login terlebih dahulu ke akun blogger sobat kemudian buatlah sebuah postingan baru.
Untuk membuat tabel tentunya tidak bisa di bagian "compose" tampilan diman biasanya sobat membuat postingan, maka dari itu klik bagian HTML untuk mulai membuat tabel lalu isikan kode berikut.
<table> dan </table>
<tr> dan </tr>
<td> dan </td>
Unutk menambahkan tabel baru 2 kolom kesamping dan 1 kolom kebawah sobat bisa menggunakan kode berikut
<table width="500" border="1">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table>
Jika ingin menambahkan lagi tabel baru 2 kolom kesamping dan 2 kolom kebawah sobat gunakan kode berikut
<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>
Apabila dirasa masih kurang dan ingin menambahkan tabel baru lagi 3 kolom kesamping dan 3 kolom kebawah maka sobat bisa menggunakan kode berikut.
<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>
Jika sobat sudah mengerti caranya, sobat bisa ikuti Cara Membuat Tabel Responsive di Postingan Blog dengan menambahkan kode di bawah ini pada tabel yang sudah sobat buat tadi.
<table class="tg" style="table-layout: fixed; width: 100%;">
<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>
Gimana boskuh? sangat mudah kan? terima kasih telah membaca artikel Cara Membuat Tabel Responsive di Postingan Blog baca juga tutorial Cara Redirect Semua Halaman Blog ke Domain Baru, monggo para blogger di tunggu kritik dan sarannya di kolom komentar, boleh titip link kok. CMIIW
EmoticonEmoticon