Spanning Cell

 

Terkadang kita membutuhkan sebuah sel yang mencakup untuk dua kolom ataupun dua baris sekaligus. Dalam aplikasi seperti Microsoft Word, hal ini biasa kita kenal sebagai merging cell atau menggabungkan sebuah sel. Ini memang menjadi sebuah fitur dasar dalam membuat sebuah tabel. Sehingga, pada HTML pun kita dapat melakukan hal tersebut. 

Pada HTML hal ini lebih dikenal sebagai Spanning cell yang artinya menjangkau atau merentangkan sebuah ukuran sel lebih dari ukuran yang biasanya. Dengan spanning cell kita dapat membuat sebuah tabel yang lebih kompleks, tetapi akan membuat markup yang kita tulis menjadi sedikit sulit dibaca.

Column Spans

Untuk merentangkan sebuah kolom (column spanning) kita bisa menggunakan atribut colspan pada elemen <td> atau <th>. Berikut contoh untuk penggunaan colspan sehingga sebuah header mencangkup dua kolom.

<table>
   <tr>
       <th>18:00</th>
       <th>19:00</th>
       <th>20:00</th>
   </tr>
   <tr>
       <td colspan="2">Avenger Infinity Wars</td>
       <td>It Chapter 2</td>
   </tr>
   <tr>
       <td>One Piece: Stampede</td>
       <td>Weathering With You</td>
       <td>Gundala</td>
   </tr>
   <tr>
       <td>Gundala</td>
       <td colspan="2">Avenger Infinity Wars</td>
   </tr>
</table>

Maka sebuah elemen yang menggunakan atribut colspan akan mencakup ruang kolom sesuai nilai dari atribut itu sendiri.

Untuk lebih jelasnya, kita bisa tambahkan atribut border pada elemen <table> agar terdapat garis pada tepi selnya.

<table border="1">
   <tr>
       <th>18:00</th>
       <th>19:00</th>
       <th>20:00</th>
   </tr>
   <tr>
       <td colspan="2">Avenger Infinity Wars</td>
       <td>It Chapter 2</td>
   </tr>
   <tr>
       <td>One Piece: Stampede</td>
       <td>Weathering With You</td>
       <td>Gundala</td>
   </tr>
   <tr>
       <td>Gundala</td>
       <td colspan="2">Avenger Infinity Wars</td>
   </tr>
</table>

Tampilan pada browser:

Row Spans

Untuk merentangkan sebuah baris (row spanning) kita dapat menggunakan atribut rowspan. Sama seperti column spanning, tetapi atribut ini akan merentangkan sebuah sel ke bawah. Berikut contohnya.

<table border="1">
   <tr>
       <th rowspan="3">18:00</th>
       <td>Avenger Infinity Wars</td>
   </tr>
   <tr>
       <td>One Piece: Stampede</td>
   </tr>
   <tr>
       <td>Gundala</td>
   </tr>
</table>

Perhatikan elemen <th> yang diberi nilai atribut rowspan. Elemen tersebut berada pada baris pertama dan akan memakan tiga baris ke bawahnya. Jadi pada baris tersebut kita membutuhkan dua buah elemen (<th> dan <td>) dan pada baris selanjutnya (baris dua dan tiga) kita hanya perlu satu buah elemen <td> saja. Sehingga jika dilihat pada browser akan nampak seperti ini: