pada tutorial kali ini kita akan belajar menggabungkan kolom dan baris tabel pada html dengan colspan dan rowspan
Gabungkan kolom tabel
colspan digunakan untuk menggabungkan beberapa kolom menjadi satu kolom. colspan adalah kependekan dari column span yang berarti rentang kolom. sehingga merentang kolom yang tadinya sempit menjadi meregang
Baca juga. Struktur dasar pembuatan tabel dalam HTML
cara menulis colspan
<td colspan="isi_berapa_kolom">kolom</td>
Code language: HTML, XML (xml)isi_berapa_kolom diganti dengan berapa kolom yang ingin digabungkan, misal ada 3 kolom sempit dengan kode dibawah ini.
Coba Skrip
<!DOCTYPE html> <html> <head> <title> menggabungkan kolom pada tabel </title> </head> <body> <table border="1"> <tbody> <tr> <td>sempit</td> <td>sempit</td> <td>sempit</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> </tr> </tbody> </table> </body> </html>
Code language: HTML, XML (xml)_hasil
Kami akan memperluas kolom di atas menjadi satu kolom dengan menambahkan atribut colspan=”3″ sebagai berikut
Coba Skrip
<!DOCTYPE html> <html> <head> <title> menggabungkan kolom pada tabel </title> </head> <body> <table border="1"> <tbody> <tr> <td colspan="3">kolom renggang</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> </tr> </tbody> </table> </body> </html>
hasil
Menggabungkan baris tabel
Rowspan digunakan untuk menggabungkan beberapa baris menjadi satu baris
cara menulis rowpan
<td rowspan="isi_berapa_baris">baris</td>
Code language: HTML, XML (xml)fill_number_of_rows diganti dengan berapa baris yang ingin digabungkan, misal ada 3 baris dan kita akan membuat 3 baris menjadi 1 baris, misal baris tabel yang belum digabungkan menjadi satu seperti kode di bawah ini.
Coba Skrip
<!DOCTYPE html> <html> <head> <title> menggabungkan baris pada tabel </title> </head> <body> <table border="1"> <tbody> <tr> <td>sempit</td> <td>sempit</td> <td>sempit</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> </tr> </tbody> </table> </body> </html>
Code language: HTML, XML (xml)_hasil
kita akan menggabungkan 3 baris di bawah ini menjadi satu baris dengan menambahkan atribut rowspan=”3″ di bawah ini
Coba Skrip
<!DOCTYPE html> <html> <head> <title> menggabungkan baris pada tabel </title> </head> <body> <table border="1"> <tbody> <tr> <td rowspan="3">Luas</td> <td>sempit</td> <td>sempit</td> <td>sempit</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> </tr> </tbody> </table> </body> </html>
Code language: HTML, XML (xml)hasil
jika kita perhatikan ada 3 baris menjadi satu baris dengan nama Luas
Penggunaan rowpan dan colspan
untuk lebih jelasnya kita akan membuat tabel mata pelajaran tahun ajaran 2020/2021 dengan menggunakan rowspan dan colspan