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.

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

  1. Sangat membantu skali, mas. Terima kasih

    BalasHapus
  2. Terimakasih kak. Artikel yang kakak buat sangat bagus. Semangat terus ya kak untuk membuat artikelnya. Contoh yang diberikan dalam artikel ini sangat simple tetapi mudah untk di ikuti Dan artikel ini sangat berguna sebagai acuan atau contoh untuk kami para pembaca.perkenalkan nama saya Sintia dan Nim saya 1922500186, kelompok SI2j, dan link Web kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  3. Terima kasih kak atas artikel yang kaka berikan sangat sangat membantu saya untuk mengerti

    Nama : Sadam Husein
    Nim : 1922500158
    Kelompok : si2k
    Link kampus : https://www.atmaluhur.ac.id/

    BalasHapus
  4. Sangat bermanfaat dan membantu saya membuat tabel pada postingan terbaru saya. Jazakallah

    BalasHapus

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