Cara Membuat Tabel (Table) dengan HTML

Belajar Buat Table dengan HTML

Tutorial belajar HTML kali ini akan membahas cara membuat tabel dan penggunaan attribute di dalamnya.

HTML Table memiliki standard tag <table> sebagai pembuka, <tr> sebagai baris atau row dan <td> sebagai cell data atau kolom.

Kode HTML:

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
     <table border="1">
          <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>
     </table>
</body>
</html>

Kode HTML Table diatas akan menghasilkan:

Baris 1, Kolom 1Baris 1, Kolom 2
Baris 2, Kolom 1Baris 2, Kolom 2
Contoh table pada html

Table Heading

Pada pembuatan HTML Table terdapat attribute <th> yang artinya table heading. Table Heading digunakan untuk memberikan judul pada kolom.

Kode HTML:

<table border="1">
	<tr>
		<th>Kolom 1</th>
		<th>Kolom 2</th>
	</tr>
	<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>
</table>

Hasilnya table akan memiliki baris judul, seperti ini:

Kolom 1Kolom 2
Baris 1, Kolom 1Baris 1, Kolom 2
Baris 2, Kolom 1Baris 2, Kolom 2

Table Colspan dan Rowspan

HTML Tables memiliki attribute colspan untuk menggabungkan dua atau lebih kolom menjadi satu kolom. Dan gunakan rowspan bila kamu ingin menggabungkan dua baris atau lebih menjadi satu baris.

COLSPAN

Kode HTML:

<table border="1">
	<tr>
		<th>Kolom 1</th>
		<th>Kolom 2</th>
	</tr>
	<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 colspan="2">2 Kolom jadi 1</td>
	</tr>
</table>

Hasilnya akan seperti berikut

Kolom 1Kolom 2
Baris 1, Kolom 1Baris 1, Kolom 2
Baris 2, Kolom 1Baris 2, Kolom 2
2 Kolom jadi 1

ROWSPAN

Kode HTML:

<table border="1">
	<tr>
		<th>Kolom 1</th>
		<th>Kolom 2</th>
	</tr>
	<tr>
		<td rowspan="2">2 Baris jadi 1</td>
		<td>Baris 1, Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2, Kolom 2</td>
	</tr>
</table>

Hasilnya akan seperti ini

Kolom 1Kolom 2
2 Baris jadi 1Baris 1, Kolom 2
Baris 2, Kolom 2

Table Background

HTML Table memiliki attribute bgcolor untuk memberikan warna pada table itu sendiri.

Kode HTML:

<table border="1" bgcolor="yellow">
	<tr>
		<th>Kolom 1</th>
		<th>Kolom 2</th>
	</tr>
	<tr>
		<td rowspan="2">2 Baris jadi 1</td>
		<td>Baris 1, Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2, Kolom 2</td>
	</tr>
</table>

Dan hasilnya table akan menampilkan warna kuning seperti dibawah ini

Kolom 1Kolom 2
2 Baris jadi 1Baris 1, Kolom 2
Baris 2, Kolom 2

Penggunaan bgcolor juga dapat  ditempatkan pada table row atau <tr> seperti contoh ini

<table border="1" bgcolor="yellow">
	<tr>
		<th>Kolom 1</th>
		<th>Kolom 2</th>
	</tr>
	<tr>
		<td rowspan="2">2 Baris jadi 1</td>
		<td>Baris 1, Kolom 2</td>
	</tr>
	<tr bgcolor="red">
		<td>Baris 2, Kolom 2</td>
	</tr>
</table>

Hasilnya akan seperti berikut

Kolom 1Kolom 2
2 Baris jadi 1Baris 1, Kolom 2
Baris 2, Kolom 2

Table Width dan Height

HTML Table memiliki attribute width untuk memberikan nilai lebar tabel dan height untuk memberikan nilai tinggi tabel.

WIDTH

<table border="1" bgcolor="yellow" width="500">
	<tr>
		<th>Kolom 1</th>
		<th>Kolom 2</th>
	</tr>
	<tr>
		<td rowspan="2">2 Baris jadi 1</td>
		<td>Baris 1, Kolom 2</td>
	</tr>
	<tr bgcolor="red">
		<td>Baris 2, Kolom 2</td>
	</tr>
</table>
Kolom 1Kolom 2
2 Baris jadi 1Baris 1, Kolom 2
Baris 2, Kolom 2

HEIGHT

<table border="1" bgcolor="yellow" width="500" height="200">
	<tr>
		<th>Kolom 1</th>
		<th>Kolom 2</th>
	</tr>
	<tr>
		<td rowspan="2">2 Baris jadi 1</td>
		<td>Baris 1, Kolom 2</td>
	</tr>
	<tr bgcolor="red">
		<td>Baris 2, Kolom 2</td>
	</tr>
</table>
Kolom 1Kolom 2
2 Baris jadi 1Baris 1, Kolom 2
Baris 2, Kolom 2

Nilai pada attribute width dan height diatas berupa satuan ukuran pixels (px), apabila kamu ingin merubah menjadi persen (%) silakan ubah nilai antara 1% – 100%.

Demikian tutorial belajar HTML kali ini, mudah-mudahan kamu memahami cara membuat tabel pada pembuatan sebuah website. Kamu juga bisa belajar html secara lengkap karena penjelasan disertai gambar dan kode html nya.

Baca disini: Belajar HTML Gampang Banget! – HTML Warrior #1

Semoga bermanfaat! Jangan lupa share yah!

Buku Belajar CSS - CSS Monster | CSSMonster.ID

Pin It on Pinterest

Shares
Scroll to Top