tabel html

Belajar HTML #10: Tabel HTML, Struktur Tabel, Atribut dan Contoh

Tabel dalam HTML digunakan untuk menyusun dan menampilkan data dalam format yang terorganisir dan mudah dibaca. Tabel sangat berguna ketika kita perlu menyajikan informasi yang terdiri dari baris dan kolom, seperti data keuangan, hasil penelitian, daftar produk atau jadwal. Dengan tabel HTML, kita dapat menyusun data secara sistematis, sehingga pengguna dapat dengan mudah memahami hubungan antar-data yang disajikan.

Pada artikel ini, kita akan belajar secara mendalam mengenai tabel HTML, mulai dari dasar pembuatan tabel, atribut-atribut penting yang dapat digunakan untuk memodifikasi tampilan dan fungsi tabel, hingga praktik terbaik untuk memastikan tabel HTML yang kita buat berfungsi dengan baik di semua perangkat dan mudah diakses.

Pengertian Tabel HTML

Tabel dalam HTML dibuat menggunakan elemen <table>. Elemen ini digunakan untuk mengatur dan menampilkan data dalam baris dan kolom. Setiap tabel terdiri dari elemen-elemen dasar seperti baris, kolom, serta sel yang berisi data.

Struktur Dasar Tabel HTML

Struktur dasar dari tabel HTML adalah sebagai berikut:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

Dalam contoh di atas:

  • <table>: Tag ini mendefinisikan tabel.
  • <tr> (table row): Tag ini digunakan untuk mendefinisikan baris dalam tabel.
  • <th> (table header): Tag ini digunakan untuk mendefinisikan sel di dalam baris header, biasanya digunakan untuk menampilkan judul kolom.
  • <td> (table data): Tag ini digunakan untuk mendefinisikan sel data dalam tabel.

Elemen-Elemen Tabel HTML

Tabel HTML terdiri dari beberapa elemen yang berperan penting dalam menyusun struktur tabel secara keseluruhan. Berikut adalah elemen-elemen utama yang digunakan dalam pembuatan tabel:

  1. <table>: Elemen ini adalah pembungkus utama yang menandai bahwa konten di dalamnya adalah tabel.
  2. <tr> (table row): Elemen ini digunakan untuk membuat baris di dalam tabel.
  3. <th> (table header): Digunakan untuk membuat sel header, yang biasanya ada di bagian atas atau di samping tabel.
  4. <td> (table data): Elemen ini adalah sel yang berisi data dalam tabel.
Baca juga :   JSON Adalah: Pengertian, Jenis dan Cara Menggunakan

Selain elemen-elemen dasar tersebut, ada juga elemen tambahan yang dapat digunakan untuk meningkatkan keterbacaan dan aksesibilitas tabel:

  • <thead>: Digunakan untuk mengelompokkan baris header (biasanya bagian atas tabel).
  • <tbody>: Digunakan untuk mengelompokkan baris yang berisi data utama tabel.
  • <tfoot>: Digunakan untuk mengelompokkan baris footer atau bagian bawah tabel.

Contoh penggunaan elemen-elemen ini dalam sebuah tabel:

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Usia</th>
      <th>Alamat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ani</td>
      <td>25</td>
      <td>Jakarta</td>
    </tr>
    <tr>
      <td>Budi</td>
      <td>30</td>
      <td>Bandung</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Data diambil pada 2024</td>
    </tr>
  </tfoot>
</table>

Dalam contoh di atas:

  • <thead> digunakan untuk mengelompokkan baris header.
  • <tbody> digunakan untuk mengelompokkan data utama.
  • <tfoot> digunakan untuk menambahkan footer di bagian bawah tabel.

Atribut Penting dalam Tabel HTML

1. Atribut border

Atribut border digunakan untuk menentukan apakah tabel akan memiliki garis batas (border) di sekitar sel-selnya. Secara default, tabel tidak memiliki garis batas. Nilai dari atribut border adalah angka yang menunjukkan ketebalan garis batas dalam piksel.

Contoh:

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Siti</td>
    <td>30</td>
  </tr>
</table>

Pada contoh di atas, atribut border=”1″ menampilkan garis batas setebal 1 piksel di sekitar sel-sel tabel.

2. Atribut cellpadding

Atribut cellpadding mengatur jarak antara isi sel (konten) dan tepi dalam sel (padding). Nilai atribut ini adalah angka dalam piksel yang menunjukkan seberapa besar jarak yang diinginkan.

Contoh:

<table border="1" cellpadding="10">
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Siti</td>
    <td>30</td>
  </tr>
</table>

Pada contoh di atas, atribut cellpadding=”10″ menambahkan jarak 10 piksel di antara konten sel dengan tepi dalam sel.

3. Atribut cellspacing

Atribut cellspacing mengatur jarak antara sel-sel dalam tabel. Nilai atribut ini juga dalam satuan piksel.

Baca juga :   Cara Membuat Hak Akses User di MySQL yang Harus Diketahui

Contoh:

<table border="1" cellspacing="10">
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Siti</td>
    <td>30</td>
  </tr>
</table>

Dengan cellspacing=”10″, setiap sel pada tabel di atas akan memiliki jarak 10 piksel satu sama lain.

4. Atribut colspan

Atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu sel. Ini sangat berguna untuk menciptakan tabel yang lebih fleksibel, terutama saat membuat header atau subkategori dalam tabel.

Contoh:

<table border="1">
  <tr>
    <th colspan="2">Data Diri</th>
  </tr>
  <tr>
    <td>Nama</td>
    <td>Usia</td>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
  </tr>
</table>

Pada contoh di atas, atribut colspan=”2″ pada header menggabungkan dua kolom menjadi satu sel di baris pertama, yang menampilkan “Data Diri” sebagai judul untuk dua kolom.

5. Atribut rowspan

Atribut rowspan digunakan untuk menggabungkan beberapa baris menjadi satu sel. Ini digunakan ketika Anda ingin membuat sel yang memanjang ke bawah (vertikal) dalam beberapa baris.

Contoh:

<table border="1">
  <tr>
    <td rowspan="2">Nama</td>
    <td>Usia</td>
  </tr>
  <tr>
    <td>Alamat</td>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
  </tr>
</table>

Pada contoh di atas, atribut rowspan=”2″ pada sel “Nama” menggabungkan dua baris pertama sehingga membuat sel tersebut memanjang secara vertikal.

6. Atribut align

Atribut align digunakan untuk menentukan perataan teks dalam sel secara horizontal. Atribut ini dapat memiliki nilai left, center atau right untuk mengatur apakah teks akan diratakan ke kiri, tengah atau kanan.

Contoh:

<table border="1">
  <tr>
    <th align="center">Nama</th>
    <th align="right">Usia</th>
  </tr>
  <tr>
    <td align="center">Andi</td>
    <td align="right">25</td>
  </tr>
</table>

Dalam contoh di atas, teks di kolom pertama (Nama) akan diratakan ke tengah, sementara teks di kolom kedua (Usia) diratakan ke kanan.

7. Atribut valign

Atribut valign digunakan untuk menentukan perataan teks secara vertikal dalam sel. Nilai yang bisa digunakan adalah top (atas), middle (tengah) dan bottom (bawah).

Contoh:

<table border="1" height="100">
  <tr>
    <td valign="top">Atas</td>
    <td valign="middle">Tengah</td>
    <td valign="bottom">Bawah</td>
  </tr>
</table>

Dalam contoh ini, teks pada sel pertama akan berada di atas, teks pada sel kedua berada di tengah dan teks pada sel ketiga berada di bagian bawah sel.

8. Atribut width dan height

Atribut width dan height digunakan untuk menentukan lebar dan tinggi dari tabel atau sel dalam tabel. Nilai bisa berupa satuan piksel (px) atau persentase (%).

Baca juga :   Apa itu Firebase? Fitur yang Dimiliki dan Cara Menggunakannya

Contoh:

<table border="1" width="100%" height="200">
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
  </tr>
</table>

Dalam contoh di atas, tabel akan memiliki lebar 100% dari layar dan tinggi tabel diatur menjadi 200 piksel.

9. Atribut caption

Atribut caption digunakan untuk memberikan judul atau keterangan pada tabel. Elemen <caption> ditempatkan tepat di bawah elemen <table>.

Contoh:

<table border="1">
  <caption>Data Mahasiswa</caption>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
  </tr>
</table>

Judul “Data Mahasiswa” akan muncul di bagian atas tabel.

10. Atribut summary (Deprecated)

Atribut summary dulu digunakan untuk memberikan ringkasan deskriptif tentang tabel, terutama untuk membantu alat bantu aksesibilitas seperti pembaca layar. Namun, atribut ini telah dihapus dari standar HTML5 dan penggunaannya tidak lagi dianjurkan. Sebagai gantinya, sebaiknya menggunakan elemen <caption> atau atribut aria-label untuk mendeskripsikan tabel.

Praktik Terbaik dalam Penggunaan Tabel HTML

Berikut adalah beberapa praktik terbaik yang dapat diterapkan saat menggunakan tabel dalam HTML:

  1. Gunakan Tabel untuk Data, Bukan untuk Tata Letak: Tabel sebaiknya hanya digunakan untuk menyajikan data yang terstruktur, bukan untuk tata letak halaman web. Gunakan CSS Grid atau Flexbox untuk tata letak.
  2. Tambahkan Atribut Aksesibilitas: Tabel yang berisi banyak data sebaiknya dilengkapi dengan atribut aksesibilitas seperti aria-label atau scope pada elemen header (<th>). Ini membantu pembaca layar dalam mengenali hubungan antara header dan data di dalam tabel.
  3. Gunakan CSS untuk Styling: Hindari penggunaan atribut border, cellpadding dan cellspacing secara langsung di dalam tabel. Sebaliknya, gunakan CSS untuk memberikan styling yang lebih fleksibel dan mudah disesuaikan.
  4. Pastikan Tabel Responsif: Tabel yang sangat besar atau kompleks sebaiknya disesuaikan untuk perangkat mobile agar tidak memengaruhi pengalaman pengguna.

Kesimpulan

Pada pembelajaran kita diatas dapat disimpulkan bahwa Tabel dalam HTML merupakan cara yang efektif untuk menampilkan data yang terstruktur dalam bentuk baris dan kolom. Dengan memahami elemen-elemen dasar seperti <table>, <tr>, <th> dan <td>, serta atribut dan elemen tambahan seperti colspan, rowspan dan <thead>, kita dapat membuat tabel yang rapi dan mudah dibaca.

Dalam pengembangan web modern, sangat penting untuk memastikan bahwa tabel juga responsif dan mengikuti praktik terbaik untuk aksesibilitas dan kinerja.

Artikel ini merupakan bagian seri artikel BELAJAR HTML dari KantinIT.com dan jika ada ide topik yang mau kami bahas silahkan komen di bawah ya..