Mengenal Rowspan Dalam Tabel HTML

Dalam membuat tabel, sering kali ada item yang sama yang ditulis. Misalnya pada tabel 1 berikut:

No	Nama	Tempat/Tanggal Lahir	Alamat	Keterangan
1	La Ode Raja Hussein A.A	Oensuli, 02-04-2010	Desa Oensuli
2	La Ode Safarudin T. An Nuh	Oensuli, 17-01-2012	Desa Oensuli

Tampak pada tabel di atas bahwa alamat adalah sama yakni Desa Oensuli. Item alamat dalam tabel di atas, dapat kita jadikan 1 (merger baris, dalam html disebut rowspan). Menjadi sebagai berikut (tabel 2):

No	Nama	Tempat/Tanggal Lahir	Alamat	Keterangan
1	La Ode Raja Hussein A.A	Oensuli, 02-04-2010	Desa Oensuli
2	La Ode Safarudin T. An Nuh	Oensuli, 17-01-2012

Bagaimana cara membuatnya?
Sintaks pada tabel 1 adalah sebagai berikut:

<table align="center" border="1" bordercolor="black" cellpadding="1" cellspacing="0">


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">No</td>
<td align="center" bgcolor="blue" valign="middle" width="150px">Nama</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Tempat/Tanggal Lahir</td>
<td align="center" bgcolor="green" valign="middle" width="260px">Alamat</td>
<td align="center" bgcolor="aqua" valign="middle" width="100px">Keterangan</td>
 </tr>


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">1</td>
<td align="center" bgcolor="blue" valign="middle" width="50px">La Ode Raja Hussein A.A</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Oensuli, 02-04-2010</td>

<td align="center" bgcolor="green" valign="middle" width="260px">Desa Oensuli</td> 

<td align="center" bgcolor="aqua" valign="middle" width="100px"></td>
</tr>


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">2</td>
<td align="center" bgcolor="blue" valign="middle" width="50px">La Ode Safarudin T. An Nuh</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Oensuli, 17-01-2012</td>

<td align="center" bgcolor="green" valign="middle" width="260px">Desa Oensuli</td> 

<td align="center" bgcolor="aqua" valign="middle" width="100px"></td>
</tr>


</table>

Yang akan kita merger adalah kolom alamat yakni pada baris 2 dan 3 atau dalam sintaks di atas yang dicetak merah. Dalam melakukan merger baris, kita menambahkan sintaks rowspan="angka" pada baris dimana kita akan mulai. Banyaknya baris yang akan di merger adalah sama dengan angka yang dimasukkan dalam sintaks. Misalnya, jika baris yang akan kita merger adalah 2 baris, sintaksnya adalah: rowspan="2", hanya saja pada baris/sel selanjutnya tidak dimasukkan lagi. Misalnya pada contoh di atas (yang dicetak merah), cukup yang dicetak merah pertama saja yang diisi. Seperti contoh berikut:

<table align="center" border="1" bordercolor="black" cellpadding="1" cellspacing="0">


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">No</td>
<td align="center" bgcolor="blue" valign="middle" width="150px">Nama</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Tempat/Tanggal Lahir</td>
<td align="center" bgcolor="green" valign="middle" width="260px">Alamat</td>
<td align="center" bgcolor="aqua" valign="middle" width="100px">Keterangan</td>
 </tr>


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">1</td>
<td align="center" bgcolor="blue" valign="middle" width="50px">La Ode Raja Hussein A.A</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Oensuli, 02-04-2010</td>

<td align="center" bgcolor="green" valign="middle" width="260px" rownspan="2">Desa Oensuli</td> 

<td align="center" bgcolor="aqua" valign="middle" width="100px"></td>
</tr>


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">2</td>
<td align="center" bgcolor="blue" valign="middle" width="50px">La Ode Safarudin T. An Nuh</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Oensuli, 17-01-2012</td>

<td align="center" bgcolor="green" valign="middle" width="260px">Desa Oensuli</td> 

<td align="center" bgcolor="aqua" valign="middle" width="100px"></td>
</tr>


</table>

Menjadi sebagai berikut:

<table border="1" bordercolor="black" align="center" cellpadding="1" cellspacing="0" Width="750px">

<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">No</td>
<td bgcolor="blue" align="center" valign="middle" width="150px">Nama</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Tempat/Tanggal Lahir</td>
<td bgcolor="green" align="center" valign="middle" width="260px">Alamat</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px">Keterangan</td>
</tr>

<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">1</td>
<td bgcolor="blue" align="center" valign="middle" width="50px">La Ode Raja Hussein A.A</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Oensuli, 02-04-2010</td>
<td bgcolor="green" align="center" valign="middle" width="260px" rowspan="2">Desa Oensuli</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px"></td>
</tr>

<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">2</td>
<td bgcolor="blue" align="center" valign="middle" width="50px">La Ode Safarudin T. An Nuh</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Oensuli, 17-01-2012</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px"></td>
</tr>

</table>

Hasilnya seperti tabel 2 di atas.

Anda dapat mencoba dengan tabel dengan baris yang banyak.