Belajar HTML : Membuat Table

Dalam dunia informasi, tentunya tabel sangat dibutuhkan untuk sajian dari kumpulan data-data. Jadi, di sebuah website juga sudah menjadi sebuah kebutuhan.

Nah, langsung aja ya. Berikut ini adalah script kodenya

<!DOCTYPE html>
<html>
<head>
	<title>Tabel HTML</title>
</head>
<body>

	<h2>Tabel pada HTML</h2>
	
	<table border="1" width="500">
		<tr>
			<th>No.</th>
			<th>Nama Barang</th>
			<th>Harga Barang</th>
		</tr>

		<tr>
			<td align="center">1</td>
			<td>Flashdisk 32Gb</td>
			<td align="center">Rp 116.000,-</td>
		</tr>

		<tr>
			<td align="center">2</td>
			<td>Mouse Wireless</td>
			<td align="center">Rp 132.000,-</td>
		</tr>

		<tr>
			<td align="center">3</td>
			<td>Cooling Pad 3 Fan</td>
			<td align="center">Rp 100.000,-</td>
		</tr>
	</table>

</body>
</html>

Dan ini adalah hasilnya di browser :

Catatan:
Elemen <td> adalah wadah data tabel.
Dapat berisi segala macam elemen HTML; teks, gambar, daftar, tabel lain, dll.

Nah, pada tabel juga ada dilengkapi dengan atribut align=”” (dengan nilainya center, left, right sebagai posisi tabelnya jika menggunakan tag <table> dan sebagai posisi isi tabelnya pada <tr> atau <td>).

Selain itu ada border=”” (dengan value angka 1, 2, 3 dengan tujuan untuk tingkat ketebalan garis tabelnya).

Ada juga width=”” (untuk lebarnya, bisa diisi dengan nilai angka untuk lebar berdasar pixel layar browser, bisa juga menggunakan persentase (%) supaya ukuran lebar tabelnya sebesar persentase layar browser keseluruhan).

Demikianlah, semoga bermanfaat dan selamat mencoba ya…

Related posts: