Tutorial HTML: Table Colspan dan Table Rowspan
Fungsi Atribut Colspan pada Table HTML
Atribut colpsan pada pembuatan table html, merupakan singkatan dari "column span" yang berfungsi untuk menggabungkan column. Penggunaan atribut colspan dapat diletakkan dalam tag <th> maupun tag <td>, tergantung kebutuhan tabel yang akan dibuat.Membuat Tabel dengan Atribut Colspan Pada Tag<th>
Dalam contoh ini kita akan membuat sebuah tabel dimana atribut colspan diletakkan pada tag <th> seperti yang ditunjukkan oleh Gambar.1 dibawah ini : |
| Gambar.1 |
Kode HTML untuk Gambar.1 diatas:
<!DOCTYPE html> <html> <head> </head> <body> <table border="1"> <tr> <th>No</th> <th>Nama</th> <th colspan="2">No.HP</th> </tr> <tr> <td>1</td> <td>Andi Fraseria</td> <td>+6281342113</td> <td>+6281122333</td> </tr> <tr> <td>2</td> <td>Rudi Hariadi</td> <td>+6281552113</td> <td>081221333</td> </tr> </table> </body> </html>Seperti yang terlihat pada kode HTML, untuk dua data terakhir yang berada pada tag <td> akan menjadi data bagi judul No.HP.
Membuat Tabel dengan Atribut Colspan Pada Tag<td>
Sekarang kita akan menunjukkan bagaiman penerapan atribut colspan pada tag <td> seperti output yang ditunjukkan oleh Gambar.2 dibawah ini : |
| Gambar.2 |
Kode HTML untuk Gambar.2 diatas:
<!DOCTYPE html> <html> <head> </head> <body> <table border="1"> <tr> <th>No</th> <th>Nama</th> <th>No.HP</th> </tr> <tr> <td>1</td> <td colspan="2">Andi Fraseria Dengan No.HP: +6281342113</td> </tr> <tr> <td>2</td> <td>Rudi Hariadi</td> <td>+6281552113</td> </tr> </table> </body> </html>Kalau kita melihat Gambar.2, sepertinya tidak pernah kita menemukan model tabel seperti itu. Karena kolom-kolom pada baris pertama menyatakan Judul Tabel. Jika kolom-kolom pada baris pertama terdapat tiga kolom yang menjadiJudul, maka pada baris berikutnya juga terdapat tiga kolom yang akan menjadi data-datanya.
Model pembuatan tabel seperti Gambar.2 sering digunakan sebagai pembuatan layout web pada awal-awal diperkenalkan HTML.
Fungsi Atribut Rowspan pada Table HTML
Atribut rowspan berfungsi untuk menggabungkan beberapa baris menjadi satu baris. Penggunaan atribut rowspan hanya dimungkinkan pada tag <td> saja, berbeda dengan colspan.Membuat Tabel dengan Atribut Rowspan
Berikut ini kita akan sajikan contoh penerapan tabel dimana dua orang yang memiliki no.hp yang sama seperti yang ditunjukkan oleh Gambar.3 dibawah ini : |
| Gambar.3 |
<!DOCTYPE html> <html> <head> </head> <body> <table border="1"> <tr rowspan="3"> <th>No</th> <th>Nama</th> <th>No.HP</th> </tr> <tr> <td>1</td> <td>Andi Fraseria Dengan</td> <td rowspan="2">+6281342113</td> </tr> <tr> <td>2</td> <td>Rudi Hariadi</td> </tr> </table> </body> </html>
Tutorial Tabel HTML lainnya :
