Pada tutorial sebelumnya tentang Membuat Tabel Pada HTML Dengan Tag Table Dasar. Di postingan tersebut kita sudah belajar membuat tabel dengan menggunakan tag <table>, <tr>, <th> dan <td> termasuk juga dengan atribut border, width, cellpadding dan cellspacing. Pada tutorial kali ini kita akan melanjutkan dengan membuat tabel yang lebih kompleks, seperti penggunaan colspan, rowspan, Table Header, Table Body, dan Table Footer.
Menggunakan Colspan dan Rowspan (Merge Cell)
Kita akan menggunakan atribut colspan jika ingin menggabungkan dua atau lebih kolom menjadi satu kolom. Cara yang sama kita gunakan ketika akan menggabungkan dua atau lebih baris maka kita menggunakan rowspan.
Contoh penggunaan Colspan dan Rowspan pada tabel HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html> <head> <title>Belajar Membuat tabel HTML Bersama SolusiLain.Com</title> </head> <body> <h3>Daftar Peserta Kursus HTML</h3> <table border="1" width="600px" cellpadding="10px" cellspacing="0px"> <tr> <th rowspan="2">No</th> <th rowspan="2">Nama Lengkap</th> <th rowspan="2">Alamat</th> <th colspan="2">Nilai</th> </tr> <tr> <th>Angka</th> <th>Huruf</th> </tr> <tr> <td>1</td> <td>Alexander Paijo</td> <td>Bengkulu</td> <td>80</td> <td>A</td> </tr> <tr> <td>2</td> <td>Carolina Roberta</td> <td>Medan</td> <td>65</td> <td>C</td> </tr> </table> </body> </html> |
Tampilan hasil dari kode HTML Table di atas dapat dilihat pada gambar di bawah ini.
Menggunakan Table Header, Table Body, dan Table Footer
Tabel HTML dapat dibagi menjadi tiga bagian yaitu header, body, dan footer. Header dan footer agak mirip dengan header dan footer dalam dokumen yang diproses kata atau kalimat yang akan tetap sama untuk ditampilkan disetiap halaman, sedangkan body adalah konten/isi dari tabel.
Tiga elemen untuk memisahkan header, body dan footer adalah:
- <thead> – untuk membuat header tabel terpisah.
- <tbody> – untuk menunjukkan bagian utama atau body tabel.
- <tfoot> – untuk membuat footer tabel terpisah.
Tabel dapat berisi beberapa elemen <tbody> untuk menunjukkan halaman atau grup data yang berbeda. Tetapi perlu dicatat bahwa tag <thead> dan <tfoot> harus muncul sebelum tag <tbody>.
Berikut contoh penggunaannya:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <title>Belajar Membuat tabel HTML Bersama SolusiLain.Com</title> </head> <body> <h3>Daftar Peserta Kursus HTML</h3> <table border="1" width="600px" cellpadding="10px" cellspacing="0px"> <thead> <tr> <th rowspan="2">No</th> <th rowspan="2">Nama Lengkap</th> <th rowspan="2">Alamat</th> <th colspan="2">Nilai</th> </tr> <tr> <th>Angka</th> <th>Huruf</th> </tr> </thead> <tfoot> <td colspan="5">Sumber Data : SolusiLain.Com</td> </tfoot> <tbody> <tr> <td>1</td> <td>Alexander Paijo</td> <td>Bengkulu</td> <td>80</td> <td>A</td> </tr> <tr> <td>2</td> <td>Carolina Roberta</td> <td>Medan</td> <td>65</td> <td>C</td> </tr> </tbody> </table> </body> </html> |
Penggunaan Header, Body dan Footer pada Tabel HTML pada contoh diatas menghasilkan tampilan seperti berikut ini.
Demikian tutorial tentang Membuat Tabel Pada HTML Dengan Tag Table Lanjutan, semoga bermanfaat.