Membuat Tabel Pada HTML
Dalam menampilkan informasi data yang terstruktur pada web dalam bentuk baris dan kolom kita biasanya menggunakan bentuk tabel. Dalam Membuat Tabel Pada HTML tag yang sering digunakan adalah tag <table> lalu ada tag <tr> dan juga tag <td>. penjelasanya sebagai berikut :
-
- Tag <table> untuk membungkus tabelnya, tanpa tag ini penggunaan tag <tr> dan <td> tidak bisa difungsikan dengan baik.
- 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 table
Perhatikan contoh di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table>
<tr>
<td> Baris 1\ Kolom 1</td>
<td> Baris 1\ Kolom 2</td>
<td> Baris 1\ Kolom 3</td>
</tr>
<tr>
<td> Baris 2\ Kolom 1</td>
<td> Baris 2\ Kolom 2</td>
<td> Baris 2\ Kolom 3</td>
</tr>
<tr>
<td> Baris 3\ Kolom 1</td>
<td> Baris 3\ Kolom 2</td>
<td> Baris 3\ Kolom 3</td>
</tr>
<tr>
<td> Baris 4\ Kolom 1</td>
<td> Baris 4\ Kolom 2</td>
<td> Baris 4\ Kolom 3</td>
</tr>
</table>
</body>
</html>
hasilnnya :
jika dilihat dari hasil diatas terlihat garis pada tabel tidak ada. maka kita perlu menambahkan atribut <table border=”1″ > seperti code di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
<tr>
<td> Baris 1\ Kolom 1</td>
<td> Baris 1\ Kolom 2</td>
<td> Baris 1\ Kolom 3</td>
</tr>
<tr>
<td> Baris 2\ Kolom 1</td>
<td> Baris 2\ Kolom 2</td>
<td> Baris 2\ Kolom 3</td>
</tr>
<tr>
<td> Baris 3\ Kolom 1</td>
<td> Baris 3\ Kolom 2</td>
<td> Baris 3\ Kolom 3</td>
</tr>
<tr>
<td> Baris 4\ Kolom 1</td>
<td> Baris 4\ Kolom 2</td>
<td> Baris 4\ Kolom 3</td>
</tr>
</table>
</body>
</html>
hasilnya seperti dibawah ini :
Menambahkan Warna pada cell dan Baris
Untuk menambahkan warna pada cell dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk cell) dan<tr> (untuk baris) sedangkan nilai atribut bisa diisi dengan kode warna heksadesimal atau nama warna dalam bahasa inggris.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
<tr>
<td bgcolor="yellow"> Baris 1\ Kolom 1</td>
<td> Baris 1\ Kolom 2</td>
<td> Baris 1\ Kolom 3</td>
</tr>
<tr bgcolor="#00ff80">
<td> Baris 2\ Kolom 1</td>
<td> Baris 2\ Kolom 2</td>
<td> Baris 2\ Kolom 3</td>
</tr>
<tr>
<td> Baris 3\ Kolom 1</td>
<td> Baris 3\ Kolom 2</td>
<td> Baris 3\ Kolom 3</td>
</tr>
<tr>
<td> Baris 4\ Kolom 1</td>
<td> Baris 4\ Kolom 2</td>
<td> Baris 4\ Kolom 3</td>
</tr>
</table>
</body>
</html>
hasilnya :
Menggabungkan cell Tabel
Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan:
-
- rowspan untuk menggabungkan baris;
- colspan untuk menggabungkan kolom.
Atribut ini bisa kita berikan kepada tag <td> atau <th>. lihat code di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
<tr>
<th rowspan="4" bgcolor="yellow"> rowspan Baris 1\ Kolom 1</td>
<th colspan="3" bgcolor="#00ff80"> colspan Baris 1\ Kolom 2</td>
</tr>
<tr >
<td> Baris 2\ Kolom 1</td>
<td> Baris 2\ Kolom 2</td>
<td> Baris 2\ Kolom 3</td>
</tr>
<tr>
<td> Baris 3\ Kolom 1</td>
<td> Baris 3\ Kolom 2</td>
<td> Baris 3\ Kolom 3</td>
</tr>
<tr>
<td> Baris 4\ Kolom 1</td>
<td> Baris 4\ Kolom 2</td>
<td> Baris 4\ Kolom 3</td>
</tr>
</table>
</body>
</html>
hasilnya :
Bagian tersulit dari membuat tabel pada HTML adalah saat menggabungkan cell. Karena kita harus jeli dalam melihat berapa ukuran cell yang akan digabungkan dengan rowspan dan colspan. Oleh karena itu kita harus Sering-sering latihan dengan contoh kasus tertentu. Coba lihat tabel-tabel yang ada di sekeliling kita, lalu coba buat tabel tersebut dalam HTML.
