Hallo coders, kali ini kita akan belajar membuat tabel di Html. Tabel ini penting lo gaess, kegunaanya buat menampilkan atau menyajikan data dalam bentuk tabel biasanya diimplementasikan di dashboard admin. Yaitu dashboard untuk mengedit konten website. Tabel terdiri dari kolom dan baris.
Tag untuk Membuat Tabel di HTML
Seperti yang kita ketahui html terdiri dari sebuah tag. Sama juga dengan tabel, untuk membuat tabel kita membutuhkan beberapa tag yang nantinya akan disusun atau dikombinasikan.
Berikut adalah beberapa tag tabel nya :
- Tag <table> untuk membungkus tabelnya
- Tag <thead> untuk membungkus bagian kepala tabel
- Tag <tbody> untuk membungkus bagian badan tabel
- Tag <tfoot> untuk membungkus bagian kaki tabel
- Tag <tr> (tabel row) untuk membuat baris
- Tag <td> (tabel data) untuk membuat sel atau coloumn
- tag <th> (tabel head) sama seperti td bedanya th untuk judul tabel
Tag diatas yang paling penting dan sering digunakan adalah tag table tr dan td, yang lainnya opsional gaes. Nanti bakal kita praktekan perbedaanya dan kegunaan dari masing masing tag. Berikut ini adalah contoh tabel menggunakan tag table tr dan td.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabel</title>
</head>
<body>
<table>
<tr>
<td>No</td>
<td>Nama Jenis</td>
<td>Harga</td>
<td>Satuan</td>
<td>Jumlah</td>
<td>Total</td>
</tr>
<tr>
<td>1</td>
<td>Beras</td>
<td>Rp. 35.000</td>
<td>Kg</td>
<td>2</td>
<td>Rp. 250.000</td>
</tr>
<tr>
<td>2</td>
<td>Daging Ayam</td>
<td>Rp. 50.000</td>
<td>Potong</td>
<td>5</td>
<td>Rp. 250.000</td>
</tr>
<tr>
<td>3</td>
<td>Teh Botol</td>
<td>Rp. 5.000</td>
<td>Biji</td>
<td>2</td>
<td>Rp. 10.000</td>
</tr>
</table>
</body>
</html>
Maka hasilnya seperti ini.
Pasti kalian bertanya tanya kenapa tabel tapi gak ada garisnya ?. Itu dikarenakan didalam tag table ada atribut atribut khusus juga. kalian bisa mendambahkan atribut border seperti ini.
<table border="1">
maka seharusnya sudah ada bordernya.
nilai bordernya menentukan ketebalan baris.
Atribut Cellpadding Untuk Mengatur Jarak
Selain atribut border ada atribut cellpadding atribut ini digunakan untuk mengatur jarak antara text dengan garis didalam sel.
Contoh penggunaanya seperti ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabel</title>
</head>
<body>
<table border="1" cellpadding="10">
<tr>
<td>No</td>
<td>Nama Jenis</td>
<td>Harga</td>
<td>Satuan</td>
<td>Jumlah</td>
<td>Total</td>
</tr>
<tr>
<td>1</td>
<td>Beras</td>
<td>Rp. 35.000</td>
<td>Kg</td>
<td>2</td>
<td>Rp. 250.000</td>
</tr>
<tr>
<td>2</td>
<td>Daging Ayam</td>
<td>Rp. 50.000</td>
<td>Potong</td>
<td>5</td>
<td>Rp. 250.000</td>
</tr>
<tr>
<td>3</td>
<td>Teh Botol</td>
<td>Rp. 5.000</td>
<td>Biji</td>
<td>2</td>
<td>Rp. 10.000</td>
</tr>
</table>
</body>
</html>
10 adalah ukuran jaraknya. Jika kalian copas kode diatas maka hasilnya akan menjadi seperti ini.
Atribut Cellspacing tag Table
Setelah kita belajar cellpadding untuk mengatur jarak antara text dengan garis didalam sel. Selanjutnya ada atribut khusus lagi untuk mengatur jarak antara garis tepi bagian dalam dan luar border. Bisa dibilang untuk mengatur ketebalan garis border di table kita. Kalian bisa menambahkannya di samping tag cellpadding seperti ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabel</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>No</td>
<td>Nama Jenis</td>
<td>Harga</td>
<td>Satuan</td>
<td>Jumlah</td>
<td>Total</td>
</tr>
<tr>
<td>1</td>
<td>Beras</td>
<td>Rp. 35.000</td>
<td>Kg</td>
<td>2</td>
<td>Rp. 250.000</td>
</tr>
<tr>
<td>2</td>
<td>Daging Ayam</td>
<td>Rp. 50.000</td>
<td>Potong</td>
<td>5</td>
<td>Rp. 250.000</td>
</tr>
<tr>
<td>3</td>
<td>Teh Botol</td>
<td>Rp. 5.000</td>
<td>Biji</td>
<td>2</td>
<td>Rp. 10.000</td>
</tr>
</table>
</body>
</html>
Karena saya memberikan nilai 0 maka tabel nya akan menjadi tidak ada jaraknya seperti ini.
Menggabungkan Baris dan Kolom di Tabel
Kita tahu bahwa ketika kita membuat tabel waktu belajar statistik ada tabel yang digabungkan biasanya untuk total dan juga jumlah keseluruhan. Digabung ini tujuanya agar menjadi lebih rapi ketika dilihat. Nah di html kita bisa melakukan itu menggunakan atribut khusus untuk tag td atau th yaitu rowspan dan colspan.
- Rowspan untuk menggabungkan baris
- Colspan untuk menggabungkan kolom
Disini saya akan melanjutkan kodingan yang tadi gaes. Kita akan menampilkan total keseluruhan harga.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabel</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>No</td>
<td>Nama Jenis</td>
<td>Harga</td>
<td>Satuan</td>
<td>Jumlah</td>
<td>Total</td>
</tr>
<tr>
<td>1</td>
<td>Beras</td>
<td>Rp. 35.000</td>
<td>Kg</td>
<td>2</td>
<td>Rp. 250.000</td>
</tr>
<tr>
<td>2</td>
<td>Daging Ayam</td>
<td>Rp. 50.000</td>
<td>Potong</td>
<td>5</td>
<td>Rp. 250.000</td>
</tr>
<tr>
<td>3</td>
<td>Teh Botol</td>
<td>Rp. 5.000</td>
<td>Biji</td>
<td>2</td>
<td>Rp. 10.000</td>
</tr>
<tr>
<th colspan="5">Total Keseluruhan</th>
<th>Rp. 330.000</th>
</tr>
</table>
</body>
</html>
Disini ya meletakan colspan 5 karena saya ingin menggabungkan 5 kolom kenapa gak enam ?, karena yang satunya kita akan berikan total keseluruhannya.
Bagaimana dengan rowspan ?, cara penggunaanya kurang lebih sama gaes. Oke karena kurang sinkron aja kalo diterapin di tabel produk. Disini saya akan membuat studi kasus baru yaitu tabel absensi. Kodingannya seperti ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabel</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th rowspan="2">No</th>
<th rowspan="2">NIM</th>
<th rowspan="2">Nama</th>
<th colspan="3">Absensi</th>
</tr>
<tr>
<td>Hadir</td>
<td>Sakit</td>
<td>Izin</td>
</tr>
<tr>
<td>1</td>
<td>071401001</td>
<td>Ridayanti</td>
<td>20</td>
<td>0</td>
<th>0</th>
</tr>
<tr>
<td>2</td>
<td>071401001</td>
<td>Fika Amalia</td>
<td>18</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
Maka hasilnya akan menjadi seperti ini.
