HTML Dasar: Belajar Membuat Table

Dengan memanfaatkan tabel, kita bisa menampilkan data kepada user dalam bentuk kolom dan baris.

Seperti ini:

Mari kita perhatikan tabel di atas.

Tabel di atas memiliki:

• 4 buah kolom (No, Nama, Jenis Kelamin, dan Asal).
• 7 buah baris (baris pertama dihitung 1)
• dan memiliki 28 sel (4 kolom x 7 baris).

Di dalam HTML, kita bisa membuat tabel dengan berbagai macam konfigurasi dan kustomisasinya. Seperti memberi warna, mengatur jarak, panjang kolom, mengatur border, dan lain sebagainya.

Kurang lebih pengaturan tabel di HTML sama saja seperti pengaturan tabel di dalam aplikasi pemrosesan teks semisal Microsoft Word, Google Docs, Libre Office dan lain sebagainya.

Cara Membuat Tabel di HTML

Untuk membuat tabel di dalam HTML, kita membutuhkan tag-tag berikut:

1. Tag <table>
2. Tag <thead>
3. Tag <tbody>
4. Tag <tfoot>

Tag <table> sebagai kontainer.

Sedangkan tag <thead> sebagai tempat kita meletakkan nama kolom (baris paling atas sendiri).

Dan tag <tbody> adalah tempat kita menampilkan data.

Dan yang terakhir adalah tag <tfoot> untuk membuat “footer” atau bagian bawah dari suatu tabel.

4 tag di atas adalah tag yang mendefinisikan struktur dasar untuk setiap bagian dari tabel.

Sedangkan untuk mendefinikan baris dan kolom, kita membutuhkan tag-tag berikut:

• Tag <tr> (table row) untuk mendefinisikan tiap baris pada tabel.
• Tag <td> (table data) untuk mendefinisikan tiap sel pada tabel.
• Tag <th> (table head) untuk mendefinisikan tiap nama kolom pada tabel.

Perhatikan contoh berikut:

<table>
  <!-- Bagian kepala tabel -->
  <thead>
    <tr>
      <th>Baris</th>
      <th>Kolom</th>
    </tr>
  </thead>
  <!-- Bagian body tabel -->
  <tbody>
    <tr>
      <td>Sel 1</td>
      <td>Sel 2</td>
    </tr>
    <tr>
      <td>Sel 3</td>
      <td>Sel 4</td>
    </tr>
    <tr>
      <td>Sel 5</td>
      <td>Sel 6</td>
    </tr>
  </tbody>
</table>

Kode HTML di atas akan menghasilkan keluaran seperti berikut:

Memberi Garis (Border)

Pada output di atas, tabel yang kita buat tidak memiliki border atau garis.

Kita bisa menambah dan mengatur ukuran baris pada tabel dengan menambahkan atribut border.

Pada kode HTML sebelumnya, coba ubah tag pembuka tabel menjadi seperti ini:

<table border="1">
  ...
</table>

Kode di atas akan membuat tabel kita memiliki border dengan ukuran 1 piksel.

Berikut ini hasil keluarannya:

Lebih asik bukan?

Tapi masih ada yang kurang, tabelnya terlalu mepet!

Memberi Jarak Antar Sel dan Konten (padding)

Agar tabelnya tidak terlalu mepet, kita bisa memberikan jarak dengan menambahkan atribut cellpadding pada tag <table>.

Ubah kode HTML sebelumnya menjadi:

<table border="1" cellpadding="5">
  ...
</table>

Atribut cellpadding="12" di atas akan memberi instruksi agar kepada browser agar memberikan jarak (padding) 5px kepada tabel kita.

Berikut ini hasil keluarannya:

Sekarang tabelnya sudah terlihat lebih lega.

Memberi Jarak Antar Satu Sel dan Sel Lain (Cell Spacing)

Selain mengatur jarak antara konten dan sel menggunakan atribut cellpadding, kita juga bisa melakukan hal sebaliknya yaitu memberi jarak antar satu sel dengan sel lainnya menggunakan atribut cellspacing.

Perhatikan contoh berikut:

<h3>Tanpa Cell Spacing</h3>

<table border="1" cellpadding="5">
  ...
</table>

<h3>Dengan Cell Spacing</h3>

<table border="1" cellpadding="5" cellspacing="10">
  ...
</table>

<h3>Cell Spacing 0</h3>

<table border="1" cellpadding="5" cellspacing="0">
  ...
</table>

Hasil keluaran:

Bagian Footer Table

Berikutnya kita bisa menambahkan footer pada suatu table dengan menambahkan tag <tfoot>.

Tag <tfoot> hampir sama dengan tag <thead>, hanya saja ia ditempatkan di bagian paling bawah.

Coba ubah kode table sebelumnya menjadi seperti ini:

<table border="1" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

Hasil keluaran:

Mengatur Panjang Tabel

Berikutnya kita bisa memanfaatkan atribut width untuk mengatur panjang tabel.

Kita bisa mengaturnya dengan berbagai macam satuan semisal pixel, atau juga bisa menggunakan persentase.

Berikut ini contoh mengubah tabel dengan atribut width:

<table border="1" width="100%" cellpadding="5" cellspacing="0">
  ...
  <tfoot>
    <tr>
      <th>Total Sel Pada Body:</th>
      <td>6 Sel</td>
    </tr>
  </tfoot>
</table>

Hasil keluaran:

Menggabungkan Sel

Berikutnya kita bisa melakukan merge cells pada tabel. Ia merupakan teknik menggabungkan dua atau lebih sel menjadi satu.

Ada dua tipe penggabungan sel pada tabel HTML:

1. Penggabungan kolom dengan colspan.
2. Penggabungan baris dengan rowspan.

Colspan

Dengan atribut colspan, kita akan mengubah tabel seperti ini:

Menjadi seperti ini:

Berikut ini kode programnya sebelum colspan:

<table>
  <thead>
    <tr>
      <th>Nama</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>Prakarya</td>
    </tr>
    <tr>
      <td>Andi</td>
      <td>Susilo</td>
    </tr>
  </tbody>
</table>

Dan setelah colspan:

<table>
  <thead>
    <tr>
      <th colspan="2">Nama</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  ...
</table>

Rowspan

Sedangkan dengan atribut rowspan, kita bisa mengubah tabel seperti ini:

Menjadi seperti ini:

Kode program asli sebelum rowspan:

<table>
  <tbody>
    <tr>
      <td>4</td>
      <th>x</th>
      <td>5</td>
      <th>=</th>
      <td>20</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>25</td>
    </tr>
    <tr>
      <td>6</td>
      <td>5</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Kode program asli setelah pakai rowspan:

<style>
  th {
    vertical-align: middle;
  }
</style>

<table>
  <tbody>
    <tr>
      <td>4</td>
      <th rowspan="3">x</th>
      <td>5</td>
      <th rowspan="3">=</th>
      <td>20</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>25</td>
    </tr>
    <tr>
      <td>6</td>
      <td>5</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Pada kode di atas kita menambahkan style vertical-align: middle; agar teks x dan = diletakkan pada tengah sel secara vertikal.

Gabungan Antara Rowspan dan Colspan

Berikutnya kita bisa membuat tabel yang lebih kompleks lagi dengan menggabungkan antara rowspan dan colspan.

Sehingga tabel yang awalnya terlihat seperti ini:

Menjadi seperti ini:

Kode program dari tabel yang kedua adalah seperti berikut:

<table>
  <thead>
    <tr>
      <th colspan="2">Nama</th>
      <th rowspan="2">Asal</th>
    </tr>
    <tr>
      <th>Depan</th>
      <th>Belakang</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>Prakarya</td>
      <td>Makassar</td>
    </tr>
    <tr>
      <td>Andi</td>
      <td>Susilo</td>
      <td>Semarang</td>
    </tr>
    <tr>
      <td>Doni</td>
      <td>Sutrisno</td>
      <td>Jogja</td>
    </tr>
  </tbody>
</table>

Teman-teman bisa menghapus rowspan dan colspan agar tabel di atas terlihat struktur aslinya.

Cara Mewarnai Tabel

Sebenarnya kita bisa memanfaatkan atribut bgcolor pada tag <table>, <td>, mau pun <th> untuk mengubah warna latar dari sebuah tabel, baik secara keseluruhan atau pun pada sel tertentu.

Atau kita juga bisa menggunakan atribut bordercolor untuk mengatur warna border pada tabel.

Tapi, sayangnya, atribut-atribut tersebut sudah deprecated alias kadaluarsa pada HTML5 dan sudah harusnya kita ganti dengan penggunaan CSS.

Berikut ini contoh mewarnai tabel, border, dan mengatur padding dengan CSS:

<style>
  table {
    background-color: #bfffcd;
    color: #2e733d;
    border-collapse: collapse;
  }

  table, th, td {
    border: 1px solid #2e733d;
  }

  table td, table th {
    padding: 10px;
  }
</style>

<table>
  <tbody>
    <tr>
      <th>Nama</th>
      <td>:</td>
      <td>Nurul Huda</td>
    </tr>
    <tr>
      <th>Asal</th>
      <td>:</td>
      <td>Jawa Timur</td>
    </tr>
  </tbody>
</table>

Hasil keluaran dari kode di atas adalah:

Catatan Deprekasi di HTML5

Banyak dari tutorial-tutorial HTML yang beredar di internet masih menyertakan cara-cara yang sudah kadaluarsa. Yang dimaksud kadaluarsa adalah cara-cara tersebut sudah bukan lagi masuk pada spesifikasi HTML5.

Menurut MDN Web Docs, ada beberapa atribut yang berhubungan dengan tabel yang seharusnya sudah tidak dipakai lagi di HTML5.

Berikut ini daftar atribut yang telah deprecated:

• align

  Bisa diganti CSS text-align

• bgcolor

  Bisa diganti dengan CSS background-color

• border

  Bsa diganti dengan CSS border

• cellpadding

  Bisa diganti dengan CSS padding pada <td> atau <th>

• cellspacing

  Bisa diganti dengan CSS border-spacing dan border-collapse

• width

  Bisa diganti dengan CSS width

• frame

• summary

• rules

Kenapa pada tutorial ini kita masih menggunakan beberapa atribut yang sudah kadaluarsa?

Jawabannya adalah: karena kita masih belum masuk pembahasan CSS dan juga agar kita mengenal sejarah sintaks lama HTML.

Kesimpulan

Di dalam dokumen HTML, kita bisa menyajikan data dalam bentuk tabel. Tabel didefinisikan dengan tag <table> sebagai kontainer, lalu tag <thead> untuk bagian header, tag <tbody> untuk bagian body table, dan tag <tfoot> untuk bagian footer.

Sedangkan untuk membuat baris pada tabel kita menggunakan tag <tr>, dan untuk cell-nya kita bisa menggunakan baik tag <td> atau pun tag <th>.

Selain itu, kita juga bisa melakukan merge cells pada HTML dengan memanfaatkan atribut rowspan dan colspan.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang cara menambahkan CSS ke dalam dokumen HTML.

Stay tune!

Referensi

[1] - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table – diakses tanggal 15 Juli 2021