Estimasi Waktu Baca: 5 menit

Pemanasan

Tabel merupakan salah satu elemen penting dalam sebuah wesbite. Tabel sering kali digunakan untuk menampilkan informasi berupa daftar data, selain itu juga biasa dipakai untuk membandingkan antar data.

Dengan penggunaan tabel, informasi yang ada dapat diringkas dan ditunjukkan secara gamblang kepada pembaca.

Ada 4 unsur pembentuk utama dalam tabel, antara lain:

  • Sel
  • Garis
  • Baris
  • Kolom

Untuk lebih jelasnya kalian bisa lihat gambar anatomi tabel di bawah ini:

Nah, pertanyaannya sekarang bagaimana cara membuat tabel di HTML?

Untuk menjawabnya silahkan ikuti materi di bawah ini….

Cara Membuat Tabel di HTML

Tercatat ada 6 tag yang digunakan untuk membuat tabel di HTML antara lain:

  • <table> – tag pertama yang wajib ditulis saat membuat tabel, berfungsi untuk membungkus tabel.
  • <thead> – berfungsi untuk membungkus kepala tabel
  • <tbody> – berfungsi untuk membungkus tubuh tabel
  • <tr> – berfungsi untuk membuat baris tabel, singkatan dari Table Row
  • <th> – berfungsi untuk membuat judul pada header tabel, singkatan dari Table Header
  • <td> – berfungsi untuk membuat sel tabel, singkatan dari Table Data

Tidak semua tag di atas bersifat wajib digunakan, seringkali para pengembang dan programmer ketika membuat sebuah tabel hanya menggunakan tag <table>, <tr>, <th>, dan <td>. Sedangkan untuk tag <thead> dan <tbody> boleh kalian gunakan atau tidak (opsional).

Contoh penerapan:


<!DOCTYPE html>
<html>
<head>
	<title>Tabel HTML</title>
</head>
<body>
	<h1>Belajar Tabel di HTML</h1>
	<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>
		<tr>
			<td>Baris 3 Kolom 1</td>
			<td>Baris 3 Kolom 2</td>
		</tr>
	</table>
</body>
</html>

Keluaran:

Hasil dari kode di atas pada dasarnya sudah membentuk sebuah tabel, hanya saja tidak ada garisnya. Untuk memberi garis pada tabel kita memerlukan atribut border.

Nilai dari atribut border berupa angka yang mewakili ukuran dari garis, semakin besar angkanya maka garis yang dibuat juga akan semakin tebal.

Agar seluruh tubuh tabel memiliki garis maka tambahkan atribut border pada tag <table>.


<table border="1">

Hasil:

Pada contoh di atas saya memberikan atribut border nilai 1 yang mana nilai tersebut akan menghasilkan garis dengan ukuran terkecil.

Aksi yang Dapat Diterapkan Pada Tabel

Ada bermacam aksi yang dapat diterapkan pada tabel, aksi ini meliputi bagaimana cara kita memberi warna, menggabungkan sel, memberi padding pada sel, dan lain-lain.

Memberi Warna Untuk Sel Tabel

Tabel yang kita buat dapat kita percantik dengan memberi warna untuk tiap sel menggunakan atribut bgcolor pada tag <td>. Sedangkan bila ingin memberi warna perbaris, maka tambahkan atribut tersebut pada tag <tr>.


<!DOCTYPE html>
<html>
<head>
	<title>Tabel HTML</title>
</head>
<body>
	<h1>Belajar Tabel di HTML</h1>
	<table border="1">
		<tr bgcolor="pink">
			<td>Baris 1 Kolom 1</td>
			<td>Baris 1 Kolom 2</td>
		</tr>
		<tr>
			<td bgcolor="cf1b1b">Baris 2 Kolom 1</td>
			<td bgcolor="cf1b1b">Baris 2 Kolom 2</td>
		</tr>
		<tr>
			<td bgcolor="yellow">Baris 3 Kolom 1</td>
			<td bgcolor="fddb3a">Baris 3 Kolom 2</td>
		</tr>
	</table>
</body>
</html>

Nilai dari atribut bgcolor bisa berupa nama warna dalam bahasa inggris atau nilai dalam bentuk heksadesimal.

Mengatur Padding Pada Sel Tabel

Padding sederhananya merupakan jarak. Tujuan untuk mengatur jarak pada sel supaya tabel terlihat lebih rapi dan tidak sempit. Hal ini berhubungan dengan teks dan garis yang mengelilinginya.

Pada contoh sebelumnya teks dan garis terlihat tidak memiliki jarak, hal ini membuat kesan berdesakan.

Maka dari itu dibuatlah cellpadding yang berfungsi untuk membuat jarak pada sel. Jarak ini yang akan membuat sel dalam tabel akan terlihat lebih luas karena tolak ukurnya adalah teks di dalam sel dan garis yang mengelilingi teks tersebut.

Untuk lebih pahamnya perhatikan penerapan di bawah ini.

Agar seluruh bagian tabel terkena imbas penggunaan atribut cellpadding, maka kita perlu definisikan atribut ini pada tag <table>.


<!DOCTYPE html>
<html>
<head>
	<title>Tabel HTML</title>
</head>
<body>
	<h1>Belajar Tabel di HTML</h1>
	<table border="1" cellpadding="10">
		<tr bgcolor="pink">
			<td>Baris 1 Kolom 1</td>
			<td>Baris 1 Kolom 2</td>
		</tr>
		<tr>
			<td bgcolor="cf1b1b">Baris 2 Kolom 1</td>
			<td bgcolor="cf1b1b">Baris 2 Kolom 2</td>
		</tr>
		<tr>
			<td bgcolor="yellow">Baris 3 Kolom 1</td>
			<td bgcolor="fddb3a">Baris 3 Kolom 2</td>
		</tr>
	</table>
</body>
</html>

Keluaran:

Menggabungkan Sel Tabel

Ada kalanya baris atau kolom perlu disatukan atau digabungkan, sama seperti saat membuat tabel di excel kalian pasti pernah mengalami kasus serupa yang mana solusi dari kasus tersebut dengan menggunakan fitur merge.

Nah di HTML hal ini juga memungkinkan untuk dilakukan dengan penggunaan atribut rowspan dan colspan. Sesuai namanya atribut:

  • rowspan – digunakan untuk menyatukan sel tabel secara baris
  • colspan – digunakan untuk menyatukan sel tabel secara kolom

Ada dua tag yang dapat menggunakan atribut ini yaitu tag <th> dan <td>.

Contoh penerapan


<!DOCTYPE html>
<html>
<head>
	<title>Tabel HTML</title>
</head>
<body>
	<h1>Belajar Tabel di HTML</h1>
	<table border="1">
		<tr>
			<th rowspan="2" bgcolor="pink">Nama Siswa</th>
			<th colspan="3" bgcolor="lightblue">Mata Pelajaran</th>
		</tr>
		<tr>
			<th bgcolor="cd0a0a">MAT</th>
			<th bgcolor="28df99">IPA</th>
			<th bgcolor="fddb3a">IPS</th>
		</tr>
		<tr>
			<td>Lendis Fabri</td>
			<td>85</td>
			<td>95</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Nurul Huda</td>
			<td>80</td>
			<td>95</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Wahid Abdullah</td>
			<td>100</td>
			<td>90</td>
			<td>85</td>
		</tr>
		<tr>
			<td>Basit Djunaedi</td>
			<td>85</td>
			<td>90</td>
			<td>100</td>
		</tr>
	</table>
</body>
</html>

Hasilnya,

Memasukkan Elemen Lain ke dalam Sel

Selain elemen teks, tag <th> dan <td> juga mendukung masukan dari elemen lain seperti link, gambar, video, dan lain-lain.

Contoh penerapan:


<!DOCTYPE html>
<html>
<head>
	<title>Tabel HTML</title>
</head>
<body>
	<h1>Belajar Tabel di HTML</h1>
	<table border="1" cellpadding="10">
		<tr>
			<th colspan="3">Profil Website</th>
		</tr>
		<tr>
			<td rowspan="5"><img src="web-logo.png"></td>
		</tr>
		<tr>
			<td>Nama</td>
			<td>Kopiding.in</td>
		</tr>
		<tr>
			<td>Pemilik</td>
			<td>Kuro Neko</td>
		</tr>
		<tr>
			<td>Menu</td>
			<td>
				<ul>
					<li>Beranda</li>
					<li>Tutorial</li>
					<li>Blog</li>
					<li>Kontak</li>
					<li>Tentang</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>Alamat</td>
			<td><a href="https://kopiding.in">https://kopiding.in</a></td>
		</tr>
	</table>
</body>
</html>

Hasil: