BELAJAR MEMBUAT COLSPAN DAN ROWSPAN DI HTML DIJAMIN LANGSUNG BISA

bila

 Teman-Teman pasti kebingungan kan tentang cara buat colspan dan rowspan yang mudah. Tenang blog ini punya caranya. 

Sebelum kita mulai ke tahapan membuat, lebih baik kita pahami dulu tentang Colspan dan Rowspan agar temtam-teman bisa paham dan lancar membuatnya.

Colspan dan Rowspan itu apa sih??

Colspan itu adalah atribut yang digunakan dengan tujuan menggabungkan beberapa sel menjadi satu secara harizontal. contoh colspan.

 Rowspan itu sendiri adalah atribut yang digunakan untuk menggaungkan  baris pada tabel.
contoh Rowspan


sampai sini sudah jelaskan perbedaanya. Colspan untuk menggabungkan kolom sedangkan Rowspan untuk menggabungkan baris.

Nah sekarang kita sudah paham tentang colspan dan rowspan, kita juga harus paham tentang elemen-elemen lain yang ada pada table.

Dalama html elemen table berisikan element Caption,TH,TR dan TD.
  • CAPTION
Pada HTML element <caption> ini berfungsi untuk membuat judul, dimana element ini harus berada didalam table. Element <caption>ini didukung oleh align dengan nilai top(judul di atas table )dan bottom(judul dibawah table)

  • TR
Element <tr> (table row)  merupakan element yang mendefinisikan baris , element ini harus di dalam element TABLE. 

  • TH dan TD
element <th> (table header)  ini fungsinya untuk mendefinisikan isi sel sebagai header sel pada kolom table sedangkan <td>  <table data) merupakan informasi pada table. Element <th> dan <td> terletak didalam element <tr>.

Setelah kita paham tentang element-element table, sekarang kita bisa memulai untuk mengaplikasikan pengetahuan yang kita pelajari barusan.

Mula-mula kita buat table sederhana dahulu

<html>
    <head>
        <title>Table sederhana</title>
    </head>
    <body>
        <table align="center" border="2">
            <tr>
                <th>Nama</th>
                <th>kelas</th>
            </tr>
            <tr>
                <td>dhaifina</td>
                <td>XI-RPL</td>
            </tr>
            <tr>
                <td>Cahaya</td>
                <td>XI-RPL</td>
            </tr>
            <tr>
                <td>DEA</td>
                <td>XI-TPGM</td>
            </tr>
    </body>
</html>

Begini hasil outputnya 
Selanjutnya kita buat yang sedikit lebih rumit, mulai menggunakan rowspan  dan colspannya.

Berikut sintaksnya:

<html>
    <head>
        <title>Table sederhana</title>
    </head>
    <body>
        <table align="center" border="2">
            <tr>
                <th rowspan="2">Nama</th>
                <th rowspan="2">kelas</th>
                <th colspan="3">absensi</th>
            </tr>
            <tr>
                <th>hadir</th>
                <th>sakit</th>
            </tr>
            <tr>
                <td>dhaifina</td>
                <td>XI-RPL</td>
                <td>hadir</td>
                <th>-</th>
            </tr>
            <tr>
                <td>Cahaya</td>
                <td>XI-RPL</td>
                <th>-</th>
                <td>sakit</td>
            </tr>
            <tr>
                <td>DEA</td>
                <td>XI-TPGM</td>
                <td>hadir</td>
                <th>-</th>
            </tr>
    </body>
</html>




Dan ini adalah hasilnya 
Sampai sini mudah bukan? Mudah dong , kita coba lagi ya kali ini rowspannya berada di bawah colspan, kita juga akan menggunakan &nbsp; agar mencegah pemisahan baris pada posisinya.

<html>
    <head>
        <title>table colspan dan rowspan</title>
    </head>
    <body>
        <table width="400" border="1">
            <tr>
                <td colspan="3">&nbsp; ini colspan</td>
            </tr>
            <tr>
                <td rowspan="2">&nbsp; ini rowspan</td>
                <td>&nbsp; ini table biasa</td>
                <td>&nbsp; ini table biasa</td>
            </tr>
            <tr>
                <td>&nbsp; ini table biasa</td>
                <td>&nbsp; ini table biasa</td>
            </tr>
        </table>
    </body>
</html>

Dan hasilnya akan seperti ini 

Sampai sini apakah sudah paham?

Saya akan memberikan satu contoh lagi penggunaan colspan dan rowspan, Dimana saya akan membuat 2 colspan dan 2 rowspan dalam table.

berikut sintaksnya 

<html>
    <head>
        <title> Mencoba Ulang</title>
        <style type="text/css">
        table,th,td{
            border: 1px solid darkblue;j
            border-collapse: collapse;}
            table{width:40%;}
            th,td{text-align:center;}
        </style>
    </head>
    <body>
        <h1>Data Pengunjung</h1>
        <table>
        <tr>
            <th rowspan="2">&nbsp;NO</th>
            <th rowspan="2">&nbsp;NAMA</th>
            <th rowspan="2">&nbsp;USIA</th>
            <th colspan="2">&nbsp;Status Vaksin</th>
        </tr>
        <tr>
            <td>&nbsp;Sudah</td>
            <td>&nbsp;Belum</td>
        </tr>
        <tr>
            <td>&nbsp;1</td>
            <td>&nbsp;Muhammad Naufal</td>
            <td>&nbsp;15 tahun</td>
            <td>&nbsp;Sudah vaksin</td>
            <th>&nbsp;-</th>
        </tr>
        <tr>
            <td>&nbsp;2</td>
            <td>&nbsp;Dhaifina Trimulyani</td>
            <td>&nbsp;16 Tahun</td>
            <th>&nbsp;-</th>
            <td>&nbsp;Belum Vaksin</td>
        </tr>
        <tr>
            <td>&nbsp;3</td>
            <td>&nbsp;Nayla shakila </td>
            <td>&nbsp;18 Tahun</td>
            <td>&nbsp;sudah vaksin</td>
            <th>&nbsp;-</th>
        </tr>
        <tr>
            <th wight="250" colspan="3">&nbsp;data laporan</th>
            <th rowspan="2">&nbsp;Penanggung Jawab</th>
            <th rowspan="2">&nbsp;Divisi</th>
        </tr>
        <tr>
            <td>&nbsp;Tanggal</td>
            <td>&nbsp;Jumlah pengunjung</td>
            <td>&nbsp;keuntungan </td>
        </tr>
        <tr>
            <td> &nbsp;21 Juli 2022</td>
            <td>&nbsp;130 pengunjung</td>
            <td>&nbsp;25 juta</td>
            <td> &nbsp;Syaiful muhidin</td>
            <td>&nbsp;Keamanan</td>
        </tr>
        </table>
    </body>
</html>


Dan hasilnya akan seperti ini 

Nah karena teman-teman sudah belajar penggunaan colspan dan rowspan, kali ini pasti teman teman dapat membuat sendiri di rumah. teman-teman bisa menggunakan software visualstudio atau mencoba online di html online compiler. 

sekian penjelasan saya 

Sumber referensi
Agusriadi. (2018). Dasar-Dasar Pemograman Web, DEPUBLISH.








1 Komentar