Membuat Tabel Pada HTML

Pada tutorial ini kamu akan belajar cara membuat tabel pada HTML

Tabel berguna untuk menampilkan data dalam bentuk baris dan kolom. Biasanya tabel pada website digunakan untuk menampilkan data produk, data pelanggan, data barang, data laporan keuangan dan data-data lainnya.

Kelebihan menggunakan tabel adalah data lebih mudah dilihat karena tersusun rapi sesuai posisinya.

Membuat Tabel Pada HTML

Untuk membuat table pada HTML, kita bisa menggunakan element yang sudah disediakan pada HTML. Yaitu elemen <table> .. </table>.

Didalam element <table> kita bisa menambahkan barisnya dengan menggunakan elemen <tr>.

Kemudian kita bisa membuat kolomnya dengan menggunakan elemen <td>. dan gunakan elemen <th> untuk membuat kolom pada kepala tabel.

Contoh


<table border="1">
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Usia</th>
	</tr>	
	<tr>
		<td>1</td>
		<td>Andi</td>
		<td>25</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Budi</td>
		<td>34</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Cahyo</td>
		<td>18</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Dodi</td>
		<td>29</td>
	</tr>
</table>

Jalankan kode ini

Perbedaan dari elemen <td> dan <th> adalah kolom <th> ditampilkan menggunakan tulisan tebal atau bold.

Bawaan element tabel tidak menampilkan garis pada tabel, jadi kita perlu menambahkan atribut border="1" pada tag pembuka <table>. Agar tabel yang kita buat memiliki garis.

Menggabungkan Kolom Tabel

HTML juga memungkinkan kita untuk menggabungkan kolom pada tabel.

Untuk menggabungkan kolom pada tabel HTML, kita bisa menambahkan atribut colspan="" pada tag <td> atau <th>.

<table border="1">
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th colspan="2">Nomor HP</th>
	</tr>	
	<tr>
		<td>1</td>
		<td>Andi</td>
		<td>081234564</td>
		<td>081234575</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Budi</td>
		<td>081234566</td>
		<td>081234576</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Cahyo</td>
		<td>081234569</td>
		<td>081234579</td>
	</tr>
</table>

Jalankan kode ini

Perhatikan contoh colspan di atas, Kita menuliskan atribut colspan pada tag <th> (kolom Nomor HP), dan memerintahkan untuk menggabungkan 2 kolom.

Maka HTML akan menggabungkan 2 kolom di sampingnya.

Menggabungkan Baris Tabel

Jika kamu ingin menggabungkan baris pada tabel, kamu bisa menggunakan atribut rowspan="". dan isi jumlah baris yang ingin digabung.

Contoh

<table border="1">
	<tr>
		<th>TIM</th>
		<th>Nama</th>
	</tr>	
	<tr>
		<td rowspan="2">1</td>
		<td>Andi</td>
	</tr>
	<tr>
		<td>Budi</td>
	</tr>
	<tr>
		<td rowspan="2">2</td>
		<td>Cahyo</td>
	</tr>
	<tr>
		<td>Dodi</td>
	</tr>
</table>

Jalankan kode ini

Perhatikan pada contoh di atas, kita menggunakan atribut rowspan untuk menggabungkan baris 1 dan baris 2. dan menggabungkan baris 3 dan baris 4.

Kita juga bisa menulis caption atau keterangan tabel. yaitu dengan cara menambahkan elemen <caption>.

<caption>Isi keterangan tabel di sini</caption>

Letakkan elemen <caption> pada di bawah tag <table> pembuka.

Contoh

<h1>Contoh caption yang terletak di atas</h1>
<table border="1">
	<caption>Data warga desa</caption>
	<tr>
		<th>No</th>
		<th>Nama</th>
		<th>Usia</th>
	</tr>	
	<tr>
		<td>1</td>
		<td>Andi</td>
		<td>25</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Budi</td>
		<td>34</td>
	</tr>
</table>

Jalankan kode ini

Contoh Latihan

Jika atribut rowspan dan colspan agak sulit untuk dipahami, silahkan memperbanyak latihan dengan cara bereksperimen dengan membuat berbagai bentuk tabel.

Misalnya seperti contoh tabel laporan keuangan sederhana di bawah ini.

<h1>Contoh tabel laporan keuangan</h1>
<table border="1">
	<caption>Data laporan keuangan</caption>
	<tr>
		<th rowspan="2">No</th>
		<th rowspan="2">Tanggal</th>
		<th colspan="2">Transaksi</th>
	</tr>	
	<tr>
		<th>Pemasukan</th>
		<th>Pengeluaran</th>
	</tr>	
	<tr>
		<td>1</td>
		<td>Andi</td>
		<td>25.000</td>
		<td>10.000</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Budi</td>
		<td>1.000.000</td>
		<td>0</td>
	</tr>
	<tr>
		<th colspan="2">TOTAL</th>
		<th>1.025.000</th>
		<th>10.000</th>
	</tr>
</table> 

Jalankan kode ini

Sekian tutorial cara membuat tabel pada HTML. Jika teman-teman telah berhasil membuat tabel dan sudah paham tentang materi tabel HTML, selanjutnya silahkan lanjut ke tutorial HTML selanjutnya. Yaitu tentang membuat list pada HTML.