Pada artikel sebelumnya, kita sudah mempelajari Tutorial Belajar HTML 5 Bagian 10 : Fungsi Tag Image di HTML. Selanjutnya, kita akan mempelajari fungsi & atribut tag table di HTML untuk membuat table.
Kode Tabel pada HTML memungkinkan penulis web untuk mengatur data seperti teks, gambar, tautan, tabel lain, dll ke dalam bentuk baris dan kolom sel.
Tabel di HTML dibuat menggunakan tag <table> dimana :
- tag <tr> digunakan untuk membuat baris tabel
- tag <td> digunakan untuk membuat sel data
Secara default, Elemen di dalam kode <td> akan tampil rata kiri.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Tabel HTML </title>
</head>
<body>
<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>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Pada contoh kode di atas, saya menggunakan atribut border pada tag <table> dengan nilai = ”1”, dimana border ini akan mempengaruhi semua sel.
Jika Anda tidak membutuhkan border, maka Anda dapat memberi nilai border = “0”.
Tag Header Tabel
Header tabel dapat dibuat dengan menggunakan tag <th>.
Tag ini akan menggantikan tag <td>, yang digunakan untuk mengisi data ke dalam Sel.
Biasanya, kode tag <td> diletakkan pada baris teratas sebagai judul tabel seperti yang ditunjukkan pada conto kode di bawah ini.
Atau, Anda dapat menggunakan elemen <th> di baris mana pun.
Judul, yang didefinisikan dalam tag <th> secara default akan diletakkan ditengah dan dicetak tebal.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Nama</th>
<th>Gaji</th>
</tr>
<tr>
<td>Herbert S</td>
<td>5000.000</td>
</tr>
<tr>
<td>Mbah WP </td>
<td>3.000.000</td>
</tr>
</table>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut Cellpadding dan Cellspacing
Ada dua atribut yang disebut Selpadding dan Selspacing, atribut ini digunakan untuk mengatur white space (spasi) di sel tabel Anda.
- Atribut Cellspacing bertugas membuat spasi di antara sel tabel
- Atribut Cellpadding bertugas membuat jarak antara batas sel dan konten di dalam sel.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Selpadding</title>
</head>
<body>
<table border = "1" Selpadding = "5" Selspacing = "5">
<tr>
<th>Nama</th>
<th>Gaji</th>
</tr>
<tr>
<td>Herbert S</td>
<td>5.000.000</td>
</tr>
<tr>
<td>Mbah WP</td>
<td>3.000.000</td>
</tr>
</table>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut Colspan dan Rowspan
Atribut colspan digunakan untuk menggabungkan 2 kolom atau lebih menjadi 1 kolom. Sedangkan atribut rowspan digunakan jika Anda ingin menggabungkan 2 baris atau lebih menjadi 1 baris.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
</tr>
<tr>
<td rowspan = "2">Baris 1 Sel 1</td>
<td>Baris 1 Sel 2</td>
<td>Baris 1 Sel 3</td>
</tr>
<tr>
<td>Baris 2 Sel 2</td>
<td>Baris 2 Sel 3</td>
</tr>
<tr>
<td colspan = "3">Baris 3 Sel 1</td>
</tr>
</table>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut Tabel Background
Anda dapat mengatur background tabel menggunakan salah satu dari dua cara berikut :
- Atribut bgcolor – Anda dapat mengatur warna latar belakang untuk seluruh tabel atau hanya untuk satu sel.
- Atribut background – Anda dapat mengatur gambar latar belakang untuk seluruh tabel atau hanya untuk satu sel.
- Anda juga dapat mengatur warna border menggunakan atribut bordercolor.
Catatan – Atribut bgcolor, background, dan bordercolor tidak digunakan lagi di HTML5, untuk pengaturan warna, background diharapkan menggunakan CSS sebagai Bahasa Stylesheet. Jangan gunakan atribut ini.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Kolom 1</th>
<th> Kolom 2</th>
<th> Kolom 3</th>
</tr>
<tr>
<td Barisspan = "2">Baris 1 Sel 1</td>
<td>Baris 1 Sel 2</td>
<td>Baris 1 Sel 3</td>
</tr>
<tr>
<td>Baris 2 Sel 2</td>
<td>Baris 2 Sel 3</td>
</tr>
<tr>
<td colspan = "3"> Baris 3 Sel 1</td>
</tr>
</table>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Tabel Bersarang
Anda dapat menggunakan satu tabel di dalam tabel lain.
Tidak hanya tabel, Anda dapat menggunakan hampir semua tag di dalam tag data tabel <td>.
Contoh :
Berikut adalah contoh penggunaan tabel lain dan tag lain di dalam sel tabel.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Nama</th>
<th>Gaji</th>
</tr>
<tr>
<td>Herbert S</td>
<td>5.000.000</td>
</tr>
<tr>
<td>Mbah WP</td>
<td>3.000.000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut Height dan Wide
Anda dapat mengatur lebar dan tinggi tabel menggunakan atribut wide dan height. Anda dapat menentukan wide atau height tabel dalam bentuk piksel atau dalam persentase area layar yang tersedia.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<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>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Tag Caption Tabel
Tag caption akan berfungsi sebagai judul atau penjelasan untuk tabel dan muncul di bagian atas tabel. Tag ini tidak digunakan lagi pada versi HTML / XHTML yang lebih baru.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>Ini adalah caption/keterangan </caption>
<tr>
<td>Baris 1, Kolom 1</td><td>Baris 1, Kolomn 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td><td>Baris 2, Kolomn 2</td>
</tr>
</table>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Tag Header Tabel, Body, dan Footer
Tabel dapat dibagi menjadi 3 bagian – header, body, dan footer.
Header dan footer agak mirip dengan header dan footer dalam dokumen, yang diproses kata yang tetap sama untuk setiap halaman, sedangkan body adalah berisi konten utama tabel.
3 elemen untuk memisahkan header, body, dan footer tabel adalah –
- <thead> – untuk membuat header tabel terpisah.
- <tbody> – untuk menunjukkan isi utama tabel.
- <tfoot> – untuk membuat footer tabel terpisah.
Sebuah tabel dapat berisi beberapa elemen <tbody> untuk menunjukkan halaman atau grup data yang berbeda.
Tetapi perlu dicatat bahwa tag <thead> dan <tfoot> harus muncul sebelum <tbody>
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">Ini adalah head dari tabel</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">Ini adalah footer dari tabel </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda untuk memahami fungsi & atribut tag table di HTML yang digunakan untuk membuat tabel di dokumen HTML.
Untuk materi selanjutnya, kita akan membahas Tutorial Belajar HTML 5 Bagian 12 : Cara Membuat Daftar di HTML.
