Fungsi atribut rowspan
rowspan digunakan untuk menggabungkan beberapa sel tabel menjadi 1 secara vertikal. rowspan, jika diistilahkan mudahnya adalah 'berapa baris ke bawah yang akan digabungkan'.
Sebagai contoh, kita ingin membuat tabel yang terdiri dari 2 kolom, yang mana kedua kolom tersebut punya jumlah baris yang berbeda. Kolom 1-nya hanya memiliki 1 baris, sedangkan kolom 1-nya lagi memiliki 3 baris.
Bagaimana caranya?
Caranya adalah dengan menambahkan atribut rowspan pada tag <td>. Misalnya atribut rowspan diisi dengan 4, maka sel tersebut akan menggabungkan diri dengan 3 baris dibawahnya, dihitung dari baris yang memiliki atribut rowspan.
Seperti ini kode HTMLnya.
<!DOCTYPE html> <html> <head> <title>Menggabungkan sel tabel dengan rowspan</title> </head> <body> <table border="1" cellpadding="1" cellspacing="1"> <tr> <td rowspan="4">Ini cuma 1 baris</td> <td>Ini baris 1 di kolom sebelahnya</td> </tr> <tr> <td>Ini baris 2 di kolom sebelahnya</td> <tr> <tr> <td>Ini baris 3 di kolom sebelahnya</td> <tr> </table> </body> </html>
Dan seperti ini jadinya.
Fungsi atribut colspan
Atribut colspan digunakan untuk menggabungkan beberapa sel tabel menjadi 1 secara horizontal. colspan, jika diistilah mudahkan adalah 'berapa kolom ke samping yang akan digabungkan'.
Sebagai contoh, kita punya sebuah tabel dengan 2 baris. Baris pertama hanya memiliki 1 kolom, sedangkan baris kedua memiliki 3 kolom.
Kita tinggal menambakan atribut colspan="3" pada tag <td> di baris pertama. Seperti ini kode HTMLnya.
<!DOCTYPE html> <html> <head> <title>Menggabungkan sel tabel dengan rowspan</title> </head> <body> <table border="1" cellpadding="1" cellspacing="1"> <tr> <td colspan="3">Ini baris pertama, cuma 1 kolom</td> </tr> <tr> <td>baris 2, kolom 1</td> <td>baris 2, kolom 3</td> <td>baris 2, kolom 3</td> </tr> </table> </body> </html>
Baca juga ya..
Seperti ini jadinya.
Begitulah caranya menggabungkan sel-sel tabel di HTML. Sekarang, kita sudah tau apa itu rowspan dan colspan. Jadi, sudah tau kan perbedaannya?
Selanjutnya >> Tutorial Tabel HTML: Cara Membuat Tabel Header Kolom di Tabel HTML
Tidak ada komentar:
Posting Komentar
Silakan berkomentar dengan kalimat yang bijak.