Mempelajari Fungsi Colspan dan Rowspan pada Tabel

Mempelajari Fungsi Colspan dan Rowspan pada Tabel - Jika kalian mempelajari HTML tentu kalian akan menemukan table yang merupakan bagian dari dokumen HTML dimana dahulu ketika layout halaman sebelum adanya CSS table digunakan untuk mengatur tata letak. Kemudian ada bagian yang sering sekali berhubungan dengan tabel yakni atribut colspan dan rowspan, apa kalian tahu fungsi kedua atribut tersebut ? Nah, bagi kalian yang ingin tau lebih dari masing - masing atribut colspan dan rowspan, berikut akan saya jelaskan Fungsi Colspan dan Rowspan pada Tabel.

Colspan atau column span merupakan atribute HTML yang berfungsi untuk menggabungkan beberapa kolom, sederhananya menggabungkan kolom ke samping.
Rowspan merupakan atribut HTML yang fungsi utamanya adalah menggabungkan beberapa baris, sederhananya menggabungkan baris ke bawah.

Agar lebih jelas dalam Mempelajari Fungsi Colspan dan Rowspan pada Tabel akan saya praktekan bagaimana penggunaan dari kedua atribut tersebut.

Kalian bisa buat satu file HTML kemudian kalian ketikan sintak HTML untuk membuat table dan beberapa kolom seperti berikut.

<body>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td colspan="2">5</td>
            <td>6</td>
            <td rowspan="3">7</td>
        </tr>
        <tr>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
    </table>
</body>

Dari sintak diatas ada penggunaan atribut yang bisa kalian lihat pada kolom no 5 adalah atribut colspan dimana nilai atribut colspan adalah dua yang artinya menggabungkan sebanyak 2 kolom ke samping. kemudian pada kolom 7 penggunaan atribut rowspan dengan nilai rowspan 3 yang artinya menggabungkan sebanyak 3 baris kebawah.

Penggunaan kedua atribut tersebut sangatlah mudah, tinggal dilihat kolom dan baris saja yang ingin digabungkan, apakah ke samping atau kebawah.

Semoga dengan pembahasan dan tutorial diatas bisa membuat kalian lebih faham lagi dengan fungsi dan penggunaan atribut colspan dan rowspan. Cukup sekian artikel dumetschool kali ini semoga bermanfaat dan tetap semangat belajar

29 Juni 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat