Belajar Tabel HTML Part 2 - Cara menggabungkan sel Tabel (rowspan dan colspan)

Desember 16, 2021 Posting Komentar

Belajar Tabel html selanjutnya, diartikel kali ini mimin akan membahas soal pembuatan Tabel html penggabungan sel - sel pada tabel dalam html dengan atribut rowspan dalam colspan.

Belajar Tabel HTML Part 2 - Cara menggabungkan sel Tabel (rowspan dan colspan)

Rowspan digunakan untuk menggabungkan baris rows pada html dengan 2 baris rows atau lebih. Dan colspan juga digunakan untuk menggabungkan baris kolom diantara 2 baris kolom atau lebih.

Keduanya memiliki peran yang sama. Untuk memudahkan pekerjaan membuat tabel di html sama seperti membuat tabel di ms.word hanya saja di ms.word tidak dicoding melainkan ada sebuah panel pilihan.

Membuat tabel dengan atribut ini biasanya digunakan untuk membuat agenda absensi siswa atau bisa juga digunakan untuk membuat yang lain. Contoh dasarnya anda tinggal membuat langkahnya seperti berikut:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Atribut Colspan dan Rowspan Tag Tabel</title>
</head>
<body>
<h1>Contoh atribut colspan dan rowspan </h1>
<table border="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td colspan="2" >Baris 2, Kolom 2 & 3</td>
    </tr>
    <tr>
        <td rowspan="2"> Baris 3 & 4, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Kedua atribut ini jauh berbeda dengan atribut cellpadding dan cellspacing. Pemberian jarak antara 2 sel jadi satu itu tugas dari colspan dan rowspan.