Cara Membuat Tabel di Blogger

Tabel adalah bagian yang sederhana dan mudah digunakan. Tetapi sangat disayangkan untuk membuat tabel di Blogger perlu menggunakan HTML. Pada artikel ini, saya akan membahas tutorial langkah-langkah membuat tabel HTML sederhana dan mendesainnya agar sesuai keinginan.

Selain itu, saya juga akan memberikan beberapa penyesuaian agar tabel bisa lebih responsif di tampilan mobile maupun dikstop.

Demo

Mengapa Perlu Tabel?

Menggunakan tabel memang mempermudah pembaca menemukan informasi penting secara cepat dan terstruktur. Berikut adalah alasan dan manfaatnya:

• Kemudahan Akses Informasi: Informasi disajikan dalam format yang terorganisir sehingga pembaca tidak perlu membaca paragraf panjang.
• Ringkas dan Jelas: Tabel memungkinkan perbandingan atau daftar langkah yang lebih jelas dan mudah dipahami.
• Visualisasi yang Efektif: Membantu menyederhanakan informasi kompleks menjadi lebih mudah dilihat dan diingat.

Cara Membuat Tabel Sederhana

Untuk membuat tabel di Blogger, gunakan kode HTML berikut:

<table border="1" cellspacing="0" cellpadding="5">
  <thead>
    <tr><!-- Baris 1 (Digunakan untuk Header kolom) -->
      <th>Header kolom 1</th>
      <th>Header kolom 2</th>
      <th>Header kolom 3</th>
    </tr>
  </thead>
  <tbody>
    <tr><!--  Baris 2 -->
      <td>Isi kolom 1</td>
      <td>Isi kolom 2</td>
      <td>Isi kolom 3</td>
    </tr>
    <tr><!--  Baris 3 -->
      <td>Isi kolom 1</td>
      <td>Isi kolom 2</td>
      <td>Isi kolom 3</td>
    </tr>
  </tbody>
</table>    

Penjelasan Kode:

• <table> : Tag untuk membungkus tabel.
• border="1" : Memberikan garis pembatas pada tabel.
• <thead> : Pembungkus header (kepala tabel).
• <tbody> : Pembungkus isi tabel.
• <tr> : Tag pembuat baris pada tabel, ini berisi <th> atau <td>.
• <th> : Tempat memasukan teks judul kolom (header).
• <td> : Tempat menuliskan teks isi tabel.

Mendesain Tabel dengan CSS

Tabel sederhana seringkali terlihat usang. Untuk membuatnya lebih menarik, kamu bisa menambahkan kode CSS Berikut ini:

  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }

Penjelasan Kode:

• border-collapse: collapse;: Menghilangkan jarak antara garis tabel.
• padding: 8px;: Memberikan ruang di dalam setiap sel tabel.
• text-align: center;: Membuat teks tabel rata tengah. Ganti dengan left untuk rata kiri atau right agar menjadi rata kanan.
• background-color: Memberikan warna background pada header tabel.

Membuat Tabel Menjadi Responsif

Untuk mmembuat tabel yang dapat beradaptasi dengan layar kecil seperti handphone, kamu bisa menggunakan kode CSS berikut dan memanggilnya dengan tag div :

  .eproRs {
    overflow-x: auto;
  }
  table {
    min-width: 150px;
  }

Penjelasan Kode:

• overflow-x: auto; : Membungkus tabel agar bisa digulir ke samping jika layar lebih kecil dari ukuran tabel.
• min-width: 150px; : Menetapkan lebar minimum tabel agar tetap rapi di layar besar.

Contoh penerapkan CSS responsif di atas dengan tag div bisa sebagai berikut:

<div class="eproRs">
<table border="1" cellspacing="0" cellpadding="5">
  <thead>
    <tr><!-- Baris 1 (Digunakan untuk Header kolom) -->
      <th>Header kolom 1</th>
      <th>Header kolom 2</th>
      <th>Header kolom 3</th>
    </tr>
  </thead>
  <tbody>
    <tr><!--  Baris 2 -->
      <td>Isi kolom 1</td>
      <td>Isi kolom 2</td>
      <td>Isi kolom 3</td>
    </tr>
    <tr><!--  Baris 3 -->
      <td>Isi kolom 1</td>
      <td>Isi kolom 2</td>
      <td>Isi kolom 3</td>
    </tr>
  </tbody>
</table>

Demo

Keimpulan

Membuat tabel di Blogger memerlukan sedikit penyesuaian dengan HTML dan CSS. Dengan memahami kode dan menambahkan desain atau fitur responsif, tabel menjadi lebih menarik dan profesional.

---