#41 Menggabungkan kolom dan baris tabel html dengan colspan rowspan
pada tutorial ini kita akan belajar menggabungkan kolom dan baris tabel pada html dengan colspan dan rowspan.
Menggabungkan kolom tabel
colspan digunakan untuk menggabungkan beberapa kolom menjadi satu kolom. colspan singkatan dari column span yang artinya renggang kolom. jadi merenggangkan kolom yang tadinya sempit menjadi renggang.
Baca juga: Struktur dasar membuat tabel pada HTML
cara penulisan colspan
<td colspan="isi_berapa_kolom">kolom</td>
Code language: HTML, XML (xml)
isi_berapa_kolom diganti dengan berapa kolom yang ingin digabungkan, misalnya ada 3 kolom yang sempit dengan kode dibawah ini.
<!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)
hasilnya
kolom diatas akan kita renggangkan menjadi satu kolom dengan menambahkan atribut colspan=”3″ seperti berikut ini.
<!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>
Code language: HTML, XML (xml)
hasilnya
Menggabungkan baris tabel
rowspan digunakan untuk menggabungkan beberapa baris menjadi satu baris.
cara penulisan rowspan
<td rowspan="isi_berapa_baris">baris</td>
Code language: HTML, XML (xml)
isi_berapa_baris diganti dengan berapa baris yang ingin digabungkan, misal ada 3 baris dan kita akan membuat 3 baris menjadi satu baris, contoh baris tabel yang belum digabungkan menjadi satu seperti kode dibawah ini.
<!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)
hasilnya
kita akan menggabungkan 3 baris kebawah menjadi satu baris dengan menambahkan atribut rowspan=”3″ dibawah ini.
<!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)
hasilnya
jika kita perhatikan ada 3 baris menjadi satu baris dengan nama Luas
Penggunaan rowspan dan colspan
untuk lebih jelasnya kita akan membuat tabel mata pelajaran tahun ajaran 2020/2021 menggunakan rowspan dan colspan
<!DOCTYPE html>
<html>
<head>
<title> menggabungkan baris dan kolom pada tabel </title>
</head>
<body>
<table border="1">
<caption>Jadwal Pelajaran</caption>
<thead>
<tr>
<th></th>
<th colspan="5">
Tahun ajaran 2020/2021
</th>
</tr>
<tr>
<th>
Jam
</th>
<th>
Senin
</th>
<th>
Selasa
</th>
<th>
Rabu
</th>
<th>
Kamis
</th>
<th>
Jum'at
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
7:00
</th>
<td>
Bahasa Indonesia
</td>
<td>
Ilmu Pengetahuan Sosial
</td>
<td rowspan="2">
Matematika
</td>
<td>
Seni Budaya
</td>
<td>
Fisika
</td>
</tr>
<tr>
<th>
10:00
</th>
<td>
Penjaskes
</td>
<td>
Pendidikan Kewarnegaraan
</td>
<td>Bahasa Iggris</td>
<td>
Pendidikan Agama
</td>
</tr>
</tbody>
</table>
</body>
</html>
Code language: HTML, XML (xml)
hasilnya
Pencarian di thohirdev:
- belajar membuat tabel html colspan rowspan
- menggabungkan 2 sel menjadi satu
- fungsi dari colspan dan rowspan
- atribut colspan dan rowspan