Fungsi Colspan dan Rowspan Table pada HTML

Table adalah salah satu elemen yang ada pada HTML. Fungsi table untuk membantu kita dalam memberikan data secara rapih dan tertata. Tampilan table pada HTML ini kurang lebih sama seperti table pada excel. Berisikan kotak-kotak yang didalamnya adalah sebuah data. Sesuai dengan pembahasan kita kali ini adalah fungsi colspan dan rowspan table pada HTML. Kita akan mempelajari seluk beluk mengenai table pada html lebih dalam lagi. Sebelum memulai, ada baiknya kalian harus sudah memahami struktur HTML terlebih dahulu.

Untuk membuat table cukup mudah, hal pertama yang harus kalian tulis adalah tag <table></table>. Tag table berfungsi untuk membuat table, namun sampai sini tablenya belum muncul. Ada elemen tambahan yang nantinya akan kalian tulis seperti misalnya membuat baris dan kolom. Untuk membuat baris kalian harus menuliskan tag <tr></tr>. Dan untuk membuat kolom kalian bisa menggunakan tag <td></td>. Dan sekarang kita bisa coba praktekan dengan codingan lengkapnya. Kalian bisa ikuti contoh code dibawah ini.

table.html

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<table border="1">
  <tr>
    <th>No.</th>
    <th>Nama</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Udin</td>
    <td>Jakarta</td>
  </tr>
  <tr><br>    <td>2</td>
    <td>Samsul</td>
    <td>Tangerang</td>
  </tr>
</table>

</body>
</html>

Setelah sudah kalian bisa simpan file tersebut dengan format .html. Untuk melihat hasilnya kalian bisa buka file tersebut lewat browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

Seperti itu kira-kira bentuk table pada HTML. Sekarang kita lanjut pada fungsi penggabungan baris dan kolom. Jika pada excel kita mengenal istilah merge untuk menggabungkan beberapa baris atau kolom menjadi satu. Pada HTML kita juga bisa melakukan hal tersebut dengan perintah colspan dan rowspan. Colspan adalah perintah untuk menggabungkan beberapa kolom menjadi satu. Contohnya kalian bisa rubah htmlnya menjadi seperti ini.

<table>
  <tr>
    <th colspan="2">Nama</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Udin</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Samsul</td><br>    <td>Tangerang</td>
  </tr>
</table>

Dan nanti hasilnya akan seperti ini.

Lalu ada rowspan yang berfungsi untuk menggabungkan beberapa baris menjadi satu. Contohnya seperti ini.

<table>
  <tr>
    <th>No.</th>
    <th>Nama</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Udin</td>
    <td rowspan="2">Jakarta</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Samsul</td>
  </tr>
</table>

Dan hasilnya akan seperti ini.