Belajar HTML Lengkap: Cara Membuat Tabel pada Elemen HTML
Jika kamu berkunjung ke website yang mengulas tentang review produk, biasanya kamu akan menjumpai tabel harga dan spesifikasi produk tersebut.
Penggunaan tabel ini sangat bermanfaat untuk menampilkan data yang terstruktur sehingga mudah dipahami oleh para pembaca.
Misalnya untuk menampilkan daftar tipe smartphone, harga, dan spesifikasinya.
Pada tutorial ini, saya akan membahas cara membuat tabel pada halaman website dengan tag <table>.
Isi Konten
Cara Membuat Tabel HTML dengan tag table, tr, dan td
Untuk membuat tabel pada halaman website, minimal kita membutuhkan 3 tag HTML. Yaitu tag <table>, <tr>, dan <td>.
- Tag
<table>digunakan untuk mendefinisikan tabel dua dimensi yang terdiri dari baris dan kolom sel yang berisi data. - Tag
<tr>merupakan singkatan dari table row yang mewakili baris sel dalam tabel HTML. - Tag
<td>merupakan singkatan dari table data, digunakan untuk menginput data ke tabel.
Penjelasan secara lengkap tentang tag tersebut bisa kamu pelajari di referensi tag table, tr, dan td.
Agar lebih mudah memahaminya, yuk amati contoh tabel HTML berikut:
<table border="11">
<tr>
<th>Judul Tabel 1</th>
<th>Judul Tabel 2</th>
</tr>
<tr>
<td>kolom 1</td>
<td>kolom 2</td>
</tr>
<tr>
<td>kolom 3</td>
<td>kolom 4</td>
</tr>
</table>Dan ini tampilannya di web browser Chrome
Perhatikan pada tag <table> di atas terdapat atribut border="1".
Atribut border ini digunakan untuk memberikan nilai garis tepi dari tabel.
Secara default, nilai border="1" ini menggunakan ukuran pixel. Sehingga web browser akan merender garis tepi pada tabel sebesar 1 pixel.
Kalau atribut border ini tidak disertakan pada tag <table>, maka tabel tidak memiliki garis tepi (border).
Membuat Garis Tepi dengan Atribut border pada Tabel
Pada contoh sebelumnya, saya menggunakan atribut border pada tag <table> untuk mengatur ketebalan garis tepi (border) dari tabel.
Jika atribut border ini dihilangkan, maka web browser akan menampilkan tabel tanpa garis tepi.
Nilai dari atribut ini berupa angka dengan satuan pixel.
Jadi, jika kamu memberi nilai border="8", secara otomatis web browser akan menampilkan garis tepi sebesar 8 pxel pada semua sisi tabel.
Agar lebih jelas perbedaanya, yuk amati contoh berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Atribut Border pada Tabel</title>
<link rel="stylesheet" href="">
</head>
<body>
<table border="0">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
<table border="8">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<script src=""></script>
</body>
</html>
Pada contoh tersebut, tabel pertama saya beri nilai 0 pada atribut border, sehingga tabel seolah-olah tidak memiliki garis tepi.
Membuat Garis Tepi dengan Property CSS border pada Tabel
Pada HTML5 memang tersedia atribut border yang bisa digunakan untuk membuat garis tepi pada tabel.
Namun untuk tujuan desain, sebaiknya gunakan CSS sebagai alternatif untuk memberi garis tepi pada tabel.
Untuk memberi garis tepi dengan CSS, masing-masing elemen table, th, dan td harus ditentukan nilai bordernya dengan property CSS border.
Contoh:
<style>
table, th, td {
border: 1px solid orange;
}
</style>
Dan ini contoh tabel dengan garis tepi yang menggunakan CSS.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Border dengan CSS pada Tabel</title>
<style>
table,
th,
td {
border: 1px solid orange;
}
</style>
</head>
<body>
<table>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
</body>
</html>
Dan ini tampilannya di browser Chrome:
Mengatur Jarak Kolom Tabel HTML dengan Atribut cellspacing
Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar tabel HTML.
Nilai dari atribut ini berupa angka dengan satuan pixel.
Jika kamu memberi nilai cellspacing="1", maka web browser akan menampilkan jarak sebesar 1 pixel diantara garis border tabel.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penggunaan atribut cellspacing dalam Tabel</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
<br />
<table border="1" cellspacing="5">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
</body>
</html>
Dan ini tampilannya di browser Chrome:
Mengatur Jarak Kolom Tabel HTML dengan Property CSS border-collapse
Secara default, kolom tabel yang berdekatan akan memiliki batas yang berbeda. Sehingga tampilan garis tepi seolah-olah terlihat ganda (double border).
Untuk mengatur jarak antar kolom tabel ini, selain menggunakan atribut cellspacing seperti yang saya sebutkan di atas, kamu juga bisa menggunakan properti CSS border-collapse: collapse;
Dengan properti CSS ini, garis tepi atau border tabel akan terlihat menyatu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Border Collapse dengan CSS pada Tabel</title>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid orange;
}
</style>
</head>
<body>
<table>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
</body>
</html>
Dan ini tampilannya di browser Chrome:
Cara Mengatur Padding Tabel dengan Atribut cellpadding
Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi teks tabel itu sendiri.
Nilai dari atribut ini berupa angka dengan satuan pixel.
Jika kamu memberi nilai cellpadding="4”, maka web browser akan menampilkan jarak sebesar 4 pixel dari border sisi dalam tabel dengan isi teks tabel.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penggunaan atribut cellpadding dalam Tabel</title>
</head>
<body>
<table border="1" cellpadding="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
<br />
<table border="1" cellpadding="10">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
</body>
</html>
Dan ini tampilannya di browser Chrome:
Cara Mengatur Padding Tabel dengan Property CSS padding
Selain menggunakan atribut cellpadding, kamu juga bisa menggunakan property CSS padding sebagai alternatif untuk mengatur padding kolom tabel HTML.
Misalnya, untuk mengatur padding kolom tabel menjadi 10 pixel, tambahkan property CSS padding: 10px; pada style sheet.
padding: 10px;
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penggunaan padding CSS dalam Tabel</title>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid orange;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
</body>
</html>
Dan ini tampilannya di browser Chrome:
Cara Menggabungkan Sel Tabel dengan Atribut rowspan dan colspan
Pada tampilan tabel yang komplek, biasanya dijumpai beberapa jumlah kolom atau baris sel tabel yang digabung menjadi satu.
Kalau kamu menggunakan aplikasi MS Exel atau Spreadsheets, bisa menggunakan menu merge cells untuk menggabungkan beberapa kolom tabel.
Nah untuk menggabungkan sel tabel pada HTML, kamu bisa menggunakan atribut rowspan dan colspan.
Fungsi Atribut rowspan dan colspan
Atribut rowspan digunakan untuk menentukan berapa banyak baris sel yang harus direntangkan.
Atribut colspan digunakan untuk menentukan berapa banyak kolom sel yang harus direntangkan.
Kedua atribut ini diletakkan pada tag td dalam sebuah tabel.
Agar lebih mudah memahaminya, yuk tulis ulang kode berikut ini dengan teks editor di laptopmu.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penggunaan Atribut rowspan dan colspan dalam Tabel</title>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid orange;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Baris 1, Kolom 1</td>
<td colspan="3">Baris 1, Kolom 2, 3, & 4</td>
</tr>
<tr>
<td rowspan="2">Baris 2 & 3, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
<td>Baris 2, Kolom 4</td>
</tr>
<tr>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
<td>Baris 3, Kolom 4</td>
</tr>
</table>
</body>
</html>
Pada contoh di atas, tag td yang memiliki atribut colspan akan menyatukan kolom tabel yang ada disebelahnya.
Sedangkan tag td yang memiliki atribut rowspan akan menyatukan sel tabel dengan baris sel tabel lain yang ada di bawahnya.
Kedua atribut ini membutuhkan nilai (value) untuk menentukan banyaknya sel tabel yang akan digabungkan.
Misalnya tag td dengan atribut colspan="3" akan menggabungkan 3 kolom yang sejajar menjadi 1 sel tabel.
Dan tag td dengan atribut rowspan="2" akan menggabungkan 2 baris sel tabel menjadi 1 sel tabel.