Cara Membuat Tabel Responsive di Blog Tanpa menggunakan CSS

Tabel Responsive merupakan tampilan tabel yang dilihat secara utuh. Banyak kejadian Blog yang di lihat menggunakan perangkat Handphone ialah saat tampilan tabel akan terus mengarah ke kanan karena lebar area text tersebut, kemungkinan kalian akan scrool ke kanan-kiri.

Jika kalian menggunakan Tabel Responsive maka sudah pasti tampilan Tabel tersebut akan utuh dan Word Warp ke bawah. *Word Warp adalah salah satu fungsi  untuk menyesuaikan antara text dengan lebar area text tersebut. Jadi kita tidak perlu scroll ke kanan-kiri untuk membaca text yang sekiranya kepanjangan.

Adanya penggunaan tabel sangat berguna untuk rincian pembahasan dari Blog tersebut. Sangat disarankan untuk membuat tabel tersebut menjadi responsive, kali ini Saya akan membagikan tips dan cara yang mudah untuk membuat tabel responsive di Blog tanpa menambahkan kode CSS di HTML Template.

Membuat Tabel Responsive

Membuat tabel di Blog ada 2 cara, yakni :
  1. Membuat Tabel langsung menggunakan HTML
  2. Mengambil data dari Microsoft Excel lalu di konvert menggunakan Tablesgenerator, kemudian keluar code tabel tersebut.

Membuat Tabel langsung menggunakan HTML

Untuk membuatnya di Blogger kita hanya perlu dasar kode HTML tabel yang nanti akan di modifikasi. Berikut kode HTML tersebut :
<table> dan </table>
<tr> dan </tr>
<td> dan </td>  

Dari kode tersebut nanti kita kembangkan menjadi kode berikut, maka yang terlihat tabel menjadi 2 kolom 1 baris :
<table border="1" style="table-layout: fixed; width: 100%;">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table> 

Kolom 1 Kolom 2

Jika ingin menambahkan kolom maka penulisan kode seperti berikut :
<table border="1" style="table-layout: fixed; width: 100%;">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
<td>Kolom 3 </td>
</tr>
</table> 

Kolom 1 Kolom 2 Kolom 3

Jika ingin menambahkan baris maka penulisan kode seperti berikut :
<table border="1" style="table-layout: fixed; width: 100%;">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
<td>Kolom 3 </td>
</tr>
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
<td>Kolom 3 </td>
</tr>
</table> 

Kolom 1 Kolom 2 Kolom 3
Kolom 1 Kolom 2 Kolom 3

Kesimpulan dan Keterangan :
Kode <tr> adalah baris tabel dan kode <td> adalah kolom tabel. Semakin kode tersebut di buat maka ada penambahan di kolom/baris tabel. Pada kode <table border="1" style="table-layout: fixed; width: 100%;"> yang berwarna merah adalah kode CSS yang langsung di tulis bersama kode HTML. Untuk mengganti garis tabel, background tabel dsb kalian cukup menggantinya disana tanpa harus merubah Template HTML Blog kalian.

Membuat Tabel Menggunakan Microsoft Excel

Akan segera di tulis oleh penulis.

Belum ada Komentar untuk "Cara Membuat Tabel Responsive di Blog Tanpa menggunakan CSS"

Posting Komentar

Halo! Terima kasih sudah meluangkan waktu untuk membaca di Blog Saya. Silahkan berkomentar tentang tulisan ini, saran dan kritik akan sangat berguna bagi Saya untuk kedepannya :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel