#41 Menggabungkan kolom dan baris tabel html dengan colspan rowspan

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

ada 3 kolom sempit

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

hasil dari 3 kolom menjadi 1 kolom

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

kita menambahkan satu baris dari 3 baris yang digabungkan menjadi satu baris

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

tabel mata pelajaran

Pencarian di thohirdev:

  • belajar membuat tabel html colspan rowspan
  • menggabungkan 2 sel menjadi satu
  • fungsi dari colspan dan rowspan
  • atribut colspan dan rowspan

  • Share
  • 17,154
  • byMuhammad Thohir S.Kom
  • Posted
  • Categories Html

    • Tutorial Terbaru