Table HTML adalah elemen HTML yang digunakan untuk membuat tabel data atau informasi dalam bentuk baris dan kolom. Dalam artikel ini, kita akan membahas secara lengkap tentang table HTML, mulai dari sintaks dasar hingga beberapa atribut dan properti yang bisa digunakan untuk mengubah tampilan tabel.
Sintaks Dasar
Untuk membuat tabel HTML, kita dapat menggunakan tag <table> yang digunakan sebagai kontainer utama dari tabel, kemudian kita dapat menambahkan tag <tr> sebagai kontainer baris dan tag <td> sebagai kontainer kolom. Berikut adalah contoh sintaks dasar untuk membuat tabel HTML:
1 2 3 4 5 6 7 8 9 10 | <table> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table> |
Kode di atas akan menghasilkan tabel sederhana dengan dua baris dan dua kolom.
Atribut border, cellspacing, dan cellpadding
Tabel HTML memiliki beberapa atribut yang bisa digunakan untuk mengubah tampilan tabel, di antaranya adalah border, cellspacing, dan cellpadding.
Atribut border digunakan untuk menentukan ketebalan garis pembatas antar sel. Nilai atribut ini bisa diisi dengan angka untuk menentukan ketebalan garis, atau diisi dengan nilai 0 untuk menghilangkan garis pembatas. Contohnya seperti ini:
1 2 3 4 5 6 7 8 9 10 | <table border="1"> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table> |
Atribut cellspacing digunakan untuk menentukan jarak antar sel, sedangkan atribut cellpadding digunakan untuk menentukan jarak antara isi sel dan garis pembatas.
Nilai atribut ini bisa diisi dengan angka untuk menentukan jarak dalam piksel. Contohnya seperti ini:
1 2 3 4 5 6 7 8 9 10 | <table border="1" cellspacing="10" cellpadding="5"> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table> |
Atribut colspan dan rowspan
Atribut colspan dan rowspan digunakan untuk menggabungkan beberapa sel dalam satu baris atau kolom.
Atribut colspan digunakan untuk menggabungkan beberapa kolom dalam satu baris, sedangkan atribut rowspan digunakan untuk menggabungkan beberapa baris dalam satu kolom. Contohnya seperti ini:
1 2 3 4 5 6 7 8 9 10 11 12 | <table border="1"> <tr> <td colspan="2">Baris 1 Kolom 1-2</td> </tr> <tr> <tdrowspan="2">Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> <tr> <td>Baris 3 Kolom 2</td> </tr> </table> |
Kode di atas akan menghasilkan tabel dengan tiga baris dan dua kolom, di mana sel pada baris pertama digabungkan menjadi satu sel yang melintang dua kolom, dan sel pada baris kedua dan ketiga digabungkan menjadi satu sel yang melintang dua baris.
Atribut thead, tbody, dan tfoot
Tabel HTML dapat dibagi menjadi tiga bagian utama: kepala tabel (thead), tubuh tabel (tbody), dan kaki tabel (tfoot). Kepala tabel biasanya berisi judul atau informasi singkat mengenai tabel, tubuh tabel berisi data atau informasi yang ingin ditampilkan dalam tabel, sedangkan kaki tabel biasanya berisi informasi tambahan seperti total atau rata-rata dari data yang ditampilkan.
Untuk membuat bagian-bagian tabel ini, kita dapat menggunakan tag <thead>, <tbody>, dan <tfoot>. Contohnya seperti ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <table border="1"> <thead> <tr> <th>Kolom 1</th> <th>Kolom 2</th> </tr> </thead> <tbody> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>100</td> </tr> </tfoot> </table> |
Kode di atas akan menghasilkan tabel dengan kepala tabel yang berisi dua kolom, tubuh tabel yang berisi dua baris data, dan kaki tabel yang berisi informasi total.
Properti CSS
Selain atribut, kita juga bisa menggunakan properti CSS untuk mengubah tampilan tabel HTML. Beberapa properti CSS yang bisa digunakan antara lain:
border-collapse: digunakan untuk mengatur apakah garis pembatas antar sel digabungkan atau tidak. Nilai collapse akan menggabungkan garis pembatas, sedangkan nilai separate akan memisahkan garis pembatas antar sel. Contohnya
1 2 3 4 5 6 7 8 9 10 | <table style="border-collapse: collapse;"> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table> |
text-align: digunakan untuk mengatur posisi teks dalam sel. Nilai left akan mengatur posisi teks ke kiri, nilai right akan mengatur posisi teks ke kanan, sedangkan nilai center akan mengatur posisi teks ke tengah. Contohnya seperti ini:
1 2 3 4 5 6 7 | <table> <tr> <td style="text-align: left;">Kolom 1</td> <td style="text-align: right;">Kolom 2</td> <td style="text-align: center;">Kolom 3</td> </tr> </table> |
background-color: digunakan untuk mengatur warna latar belakang sel. Contohnya seperti ini:
1 2 3 4 5 6 7 8 9 10 | <table> <tr> <td style="background-color: red;">Baris 1 Kolom 1</td> <td style="background-color: blue;">Baris 1 Kolom 2</td> </tr> <tr> <td style="background-color: green;">Baris 2 Kolom 1</td> <td style="background-color: yellow;">Baris 2 Kolom 2</td> </tr> </table> |
font-size: digunakan untuk mengatur ukuran font teks dalam sel. Contohnya seperti ini:
1 2 3 4 5 6 7 8 9 10 | <table> <tr> <td style="font-size: 12px;">Baris 1 Kolom 1</td> <td style="font-size: 16px;">Baris 1 Kolom 2</td> </tr> <tr> <td style="font-size: 20px;">Baris 2 Kolom 1</td> <td style="font-size: 24px;">Baris 2 Kolom 2</td> </tr> </table> |
Itulah beberapa hal yang perlu Anda ketahui tentang tabel HTML. Dengan menguasai dasar-dasar tabel HTML, Anda dapat membuat tabel yang informatif dan menarik dengan mudah. Selamat mencoba!
0 comments