Membuat Tabel (table) dan Tag Pendukung HTML Table

Cara membuat Tabel (table) dan Tag Pendukung HTML Table - seperti kita ketahui untuk membuat sebuah tabel adalah dengan menggunakan tag <table> <tr> dan <td>, dengan ketiga tag tersebut tabel sudah bisa dibuat, tentunya dengan tambahan atribut border="1" akan memberikan pembatas garis border pada tabel, tapi selain ketiga tag html tersebut masih ada tag html pendukung dalam membuat tabel, seperti pada tabel dibawah ini:

Tag HTML Pendukung Untuk Membuat Tabel
<table>	tag untuk membuat tabel
<caption>	tag untuk title/judul pada tabel
<colgroup>	format untuk menentukan kelompok kolom, baik satu kolom atau lebih pada tabel
<col>	untuk menentukan properti kolom untuk setiap kolom pada tag <colgroup>
<thead>	tag untuk grup isi header pada tabel
<tbody>	tag untuk grup isi body pada tabel
<tfoot>	tag untuk grup isi footer pada tabel
<th>	tag untuk header sel pada tabel
<tr>	tag untuk baris pada tabel
<td>	tag untuk sel pada tabel

Atribut Pada Tag <table>

Ada beberapa atribut yang biasa dipergunakan untuk membuat tabel, seperti cellpadding, cellspacing, align, frame, bgcolor, rules, summary dan border, sayangnya semua atribut tersebut sudah tidak disupport oleh html5, kecuali atribut border yang masih support untuk html5. Untuk atribut selain border, bisa mempergunakan CSS sebagai penggantinya.

Membuat Tabel

Dengan menggunakan contoh script tabel dibawah ini, akan menghasilkan tabel sederhana dengan 2 kolom dan 3 baris, dengan tambahan atribut border="1" untuk ketebalan border pada tabel.

HTML

<table border="1">
<tr>
<td>Baris 1 - Kolom 1 - Sel 1</td>
<td>Baris 1 - Kolom 2 - Sel 2</td>
</tr>
<tr>
<td>Baris 2 - Kolom 1 - Sel 3</td>
<td>Baris 2 - Kolom 2 - Sel 4</td>
</tr>
<tr>
<td>Baris 3 - Kolom 1 - Sel 5</td>
<td>Baris 3 - Kolom 2 - Sel 6</td>
</tr>
</table>

dan hasilnya:

Baris 1 - Kolom 1 - Sel 1	Baris 1 - Kolom 2 - Sel 2
Baris 2 - Kolom 1 - Sel 3	Baris 2 - Kolom 2 - Sel 4
Baris 3 - Kolom 1 - Sel 5	Baris 3 - Kolom 2 - Sel 6

Dari contoh tabel sederhana diatas, kita bisa tambahkan judul/title sel dengan menggunakan tag <th> sebagai header sel. Secara default teks yang berada pada pada tag <th> akan berada pada tengah-tengah (center).

HTML

<table border="1">
<tr>
<th>Header Kolom 1</th>
<th>Header Kolom 2</th>
</tr>
<tr>
<td>Baris 1 - Kolom 1 - Sel 1</td>
<td>Baris 1 - Kolom 2 - Sel 2</td>
</tr>
<tr>
<td>Baris 2 - Kolom 1 - Sel 3</td>
<td>Baris 2 - Kolom 2 - Sel 4</td>
</tr>
<tr>
<td>Baris 3 - Kolom 1 - Sel 5</td>
<td>Baris 3 - Kolom 2 - Sel 6</td>
</tr>
</table>

dan hasilnya:

Header Kolom 1	Header Kolom 2
Baris 1 - Kolom 1 - Sel 1	Baris 1 - Kolom 2 - Sel 2
Baris 2 - Kolom 1 - Sel 3	Baris 2 - Kolom 2 - Sel 4
Baris 3 - Kolom 1 - Sel 5	Baris 3 - Kolom 2 - Sel 6

Tag HTML <thead> <tbody> <tfoot>

Fungsi dari ketiga tag tersebut adalah untuk mengelompokan data sel pada tiap bagiannya (header, body dan footer pada table), dengan tambahan css tentunya tampilan tabel akan lebih baik, khususnya untuk ketiga tag tersebut. Untuk penggunaan tag <thead> <tbody> <tfoot> perhatikan script dibawah ini:

HTML

<table border="1">
<thead>
<tr>
<th>Mata Pelajaran</th>
<th>Nilai</th>
</tr>
</thead>
<tbody>
<tr>
<td>Matematika</td>
<td>8</td>
</tr>
<tr>
<td>Komputer</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Jumlah</td>
<td>14</td>
</tr>
</tfoot>
</table>

dan hasilnya:

Mata Pelajaran	Nilai
Matematika	8
Komputer	6
Jumlah	14

perhatikan kerengangan pada setiap tag thead, tbody, dan tfoot

Tag HTML <caption>

Tag caption berfungsi untuk memeberikan keterangan/judul pada sebuah tabel, secara default akan membuat teks pada tag caption akan berada pada tengah-tengah (center) tabel, contoh penggunaanya :

HTML

<table border="1">
<caption>Nilai Akhir Semester</caption>
<thead>
<tr>
<th>Mata Pelajaran</th>
<th>Nilai</th>
</tr>
</thead>
<tbody>
<tr>
<td>Matematika</td>
<td>8</td>
</tr>
<tr>
<td>Komputer</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Jumlah</td>
<td>14</td>
</tr>
</tfoot>
</table>

dan hasilnya:

Nilai Akhir Semester

Mata Pelajaran	Nilai
Matematika	8
Komputer	6
Jumlah	14

Jika kalian mencoba menggunakan script tabel tersebut dan hasil tampilannya tidak sesuai dengan yang di inginkan, kalian bisa memodifikasinya dengan menambahkan Style CSS pada tag-tag pendukung tabel tersebut, untuk menjadikan tabel yang ditampilkan menjadi lebih baik.

Menggabungkan Sel Pada Tabel

Tentunya dengan kebutuhan tertentu pada sebeuah tabel kita perlu menggabungkan satu atau beberapa sel, baik itu menggabungkan sel kolom ataupun sel baris, untuk menggabungkan sel kolom, kita bisa tambahkan atribut colspan dengan nilai berupa angka banyaknya sel kolom yang akan digabungkan, seperti ini:

HTML

<table border="1">
<tr>
<td colspan="2">Gabungan Sel Kolom 1 dan 2 pada Baris 1</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>
</table>

dan hasilnya:

Gabungan Sel Kolom 1 dan 2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris pada tabel menggunakan atribut rowspan, seperti ini:

HTML

<table border="1">
<tr>
<td rowspan="2">Gabungan Sel Baris 1 dan 2 pada Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

dan hasilnya:

Gabungan Sel Baris 1 dan 2 pada Kolom 1	Baris 1 Kolom 2
	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Untuk tag <colgroup> dan tag <col> saya posting terpisah (pada posting selanjutnya)