Apa itu rowpan di html?

Question

pada tutorial kali ini kita akan belajar menggabungkan kolom dan baris tabel pada html dengan colspan dan rowspan

Table of Contents Show

Gabungkan kolom tabel
Menggabungkan baris tabel
Penggunaan rowpan dan colspan
Apa itu rowpan dalam HTML?
Apa itu TR dan TD dalam HTML?
Atribut apa untuk menggabungkan baris?
Apa itu Kol SPAN?

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

ada 3 kolom sempit

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>
Code language: HTML, XML (xml)

hasil

hasil dari 3 kolom menjadi 1 kolom

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

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

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

Apa itu rowpan dalam HTML?

Rowspan adalah salah satu atribut yang berkaitan erat dengan pembuatan tabel. Fungsinya untuk menggabungkan beberapa data dalam satu baris. Sederhananya, gabungkan baris ke bawah.

Apa itu TR dan TD dalam HTML?

Tag < tr > (tabel baris ) untuk membuat garis. Tag td > (data tabel) untuk membuat sel. Beri tag pada header.

Atribut apa untuk menggabungkan baris?

digunakan untuk menggabungkan kolom adalah COLSPAN, sedangkan atribut untuk menggabungkan baris adalah ROWSPAN. atribut kedua dapat diterapkan ke sel mana pun dalam tabel (TH atau TD) dan untuk menggunakannya cukup menentukan berapa banyak kolom atau baris untuk digabungkan.