Tabel merupakan elemen HTML yang sangat penting dan sering digunakan di dalam pembuatan aplikasi web. Biasanya, tabel digunakan untuk menampilkan data dalam bentuk baris dan kolom, yang datanya diambil dari database menggunakan query SQL atau metode yang lain. Bagaimana cara membuat tabel di HTML? Ikuti terus artikel ini.

Tabel terdiri dari baris dan kolom. Tag HTML yang terlibat dalam elemen HTML tabel biasanya adalah <table>, <tr>, dan <th>/<td>. Tag <table> ditutup dengan </table>, begitu pula dengan tag yang lainnya. Hirarki penulisan elemennya adalah sebagai berikut.

<table border="1">
	<tr>
		<th>No</th>
		<th>Nama</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Amir Hamzah</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Burhan Saputra</td>
	</tr>
</table>

Diawali dengan tag <table>, tabel berisi baris (<tr>) dan kolom (<th> untuk heading, baris teratas, dan <td> untuk baris setelahnya). Sekali lagi, perhatikan polanya (di dalam tr terdapat td atau th, bukan sebaliknya)! Kode di atas jika ditampilkan di browser akan terlihat seperti gambar berikut.

Tabel dalam HTML

Mungkin Anda berpikir, “kenapa jelek amat ya?”. Tenang saja, nanti pelan-pelan akan bagus tampilannya kalau kita sudah masuk ke dalam pembahasan terkait CSS dan yang lainnya.

Rowspan dan Colspan (Merge Cell)

Kalau kita menggunakan software microsoft seperti word dan excel, kita mengenal fitur merge cell. Fitur tersebut berguna untuk menggabungkan beberapa kolom atau baris menjadi satu. Nah, di dalam HTML pun kita bisa melakukannya, dengan menggunakan atribut colspan atau rowspan pada tag HTML <td> atau <th>. Contohnya adalah sebagai berikut.

<table border="1">
	<tr>
		<th rowspan="2">No</th>
		<th rowspan="2">Nama</th>
		<th colspan="2">TTL</th>
	</tr>
	<tr>
		<th>Tempat Lahir</th>
		<th>Tanggal Lahir</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Amir Hamzah</td>
		<td>Semarang</td>
		<td>6 April 1988</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Burhan Saputra</td>
		<td>Semarang</td>
		<td>18 Januari 1989</td>
	</tr>
</table>

Kode di atas bila ditampilkan di browser akan menjadi seperti gambar berikut.

Colspan dan Rowspan

Rowspan artinya menggabungkan baris mulai dari atribut itu ditulis dengan baris yang digabung adalah sebanyak nilai yang rowspan tersebut. Sedangkan colspan menggabungkan kolom mulai dari atribut itu ditulis dengan kolom yang digabung adalah sebanyak nilai yang ada di dalam colspan tersebut.

Cobalah latihan dengan membuat kode HTML untuk skenario layout tabel yang lain sehingga Anda semakin paham dengan konsepnya. Happy coding!