Tag table mempunyai beberapa komponen, untuk baris dibentuk dengan tag <tr> dan untuk kolom dibentuk dengan tag <td>, untuk judul kolom dibuat dengan tag <th>. Tag-tag ini juga sering digabung dengan CSS untuk memformat bentuk border table, lebar tabel, padding, penataan teks pada kolom - termasuk jenis font, ukuran, jenis rata teks (kiri-tengah-kanan).
Setiap tag harus ditutup dengan tag penutup, misalnya tag <table> harus ditutup dengan tag </table>, tag <tr> dengan tag </tr> dan juga tag-tag lainnya. Jika lupa menutup, maka tampilan tabel menjadi tidak beraturan.
Kita mulai dari contoh yang paling sederhana: contoh1.html
<!DOCTYPE HTML>
<html>
<head>
<title>Belajar membuat tabel, tag table</title>
</head>
<body>
<table>
<tr>
<th>NO</th>
<th>Nama buah</th>
<th>Berat (kg)</th>
</tr>
<tr>
<td>1</td>
<td>Anggur</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Pepaya</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Catatan: Secara default, border tabel adalah 0, alias tidak tampak border. Lebar tabel juga tampak menyesuaikan dengan data yang dimasukkan, jarak antara kolom dengan teks juga terlihat rapat. Di sinilah diperlukan css untuk memformat tabel.
contoh2.html
<!DOCTYPE HTML>
<html>
<head>
<title>Belajar membuat tabel, tag table</title>
<style type="text/css">
/*tabel dengan lebar 400px. border-collapse:collapse artinya
antara kolom-kolom tidak ada jarak, bersatu. Jenis font Tahoma.
*/
table{width:400px;
font-family:Tahoma, Verdana;
border-collapse:collapse;}
/*untuk tag th, teks rata kiri*/
th{text-align:left;}
/*border tabel, th, td dengan border 1px warna hitam.
padding artinya jarak antara kolom dengan teks
*/
table,th,td{border:1px solid #000;padding:4px;}
</style>
</head>
<body>
<table>
<tr>
<th>NO</th>
<th>Nama buah</th>
<th>Berat (kg)</th>
</tr>
<tr>
<td>1</td>
<td>Anggur</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Pepaya</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Hasil penambahan css.
Table colspan
Selanjutnya, kita tambahkan atribut colspan untuk menggabung kolom. Nilainya tergantung dari banyak kolom yang ingin digabung, jika 2 maka tuliskan 2, jika 3 maka tuliskan 3 dan seterusnya.
contoh3.html
<!DOCTYPE HTML>
<html>
<head>
<title>Belajar membuat tabel, tag table</title>
<style type="text/css">
/*tabel dengan lebar 400px. border-collapse:collapse artinya
antara kolom-kolom tidak ada jarak, bersatu. Jenis font Tahoma.
*/
table{width:400px;
font-family:Tahoma, Verdana;
border-collapse:collapse;}
/*untuk tag th, teks rata kiri*/
th{text-align:left;}
/*border tabel, th, td dengan border 1px warna hitam
padding artinya jarak antara kolom dengan teks
*/
table,th,td{border:1px solid #000;padding:4px;}
</style>
</head>
<body>
<table>
<tr>
<th>NO</th>
<th>Nama buah</th>
<th>Berat (kg)</th>
</tr>
<tr>
<td>1</td>
<td>Anggur</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Pepaya</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Total</td>
<td>6 kg</td>
</tr>
</table>
</body>
</html>
Penambahan atribut colspan="2".
Table rowspan
Untuk menggabung baris, maka gunakan atribut rowspan. Untuk 2 baris berarti nilai rowspan sama dengan 2, 3 baris maka rowspan sama dengan 3, dan seterusnya.
contoh4.html
<!DOCTYPE HTML>
<html>
<head>
<title>Belajar membuat tabel, tag table</title>
<style type="text/css">
/*tabel dengan lebar 400px. border-collapse:collapse artinya
antara kolom-kolom tidak ada jarak, bersatu. Jenis font Tahoma.
*/
table{width:400px;
font-family:Tahoma, Verdana;
border-collapse:collapse;}
/*untuk tag th, teks rata kiri*/
th{text-align:left;}
/*border tabel, th, td dengan border 1px warna hitam
padding artinya jarak antara kolom dengan teks
*/
table,th,td{border:1px solid #000;padding:4px;}
</style>
</head>
<body>
<table>
<tr>
<th>NO</th>
<th>Nama buah</th>
<th>Berat (kg)</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>Anggur</td>
<td>2</td>
<td rowspan="2">6 kg</td>
</tr>
<tr>
<td>2</td>
<td>Pepaya</td>
<td>4</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Belajar membuat tabel, tag table</title>
<style type="text/css">
/*tabel dengan lebar 400px. border-collapse:collapse artinya
antara kolom-kolom tidak ada jarak, bersatu. Jenis font Tahoma.
*/
table{width:400px;
font-family:Tahoma, Verdana;
border-collapse:collapse;}
/*untuk tag th, teks rata kiri*/
th{text-align:left;}
/*border tabel, th, td dengan border 1px warna hitam
padding artinya jarak antara kolom dengan teks
*/
table,th,td{border:1px solid #000;padding:4px;}
</style>
</head>
<body>
<table>
<tr>
<th>NO</th>
<th>Nama buah</th>
<th>Berat (kg)</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>Anggur</td>
<td>2</td>
<td rowspan="2">6 kg</td>
</tr>
<tr>
<td>2</td>
<td>Pepaya</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Hasil penambahan rowspan="2".
Tabel di dalam tabel
Kita juga dapat membuat table di dalam tabel, meski jarang ditemukan, tetapi bisa saja. Anggap saja untuk mengasah logika. Tidak ada yang rumit di sini, hanya memasukkan tag table di dalam tag di mana tabel baru dibutuhkan.
<!DOCTYPE HTML>
<html>
<head>
<title>Belajar membuat tabel, tag table</title>
<style type="text/css">
/*tabel dengan lebar 400px. border-collapse:collapse artinya
antara kolom-kolom tidak ada jarak, bersatu. Jenis font Tahoma.
*/
table{width:400px;
font-family:Tahoma, Verdana;
border-collapse:collapse;}
/*untuk tag th, teks rata kiri*/
th{text-align:left;}
/*border tabel, th, td dengan border 1px warna hitam
padding artinya jarak antara kolom dengan teks
*/
table,th,td{border:1px solid #000;padding:4px;}
</style>
</head>
<body>
<table>
<tr>
<th>NO</th>
<th>Nama buah</th>
<th>Berat (kg)</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>Anggur</td>
<td>2</td>
<td rowspan="2"><table><tr><td>6 kg</td></tr></table></td>
</tr>
<tr>
<td>2</td>
<td>Pepaya</td>
<td>4</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Belajar membuat tabel, tag table</title>
<style type="text/css">
/*tabel dengan lebar 400px. border-collapse:collapse artinya
antara kolom-kolom tidak ada jarak, bersatu. Jenis font Tahoma.
*/
table{width:400px;
font-family:Tahoma, Verdana;
border-collapse:collapse;}
/*untuk tag th, teks rata kiri*/
th{text-align:left;}
/*border tabel, th, td dengan border 1px warna hitam
padding artinya jarak antara kolom dengan teks
*/
table,th,td{border:1px solid #000;padding:4px;}
</style>
</head>
<body>
<table>
<tr>
<th>NO</th>
<th>Nama buah</th>
<th>Berat (kg)</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>Anggur</td>
<td>2</td>
<td rowspan="2"><table><tr><td>6 kg</td></tr></table></td>
</tr>
<tr>
<td>2</td>
<td>Pepaya</td>
<td>4</td>
</tr>
</table>
</body>
</html>
