Penggunaan Attribut Colspan dan Rowspan di Table HTML
HTML Tutorial
Penggunaan Attribut Colspan dan Rowspan - Halo sobat blogcahti. Beberapa bulan ini saya jarang update artikel karena sibuk dengan urusan kuliah. Kali ini saya update artikel tentang HTML yang maerupakan salah satu tugas mata kuliah pemrogaman web.
HTML adalah pondasi sebuah web. Oleh karena itu kita wajib mempelajari dasar-dasar HTML terlebih dahulu. Selain itu CSS mendukung untuk pengembangan desain suatu web. Disini kita akan mempelajari apa itu attribut Colspan dan Rowspan pada tabel HTML. Mari kita menuju pembahasan yang lebih lanjut dibawah ini.
Pengertian Colspan Dan Rowspan
Jika kalian sedang mempelajari tabel HTML tentu harus mengerti fungsi attribut Colspan dan Rowspan. Colspan dan Rowspan merupakan attribut HTML yang berfungsi untuk menggabungkan beberapa kolom dan baris. Attribut tersebut dibungkus didalam tag <th> ataupun <td>.Colspan sendiri merupakan kependekan dari Colomn Span yang berati banyaknya gabungan kolom dalam suatu tabel dan pada baris selanjutnya tetap diikuti oleh jumlah kolom yang sama atau lebih singkatnya kotak yang melebar kesamping.
Sedangkan Rowspan merupakan kependekan dari Row Span yang berarti banyak baris yang digabungkan atau lebih singkatnya kotak yang lebar kebawah. Jadi, kedua attribut tersebut bisa dikatakan memilik fungsi yang sama yaitu melebarkan atau menggabungkan.
(Baca juga : Cara Membuat Form Login HTML Paling Mudah)
Dengan demikian attribut Colspan dan Rowspan hanya digunakan pada kondisi tertentu. Supaya lebih jelas dan mudah dipahami akan saya berikan contoh script HTML sederhana.
Penggunaan Attribut Colspan dan Rowspan
1. Colspan
Penggunaan Colspan :<td colspan=”2”>Teks Kolom</td>
(Catatan : Angka 2 adalah banyaknya kolom yang digabungkan)
Contoh Script
HTML<!DOCTYPE html> <html> <head> <title>Table Colspan Rowspan</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Colspan and Rowspan</h2> <table> <tr> <th>Nama</th> <th>Tipe Hero</th> <th>Jenis Kelamin</th> </tr> <tr> <td colspan="2">Alicard</td> <td>Laki-laki</td> </tr> <tr> <td>Jhonson</td> <td colspan="2">Tank</td> </tr> <tr> <td colspan="3">Alice</td> </tr> <tr> <td>Harley</td> <td>Mage</td> <td>Laki-laki</td> </tr> <tr> <td>Yi Sun Shin</td> <td>Marksman</td> <td>Laki-laki</td> </tr> </table> </body> </html>
CSS
body{
background: #eee;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 70%;
margin:auto;
left:0;
right:0;
background: #fff;
}
h2{
text-align: center;
color:#445;
font-family: arial;
font-weight: normal;
}
td, th{
border: 1px solid #bbb;
text-align: center;
padding: 8px;
}
th{
color:#eee;
border-bottom:solid 1px #888;
}
tr:nth-child(1) {
background-color: #666;
}
Penjelasan :
Pada baris pertama tersebut terdapat attribut colspan=”2” yang berarti kolom Nama dan Tipe Hero digabungkan menjadi satu. Jadi, kita secara tidak langsung mengambil dua kolom sesuai urutan yaitu kolom 1 dan 2. Nah, kolom ketiga harus tetap kita buat karena kolom seluruhnya hanya ada 3 dan kita menyesuaikan yang sudah didefinisikan pada tag <td>. Oleh karena itu penulisan tag <th> hanya dilakukan sebanyak dua kali. Begitupun pada baris kedua terdapat attribut colspan yang menggabungkan kolom 2 dan 3.
2. Rowspan
Penggunaan Rowspan :<td rowspan=”3”>Teks Baris</td>
(Catatan : Angka 3 adalah banyaknya baris yang digabungkan)
Contoh Script
HTML<!DOCTYPE html> <html> <head> <title>Table Colspan Rowspan</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Colspan and Rowspan</h2> <table> <tr> <th>Nama</th> <th>Tipe Hero</th> <th>Jenis Kelamin</th> </tr> <tr> <td rowspan="2">Alicard</td> <td>Fighter</td> <td>Laki-laki</td> </tr> <tr> <td>Tank</td> <td>Laki-laki</td> </tr> <tr> <td>Alice</td> <td rowspan="2">Mage</td> <td>Perempuan</td> </tr> <tr> <td>Harley</td> <td>Laki-laki</td> </tr> <tr> <td>Yi Sun Shin</td> <td>Marksman</td> <td>Laki-laki</td> </tr> </table> </body> </html>
CSS
body{
background: #eee;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 70%;
margin:auto;
left:0;
right:0;
background: #fff;
}
h2{
text-align: center;
color:#445;
font-family: arial;
font-weight: normal;
}
td, th{
border: 1px solid #bbb;
text-align: center;
padding: 8px;
}
th{
color:#eee;
border-bottom:solid 1px #888;
}
tr:nth-child(1) {
background-color: #666;
}
Penjelasan :
Ada 2 atrribut rowspan pada baris 1 dan 3. Pada baris 1 kolom 1 digabung dengan baris 2 kolom 1. Oleh karena itu penulisan pada tag <th> di baris 2 hanya dilakukan sebanyak 2 kali karena yang satunya sudah diwakili oleh baris sebelumnya. Dan pada baris 3 kolom 2 dan baris 4 kolom 2 juga digabungkan menjadi satu, yang berati penulisan pada tag <th> di baris ke 4 hanya dilakukan sebanyak 2 kali karena kolom pertamanya sudah digabung oleh baris sebelumnya.
Seperti yang sudah saya jelaskan sebelumnya pada contoh script Colspan karena intinya sama, terlihat bahwa baris 1 kolom 1 dan baris 2 kolom 1, lalu baris 3 kolom 2 dan baris 4 kolom 2 digabungkan menjadi seperti screenshoot diatas saat dijalankan di browser.
KESIMPULAN
Sebenarnya penggunaan attribut ini cukup mudah dipahami karena kita hanya perlu melihat dimana baris atau kolom yang ingin digabungkan. Setelah itu kita abaikan berapa baris atau kolom yang akan kita buat selanjutnya.Sekian tutorial tentang penggunaan attribut colspan dan rowspan pada table html. Jika ada yang ingin ditanyakan, silahkan berkomentar.
Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.
