Kodealgo

Tabel HTML

Untuk menambahkan rincian data yang kompleks di halaman HTML kadang kita perlu menyajikannya dalam format tabel.

Dengan menggunakan tabel, data yang kita sajikan akan lebih mudah dibaca dan lebih terstruktur.

Tapi, membuat tabel memang tak sesederhana membuat elemen HTML yang lainnya, kita memerlukan beberapa tag untuk membuat tabel yang utuh.

Meskipun demikian Anda tak perlu khawatir, setelah mengikuti panduan ini Anda akan bisa membuat tabel yang menarik sesuai kebutuhan.

Mari kita pelajari lebih lanjut.

  1. Bagian-bagian Tabel
  2. Cara Membuat Tabel HTML
    1. Tabel Sederhana
    2. Tabel dengan <thead>, <tbody>, dan <tfoot>
    3. Tabel dengan Judul <caption>
  3. Menggabungkan Sel
  4. Atribut Tabel yang Tidak Lagi Didukung
  5. Mengatur Lebar Tabel
  6. Menambahkan Border Tabel
  7. Mewarnai Tabel
  8. Mengatur Perataan Teks di Dalam Tabel
  9. Menambahkan Elemen Lain ke Sel

Bagian-bagian Tabel

Bagi-bagian Tabel

Sebelum membuat tabel mari kita pelajari bagian-bagian tabel.

Berikut tiga bagian penting pada tabel yang perlu diketahui:

  • Sel: kotak di dalam tabel yang berfungsi untuk menampung data teks.
  • Kolom: sel yang tersusun secara vertikal (dari atas ke bawah), misalnya gambar tabel di atas memiliki empat kolom.
  • Baris: sel yang tersusun secara horizontal (dari kiri ke kanan), misalnya gambar tabel di atas memiliki enam kolom.

Cara Membuat Tabel HTML

Untuk membuat tabel di HTML ada beberapa tag yang bisa kita gunakan, diantaranya:

  • <table>: tag utama yang merepresentasikan data tabular.
  • <thead>: kepala tabel (table head).
  • <tbody>: pembungkus badan tabel (table body).
  • <tfoot>: pembungkus kaki tabel (table footer).
  • <tr>: baris sel (table row).
  • <td>: sel table yang menampung data (table data).
  • <th>: untuk membuat sel sebagai kepala tabel (table head).
  • <caption>: caption atau judul tabel.

Tabel Sederhana

Untuk membuat tabel yang sederhana kita tidak perlu menggunakan semua tag yang disediakan, cukup dengan tag <table>, <tr>, <th>, dan <td>.

Contoh:

<table>
  <tr>
    <th>Nama</th>
    <th>Nilai</th>
  </tr>
  <tr>
    <td>Irfan</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Eriska</td>
    <td>85</td>
  </tr>
</table>

Hasil:

Table HTML Sederhana

Yang perlu diperhatikan di sini adalah penggunaan tag <th>, gunakan tag tersebut untuk sel yang mendefinisikan judul sebuah data.

Contoh di atas kita menggunakan tag <th> pada sel "nama" karena data kolom yang ada di bawahnya berisi nama-nama siswa, begitu pula dengan "nilai".

Dengan menggunakan tag <th> browser tau bahwa itu adalah nama atau judul data, oleh karena itu hurufnya ditebalkan.

Tampilan tabel default mungkin terlalu sederhana, mari kita tambahkan CSS untuk memberikan pembatas antar sel.

Tulis CSS bawah (dari tag <style> pembuka sampai penutup) di dalam tag <head>.

Contoh:

<style>
  table,
  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
  }
</style>

<table>
  <tr>
    <th>Nama</th>
    <th>Nilai</th>
  </tr>
  <tr>
    <td>Irfan</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Eriska</td>
    <td>85</td>
  </tr>
</table>

Hasil:

Tabel HTML dengan Border

Tabel dengan <thead>, <tbody>, dan <tfoot>

Tag <thead>, <tbody>, dan <tfoot> bersifat opsional, boleh ditulis boleh tidak.

Tapi jika kita ingin membuat tabel yang lebih terstruktur, kita bisa menggunakan tag tersebut.

Mari kita terapkan ketiga tag ini pada contoh tabel sebelumnya.

Contoh:

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Nilai</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Irfan</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Eriska</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>165</td>
    </tr>
  </tfoot>
</table>

Hasil:

Tabel HTML dengan thead tbody dan tfoot

Tabel dengan Judul <caption>

HTML juga menyediakan tag khusus untuk membuat judul tabel, <caption>. Sama seperti ketiga tag sebelumnya, tag ini bersifat opsional.

Tag ini ditulis di dalam tag <table> sejajar dengan <thead>, <tbody>, <tfoot>, atau <tr>.

Contoh:

<table>
  <caption>
    Nilai Siswa
  </caption>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Nilai</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Irfan</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Eriska</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>165</td>
    </tr>
  </tfoot>
</table>

Hasil:

Tabel HTML dengan Judul

Menggabungkan Sel

Saat membuat tabel kadang kita perlu membuat sel yang mencakup beberapa baris atau kolom.

Untuk mengatasi hal tersebut, kita bisa menggunakan atribut berikut:

  • colspan: rentang kolom.
  • rowspan: rentang baris.
Ilustrasi Colspan dan Rowspan

Gunakan colspan ketika Anda ingin membuat sel yang mencakup beberapa kolom.

Gunakan rowspan ketika Anda ingin membuat sel yang mencakup beberapa baris.

Contoh:

<table>
  <tr>
    <th rowspan="2">Nama</th>
    <th colspan="3">Nilai</th>
  </tr>
  <tr>
    <th>Tugas</th>
    <th>UTS</th>
    <th>UAS</th>
  </tr>
  <tr>
    <td>Irfan</td>
    <td>80</td>
    <td>85</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Eriska</td>
    <td>90</td>
    <td>85</td>
    <td>80</td>
  </tr>
</table>

Hasil:

Tabel HTML dengan colspan dan rowspan

Atribut Tabel yang Tidak Lagi Didukung

Ada beberapa atribut tabel yang tidak lagi didukung, tapi masih sering digunakan. Berikut daftar atribut tabel yang tidak lagi didukung:

  • abbr
  • align
  • axios
  • gbcolor
  • char
  • height
  • width
  • scope

Jangan gunakan atribut di atas, sebagai gantinya gunakan CSS.

Mengatur Lebar Tabel

Untuk mengatur atau menentukan lebar tabel, kita bisa menggunakan CSS width dengan nilai relatif seperti persentase atau absolut seperti piksel.

Contoh:

<table style="width: 400px">
  <tr>
    <th>Nama</th>
    <th>Nilai</th>
  </tr>
  <tr>
    <td>Irfan</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Eriska</td>
    <td>90</td>
  </tr>
</table>

Hasil:

Menyesuaikan Lebar Tabel

Menambahkan Border Tabel

Untuk menambahkan border pada tabel, kita sebetulnya bisa menggunakan atribut border.

Tapi, karena atribut tersebut tidak lagi didukung kita bisa menggunakan CSS border sebagai gantinya.

Agar kita tidak perlu menambahkan atribut style ke setiap tag, kita bisa menulis CSS di dalam tag <head>.

CSS ini nantinya akan mentarget tag-tag tabel yang ingin diberi border, dalam hal ini <table>, <th>, dan <td> .

Contoh:

<style>
  table,
  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
  }
</style>

<table>
  <tr>
    <th>Nama</th>
    <th>Nilai</th>
  </tr>
  <tr>
    <td>Irfan</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Eriska</td>
    <td>90</td>
  </tr>
</table>

Hasil:

Tabel HTML dengan Border

Mewarnai Tabel

Untuk mewarnai tabel kita bisa menggunakan atribut bgcolor, tapi atribut ini tidak lagi didukung.

Sebagai gantinya, gunakan CSS background-color di dalam atribut style. Jika Anda ingin mewarnai seluruh tabel tulis atribut ini di dalam tag <table>.

Contoh:

<table>
  <tr style="background-color: goldenrod">
    <th>Nama</th>
    <th>Nilai</th>
  </tr>
  <tr>
    <td>Irfan</td>
    <td>80</td>
  </tr>
  <tr>
    <td style="background-color: orchid">Eriska</td>
    <td>90</td>
  </tr>
</table>

Hasil:

Tabel HTML Berwarna

Mengatur Perataan Teks di Dalam Tabel

Agar tabel terlihat lebih rapi, kadang kita juga perlu menyesuaikan perataan teks di dalam tabel agar berada tepat ditengah, kiri, atau kanan sel.

Kita sebetulnya bisa menggunakan atribut align dengan nilai center, left, atau right.

Tapi, karena tidak lagi didukung kita bisa menggunakan CSS text-align sebagai gantinya.

Agar hasilnya lebih terlihat, mari kita kombinasikan dengan width.

Contoh:

<table style="text-align: center; width: 400px">
  <tr>
    <th>Nama</th>
    <th>Nilai</th>
  </tr>
  <tr>
    <td>Irfan</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Eriska</td>
    <td>90</td>
  </tr>
</table>

Hasil:

Tabel HTML Berwarna

Menambahkan Elemen Lain ke Sel

Selain teks, kita juga bisa memasukkan elemen HTML yang lain ke dalam sel tabel, misalnya gambar dan link.

Contoh:

<table style="text-align: center; width: 400px">
  <tr>
    <th>Gambar</th>
    <th>Nama</th>
    <th>Link</th>
  </tr>
  <tr>
    <td>
      <img
        width="70"
        src="https://cdn.pixabay.com/photo/2014/10/27/19/18/baby-shoes-505471_960_720.jpg"
      />
    </td>
    <td>Sepatu</td>
    <td>
      <a
        href="https://pixabay.com/photos/baby-shoes-shoes-footwear-fashion-505471/"
      >
        link
      </a>
    </td>
  </tr>
</table>

Hasil:

Tabel dengan Gambar dan Link
« Sebelumnya
ListSelanjutnya »
Video