» » Table Element Part 6

Table Element Part 6

By Fadli_Computer Labels: at Februari 20, 2026

Assalamu’alaikum Wr. Wb

Pengantar

Hai bagaimana kabarnya? Semoga baik-baik saja ya teman-teman. Melanjutkan artikel yang sebelumnya membahas tentang Table Element menggunakan Atribut Valign. Dan pada kesempatan masih melanjutkan table cuman akan membahas Atribut roswpan dan Colspan pada HTML.

Atribut roswpan dan atribut colspan untuk menggabungkan tabel, roswpan digunakan untuk menggabungkan baris, sedangkan colspan diguanakan untuk menggabungkan kolom. Kedua atribut ini masih ditempatkan di tag <td>. 

Harapan saya teman-teman dapat mempraktekan dan lebih baik lagi memahami materi kali ini dengan catatan di ulang pelajaran yang sudah dipraktekan agar tidak lupa. Teman-teman mulai dari sini harus membaca dengan teliti agar tidak salah memahami materinya. Semoga sukses dan berhasil, Amin. 

Praktik HTML
Pada praktik kali kita akan membahas roswpan dan colspan, mari kita mulai praktiknya, struktur kode HTML
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alami Computer</title>
</head>
<body>
    <h3>Atribut rowspan dan colspan pada HTML</h3>
    <table border="1">
        <tr>
            <td rowspan="2">Bulan</td>
            <td>No</td>
            <td>Nama Lenkap</td>
            <td>Jenis Kelamin</td>
            <td>Tempat, Tanggal Lahir</td>
            <td>Berat badan</td>
            <td>Tinggi</td>
            <td colspan="3">
                <p style="text-align: center;">Pendidikan Terakhir</p>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>Julhasan</td>
            <td>Laki-laki</td>
            <td>Jakarta, 11 Januari 2000</td>
            <td>75kg</td>
            <td>170</td>
            <td>SDN 1 Jakarta</td>
            <td>SMPN 1 Jakarta</td>
            <td>SMAN 1 Jakarta</td>
        </tr>
        <tr>
            <td rowspan="3">Januari</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mawar Indah</td>
            <td>Perempuan</td>
            <td>Bandung, 11 Februari 2001</td>
            <td>60kg</td>
            <td>168</td>
            <td>SDN 1 Bandung</td>
            <td>SMPN 1 Bandung</td>
            <td>SMAN 1 Bandung</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Fitrah Samsudin</td>
            <td>Laki-laki</td>
            <td>Semarang, 13 Maret 2002</td>
            <td>75kg</td>
            <td>175</td>
            <td>SDN 1 Semarang</td>
            <td>SMPN 1 Semarang</td>
            <td>SMAN 1 Semarang</td>
        </tr>
    </table>
</body>
</html>
 

Gambar 1 kode rowspan dan colspan

Gambar 2 hasil kode rowspan dan colspan

 

Sekarang kita akan coba membuat menggunakan CSS, kode dibawah ini: 

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alami Computer</title>
</head>
<body>
    <h3>Atribut rowspan dan colspan pada HTML</h3>
    <table border="1">
        <tr>
            <td rowspan="2">Bulan</td>
            <td>No</td>
            <td>Nama Lenkap</td>
            <td>Jenis Kelamin</td>
            <td>Tempat, Tanggal Lahir</td>
            <td>Berat badan</td>
            <td>Tinggi</td>
            <td colspan="3">
                <p style="text-align: center;">Pendidikan Terakhir</p>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>Julhasan</td>
            <td>Laki-laki</td>
            <td>Jakarta, 11 Januari 2000</td>
            <td>75kg</td>
            <td>170</td>
            <td>SDN 1 Jakarta</td>
            <td>SMPN 1 Jakarta</td>
            <td>SMAN 1 Jakarta</td>
        </tr>
        <tr>
            <td rowspan="3">Januari</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mawar Indah</td>
            <td>Perempuan</td>
            <td>Bandung, 11 Februari 2001</td>
            <td>60kg</td>
            <td>168</td>
            <td>SDN 1 Bandung</td>
            <td>SMPN 1 Bandung</td>
            <td>SMAN 1 Bandung</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Fitrah Samsudin</td>
            <td>Laki-laki</td>
            <td>Semarang, 13 Maret 2002</td>
            <td>75kg</td>
            <td>175</td>
            <td>SDN 1 Semarang</td>
            <td>SMPN 1 Semarang</td>
            <td>SMAN 1 Semarang</td>
        </tr>
    </table>
</body>
</html> 

Gambar 3 kode rowspan dan colspan di css
 
Gambar 4 hasil kode rowspan dan colspan di css

 

Kesimpulan

Pembahasan tentang atribut rowspan dan colspan pada table yang digunakan untuk keperluan menyajikan data secara menarik. Tujuan teman-teman yang membuat file html atau pemograman bisa menggunakan dengan baik dan sesuai dengan fungsi dan kelayakan pada sebuah kode-kode program yang akan dijalankan.
 
Terimakasih sudah berkunjung sampai ketemu di artikel selanjutnya, jangan lupa ikuti chanel kami yaitu : 

YouTube: Alami Computer
Website: www.alamicomputer.id
Instagram: chaerullah.fadli

Daftar Pustaka: Tim Riset Alami Computer 

 

2 komentar:

Berkomentar dengan baik dan benar

Back to Top