Cara Membuat Tabel dalam Html
Untuk membuat tabel dalam html, kita membutuhkan lebih dari satu tag. Selain itu, tabel terdiri dari empat unsur utama, yaitu :
- Baris
- Sel
- Kolom
- Garis
Berikut ini adalah beberapa tag yang kita perlukan untuk membuat tabel dalam html
- Tag <table> untuk membungkus table nya
- Tag <thead> untuk membungkus bagian kepala dari tabel
- Tag <tbody> untuk membungkus bagian body dari tabel
- Tag <tr> (table row) untuk membuat baris
- Tag <td> (table data) untuk membuat sel
- Tag <th> (table head) untuk membuat judul pada header
Diantara keenam tag diatas, sebenarnya tag yang paling penting untuk diingat adalah tag <table>, <td>, dan <tr>. Sisanya bersifat opsional boleh digunakan boleh tidak. Berikut ini contoh codingan nya.
<!DOCTYPE html>
<html>
<head>
<title>Tabel dalam Html</title>
</head>
<body>
<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>
</table>
</body>
</html>
Hasilnya seperti dibawah ini
Demo contoh diatas masih seperti teks biasa, belum memiliki garis layaknya sebuah tabel. Mengapa tidak ada garisnya ? Karena kita belum menambahkan atribut border pada tag <table>. Agar tabelnya memiliki garis, tambahkan border="1" di dalam tag <table>. Contohnya seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Tabel dalam Html</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>
Hasilnya seperti dibawah ini
Nilai "1" pada atribut border adalah ukuran garisnya. Semakin besar nilai nya, maka akan semakin besar pula ukuran garisnya. Nilai "1" adalah ukuran garis yang paling kecil.
Mengatur Jarak Sel dengan Cellpadding
Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis dalam sel. Atribut cellpadding bisa kita gunakan di dalam tag <table>. Contoh codingan nya seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Tabel dalam Html</title>
</head>
<body>
<table border="1" cellpadding="10">
<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>
Hasilnya seperti dibawah ini
Nilai "10" pada atribut cellpadding adalah ukuran jarak antara teks sel dengan garis. Jika nilai cellpadding nya semakin besar, maka jarak teks dengan garis semakin luas.
Menambahkan Warna pada Sel dan Baris
Untuk menambahkan warna pada sel dan baris, kita juga membutuhkan sebuah atribut. Atribut yang dipakai untuk menambahkan warna pada sel dan baris adalah atribut bgcolor yang akan kita gunakan di dalam tag <td> (untuk sel) dan <tr> (untuk baris). Atribut bgcolor bisa kita isikan dengan kode warna dalam heksadesimal dan bisa juga menggunakan nama warna dalam bahasa inggris. Berikut ini contoh codingan nya.
<!DOCTYPE html>
<html>
<head>
<title>Tabel dalam Html</title>
</head>
<body>
<table border="1" cellpadding="10">
<tr bgcolor="blue">
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr bgcolor="#00e1ff">
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
</body>
</html>
Hasilnya seperti dibawah ini
Menggabungkan Sel pada Tabel
Selain menambahkan warna, kita juga bisa menggabungkan sel pada tabel. Untuk menggabungkan sel pada tabel, kita membutuhkan dua atribut.
- rowspan : untuk menggabungkan baris
- colspan : untuk menggabungkan kolom
Kedua atribut diatas bisa kita berikan pada tag <td> dan tag <th>. Berikut ini contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<title>Tabel dalam HTML</title>
</head>
<body>
<table border="1" celpadding="8">
<tr>
<th rowspan="2" bgcolor="blue">Bulan</th>
<th colspan="2" bgcolor="#00E1FF">Hasil Panen</th>
</tr>
<tr>
<th>Ikan Mas</th>
<th>Ikan Lele</th>
</tr>
<tr>
<td>Januari</td>
<td>300 Kg</td>
<td>167 Kg</td>
</tr>
<tr>
<td>Februari</td>
<td>257 Kg</td>
<td>351 Kg</td>
</tr>
<tr>
<td>Maret</td>
<td>500 Kg</td>
<td>345 Kg</td>
</tr>
<tr>
<td>April</td>
<td>480 Kg</td>
<td>253 Kg</td>
</tr>
</table>
</body>
</html>
Hasilnya seperti dibawah ini
Menyisipkan Elemen Lain ke dalam Sel
Kita juga bisa menyisipkan elemen lain ke dalam sel <td> dan <th>, misalnya seperti gambar, link, video, list dan elemen lainnya. Berikut ini adalah contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<title>Tabel dalam HTML</title>
</head>
<body>
<table border="1" cellpadding="8">
<tr>
<th colspan="3" bgcolor="yellow">Produk Terlaris</th>
</tr>
<tr>
<td rowspan="4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcdkyhkDMRmpEsDr1WwqxV9tHaf7z9f3CA-gk8z8jieWuM04NscDwr_lLvz082VJm3RgjA9MwpDbaZLOoA5Yx7vsUdnP2sQg5VBw16bQ3Lm8pyrYjyK7bntR6TCorNoKzc5gLylM84KsUkd5aSU-HyRmqSEOY9xbP5QP1PktIl5reu4dpQArHGURA7DUx9/s500/lele.jpg" width="200" />
</td>
</tr>
<tr>
<td>Nama</td>
<td>Bibit Lele</td>
</tr>
<tr>
<td>Harga</td>
<td>Rp 250.000</td>
</tr>
<tr>
<td>Kriteria</td>
<td>
<ul>
<li>Berisi Tutorial</li>
<li>Ukuran: 5 cm</li>
<li>Masa Panen: 3 Bulan</li>
<li>Jumlah: 100 buah</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Hasilnya seperti dibawah ini