Belajar HTML Part 4 : Membuat Tabel Pada HTML

Mas Iwan

Updated: 01 Jan, 2022 • 17725 • min read

Table of Contents

tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table> utuk membuat table, <tr> untuk membuat baris dan <td> untuk membuat kolom.

untuk lebih memahami pembuata table pada HTML berikut saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML.

<table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik.
<tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML
<td> atau dikenal dengan table data merpakan tag yang digunakan untuk membuat kolom dalam baris dan untuk menampilkan data dalam table
<th> untuk membuat table head atau bagian kepala pada table.

Perhatikan contoh pembuatan table pada HTML berikut :

<!DOCTYPE html>
<html>
<head>
	<title>belajar membuat tabel di html</title>
</head>
<body>
<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>
	<tr>
		<td>baris 3/ kolom 1</td>
		<td>baris 3/ kolom 2</td>
		<td>baris 3/ kolom 3</td>
	</tr>
	<tr>
		<td>baris 4/ kolom 1</td>
		<td>baris 4/ kolom 2</td>
		<td>baris 4/ kolom 3</td>
	</tr>
</table>
</body>
</html>

Membuat Tabel Pada HTML

Dari contoh diatas dapat anda lihat sendiri fungsi dari masing-masing tag yang sudah kita bahas diatas. namun pada tag table saya memberikan atribut border=’1′. Atribut border ini digunakan untuk memberika garis tepi pada table dan nilai 1 ini merupakan nilai dari garis tepi pada tabel yang kita buat tadi.

Dan berikut ini adalah contoh membuat tabel HTML dengan menggunakan tag head atau bagian kepala tabel.contoh

<!DOCTYPE html>
<html>
<head>
	<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Alamat</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Badrul</td>
		<td>Sumedang</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Andi</td>
		<td>Jakarta</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Budi</td>
		<td>Bandung</td>
	</tr>
</table>
</body>
</html>