Salah satu cara untuk menampilkan informasi/data dalam web HTML adalah dengan membuat tabel. Pada halaman web, tabel biasanya digunakan untuk menampilkan data secara tersusun dalam baris dan kolom.
Tabel terdiri dari 4 unsur utama:
- Baris, adalah bagian tabel yang mendatar.
- Kolom, bagian tabel yang vertikal (atas ke bawah).
- Sel, kotak-kotak yang ada pada tabel
- Border, garis yang membentuk tabel.
Tag untuk Membuat Tabel di HTML
Kita dapat membuat tabel di HTML dengan beberapa tag yang sudah tersedia pada HTML. Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:
- Tag <table> untuk membungkus tabelnya
- Tag <thead> untuk membungkus bagian kepala tabel
- Tag <tbody> untuk membungkus bagian body dari tabel
- Tag <tr> (tabel row) untuk membuat baris
- Tag <td> (table data) untuk membuat sel
- Tag <th> (table head) untuk membuat judul pada header
Cara Membuat Tabel di HTML
Tag yang sering digunakan untuk membuat tabel di HTML adalah table, tr, dan td. Sedangkan untuk membuat garis tabel, kita menggunakan atribut border. Namun, pada versi HTML5, atribut border sudah tidak disupport, maka dari itu kita harus menggunakan CSS. Berikut cara penulisan CSS yang digunakan untuk membuat border
table, th, td { border: 1px solid; }
Keterangan :
border, untuk membuat garis
1px, ukuran lebar garisnya. Semakin besar ukurannya, maka akan semakin besar pula ukuran garisnya.
solid, style CSS yang berfungsi untuk memberikan gaya border yang bergaris
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Tabel di HTML</title>
<style>
table, th, td { border: 1px solid; }
</style>
</head>
<body>
<h2>Membuat Tabel DI HTML</h2>
<table>
<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>Baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>Baris 4 kolom 1</td>
<td>baris 4 kolom 2</td>
</tr>
</table>
</body>
</html>
Hasil tampilan di browser:
Menggabungkan Sel Tabel
Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan. Atribut ini bisa kita berikan kepada tag td atau th. Untuk menggabungkan Sel tabel ini sedikit lebih sulit, kita harus teliti dalam menentukan jumlah dan ukuran tabel serta posisi sel yang akan digabungkan. Tipsnya adalah anda perlu mengingat fungsi dari atributnya, yaitu :
- rowspan untuk menggabungkan baris;
- colspan untuk menggabungkan kolom.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tabel HTML</title>
<style>
table, th, td { border: 1px solid; }
</style>
</head>
<body>
<table>
<tr>
<th colspan="8">Sensor IR Proximity</th>
</tr>
<tr>
<td rowspan="4">
<img src="https://praktekotodidak.com/wp-content/uploads/2022/03/Sensor-infrared-Proximity.png" width="150" />
</td>
</tr>
<tr>
<td>Fitur</td>
<td>
<ul>
<li>Menggunakan Fotodioda sebagai IR Receiver</li>
<li>Output aktif rendah</li>
<li>Konsumsi daya rendah dengan rentang deteksi yang lumayan jauh</li>
<li>Mendukung logika TTL dan CMOS</li>
</ul>
</td>
</tr>
<tr>
<td>Spesifikasi</td>
<td>
<ul>
<li>Tegangan input: 3 s/d 5 VDC</li>
<li>Konsumsi arus: 43mA</li>
<li>Ukuran modul: 3.2 cm X 1.4 cm</li>
<li>Jarak deteksi 2 cm s/d 40 cm</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Hasil tampilan di browser:
Menyisipkan Elemen yang Lain ke dalam Sel
Di salam sel <td> dan <th>, kita bisa menyisipkan elemen HTML yang lain, seperti gambar, link, list, dan lain-lain.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tabel HTML</title>
<style>
table, th, td { border: 1px solid; }
</style>
</head>
<body>
<table>
<tr>
<th colspan="8">Sensor IR Proximity</th>
</tr>
<tr>
<td rowspan="4">
<img src="https://praktekotodidak.com/wp-content/uploads/2022/03/Sensor-infrared-Proximity.png" width="150" />
</td>
</tr>
<tr>
<td>Fitur</td>
<td>
<ul>
<li>Menggunakan Fotodioda sebagai IR Receiver</li>
<li>Output aktif rendah</li>
<li>Konsumsi daya rendah dengan rentang deteksi yang lumayan jauh</li>
<li>Mendukung logika TTL dan CMOS</li>
</ul>
</td>
</tr>
<tr>
<td>Spesifikasi</td>
<td>
<ul>
<li>Tegangan input: 3 s/d 5 VDC</li>
<li>Konsumsi arus: 43mA</li>
<li>Ukuran modul: 3.2 cm X 1.4 cm</li>
<li>Jarak deteksi 2 cm s/d 40 cm</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Hasil tampilan di browser:
Begitulah cara membuat tabel di HTML. Untuk artikel selanjutnya silahkan dibaca : Belajar HTML#9 Cara Membuat List di HTML
