Tabel adalah salah satu elemen dalam HTML. Tabel berfungsi untuk membantu kita dalam menyediakan data dengan rapi dan teratur. Tampilan tabel pada HTML kurang lebih sama dengan tabel pada Excel. Berisi kotak-kotak yang berisi data. Sesuai dengan pembahasan kita kali ini adalah fungsi tabel colspan dan rowspan pada HTML. Kita akan mempelajari seluk beluk tabel di html lebih dalam. Sebelum memulai, ada baiknya Anda memahami struktur HTML terlebih dahulu
Untuk membuat table cukup mudah, hal pertama yang harus kalian tulis adalah tag
meja. html
1 | Udin | Jakarta |
2 | Samsul | Tangerang |
Setelah itu anda bisa menyimpan file dengan format. html. Untuk melihat hasilnya anda bisa membuka file tersebut melalui browser kesayangan anda. Jika berhasil maka tampilannya akan seperti ini
Seperti itu tentang bentuk tabel dalam HTML. Sekarang kita beralih ke fungsi penggabungan baris dan kolom. Kalau di excel kita mengenal istilah menggabungkan untuk menggabungkan beberapa baris atau kolom menjadi satu. Dalam HTML kita juga bisa melakukannya dengan perintah colspan dan rowspan. Colspan adalah perintah untuk menggabungkan beberapa kolom menjadi satu. Misalnya, Anda dapat mengubah html menjadi seperti ini
1 | Udin | Jakarta |
2 | Samsul | Tangerang |
Dan nanti hasilnya akan seperti ini
Lalu ada rowspan yang berfungsi untuk menggabungkan beberapa baris menjadi satu. Misalnya seperti ini
1 | Udin | Jakarta |
2 | Samsul |
Dan hasilnya akan seperti ini
Mudah bukan? . Semoga bermanfaat
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
Code language: HTML, XML [xml]
kolom
isi_berapa_kolom diganti dengan berapa kolom yang ingin digabungkan, misal ada 3 kolom sempit dengan kode dibawah ini.
Coba Skrip
_Code language: HTML, XML [xml]
menggabungkan kolom pada tabel sempit sempit sempit x x x
hasil
Kami akan memperluas kolom di atas menjadi satu kolom dengan menambahkan atribut colspan=”3″ sebagai berikut
Coba Skrip
Code language: HTML, XML [xml]
menggabungkan kolom pada tabel kolom renggang x x x
hasil
Menggabungkan baris tabel
Rowspan digunakan untuk menggabungkan beberapa baris menjadi satu baris
cara menulis rowpan
_Code language: HTML, XML [xml]
baris
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
Code language: HTML, XML [xml]
menggabungkan baris pada tabel sempit sempit sempit x x x x x x
hasil
kita akan menggabungkan 3 baris di bawah ini menjadi satu baris dengan menambahkan atribut rowspan=”3″ di bawah ini
Coba Skrip
_Code language: HTML, XML [xml]
menggabungkan baris pada tabel Luas sempit sempit sempit x x x x x x
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