Panduan Lengkap Cara Membuat Tabel di Postingan Blog

Hingga saat ini, salah satu keterbatasan yang terdapat pada post editor blogger adalah tidak tersedianya toolbar untuk membuat Tabel. Untuk membuat tabel, kita harus membuat kode HTML secara manual.


HTML Tabel Sederhana

      
<table>
  <tbody>
    <tr>
      <td>Cell baris 1, kolom 1</td>
      <td>Cell baris 1, kolom 2</td>
    </tr>
    <tr>
      <td>Cell baris 2, kolom 1</td>
      <td>Cell baris 2, kolom 2</td>
    </tr>
  </tbody>
</table>
Cell baris 1, kolom 1 Cell baris 1, kolom 2
Cell baris 2, kolom 1 Cell baris 2, kolom 2

INFO: Tampilan akan mengikuti CSS tema yang digunakan.


Membuat Tabel di Postingan

  • Pada post editor, beralih ke Tampilan HTML dan letakkan HTML Table pada posisi yang dikehendaki - (Lihat).


Lebih Jauh Tentang HTML Tabel

Keterangan HTML Table Sederhana Berikut adalah keterangan untuk beberapa tag HTML yang digunakan pada kode HTML Tabel Sederhana di atas:

table Tag untuk membuat tabel
tbody Tag yang mendefinisikan tubuh tabel. Khususnya pada antarmuka post editor blogger, tag ini bersifat optional (tidak harus digunakan). Dengan kata lain, tanpa tag tbody sekalipun, tabel tetap dapat ditampilkan dengan benar. Jika tag ini tidak didefinisikan, sistem blogger akan secara otomatis melengkapi tag tbody ini ketika post diterbitkan
tr Tag untuk membuat baris baru pada tabel. Sebuah tabel setidaknya terdiri dari satu baris
td Tag untuk membuat cell baru pada tabel. Sebuah baris tabel setidaknya terdiri dari satu cell. Tag ini selalu digunakan di dalam tag tr. Jumlah kolom pada tabel sama dengan jumlah cell per baris.


Menggunakan Tag TH

Pada HTML Tabel Sederhana, semua cell didefinisikan dengan menggunakan tag td. Terdapat dua jenis cell yaitu td (Table Data) dan th (Table Header). Table Header digunakan untuk memberikan label pada baris atau kolom tertentu. Berikut adalah contoh penggunaan Table Header.

TH sebagai kolom 
      
<table>
  <tbody>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
    <tr>
      <td>Mawar</td>
      <td>17</td>
    </tr>
    <tr>
      <td>Melati</td>
      <td>19</td>
    </tr>
  </tbody>
</table>
Nama Umur
Mawar 17
Melati 19


TH sebagai baris 
      
<table>
  <tbody>
    <tr>
      <th>Nama</th>
      <td>Mawar</td>
    </tr>
    <tr>
      <th>Umur</th>
      <td>17</td>
    </tr>
  </tbody>
</table>
Nama Mawar
Umur 17


Menggabungkan cell antar baris dan kolom

Kita bisa menggabungkan (Marge) cell antar baris atau kolom dengan menggunakan atribut rowspan (baris) dan colspan (kolom) pada tag td atau tg.

Contoh penggunaan rowspan 
      
<table>
  <tbody>
    <tr>
      <td rowspan='2'>Baris 1-2, kolom 1</td>
      <td>Baris 1, kolom 2</td>
    </tr>
    <tr>
      <td>Baris 2, kolom 2</td>
    </tr>
    <tr>
      <td>Baris 3, kolom 1</td>
      <td>Baris 3, kolom 2</td>
    </tr>
  </tbody>
</table>
Baris 1-2, kolom 1 Baris 1, kolom 2
Baris 2, kolom 2
Baris 3, kolom 1 Baris 3, kolom 2
Pada HTML, cell ke-1 pada baris ke-1 memiliki atribut rowspan dengan nilai 2. Ini artinya, cell tersebut akan mengambil ruang (space) sebanyak 2 baris. Oleh karena itu, hanya satu cell didefinisikan pada baris ke-2 (satu space lagi telah diambil oleh cell dengan rowspan).


Contoh penggunaan colspan 
      
<table>
  <tbody>
    <tr> 
      <th>Baris 1, kolom 1</th>
      <th colspan='2'>Baris 1, kolom 2-3</th>
    </tr>
    <tr>
      <td>Baris 2, kolom 1</td>
      <td>Baris 2, kolom 2</td>
      <td>Baris 2, kolom 3</td>
    </tr>
    <tr>
      <td>Baris 3, kolom 1</td>
      <td>Baris 3, kolom 2</td>
      <td>Baris 2, kolom 3</td>
    </tr>
  </tbody>
</table>
Baris 1, kolom 1 Baris 1, kolom 2-3
Baris 2, kolom 1 Baris 2, kolom 2 Baris 2, kolom 3
Baris 3, kolom 1 Baris 3, kolom 2 Baris 2, kolom 3
Pada HTML, cell ke-2 baris ke-1 memiliki atribut colspan dengan nilai 2. Ini artinya, cell tersebut akan mengambil ruang (space) sebanyak 2 kolom. Oleh karena itu, cell ke-3 pada baris ke-1 tidak didefinisikan (space ke-3 telah diambil/dibuat oleh colspan).
Komentar