Cara menggabungkan dua cell atau lebih pada tabel HTML.

Untuk menyajikan sebuah data dalam bentuk tabel kadang kita perlu menggabungkan  dua atau lebih cell dari tabel tersebut. Gabungan cell tersebut bisa terdiri dari gabungan antar baris atau bisa gabungan antar kolom.

Sebelum membahas Cara menggabungkan dua cell atau lebih pada tabel HTML  ini saya harap anda sudah menguasai betul materi sebelumnya yaitu  Cara membuat dan posting tabel dengan kode HTML. Sebab kalau belum paham betul anda akan mengalami kesulitan.


Oke selanjutnya saya akan menjelaskan bagaimana Cara menggabungkan dua cell atau lebih pada tabel HTML.  Untuk menggabungkan beberapa cell dari sebuah tabel ada dua kode  yang dibutuhkan yaitu :

• colspan   : untuk menggabungkan antar kolom.
• rowspan : untuk menggabungkan antar baris.

Agar lebih jelas maka langsung aja kita menuju ke TKP.

Penggabungan kolom

Sebagai contoh, kode tabel di bawah :

<table border="2" width="100%" style="font-size:21px;">

<tr height="40" align="center">

<td>kolom 1 baris 1</td>

<td>kolom 2 baris 1</td>

<td>kolom 3 baris 1</td>

</tr>

      <tr height="40" align="center">

      <td>kolom 1 baris 2</td>

      <td>kolom 2 baris 2</td>

      <td>kolom 3 baris 2</td>

      </tr>

<tr height="40" align="center">

<td>kolom 1 baris 3</td>

<td>kolom 2 baris 3</td>

<td>kolom 3 baris 3</td>

</tr>

</table>

Tabelnya :

kolom 1 baris 1	kolom 2 baris 1	kolom 3 baris 1
kolom 1 baris 2	kolom 2 baris 2	kolom 3 baris 2
kolom 1 baris 3	kolom 2 baris 3	kolom 3 baris 3

Kita akan menggabungkan kolom 1 baris 2 dengan kolom 2 baris 2 maka pada :

<td>kolom 1 baris 2</td>

diubah jadi  <td colspan=”2”> kolom 1+2 baris 2 </td>

sedangkan  <td>kolom 2 baris 2</td>  dihilangkan karena sudah digabung dengan kolom 1 baris 2.

Sehingga kodenya menjadi              

<table border="2" width="100%" style="font-size:21px;">

<tr height="40" align="center">

<td>kolom 1 baris 1</td>

<td>kolom 2 baris 1</td>

<td>kolom 3 baris 1</td>

</tr>

      <tr height="40" align="center">

      <td colspan="2">kolom 1+2 baris 2</td>     

      <td>kolom 3 baris 2</td>     

      </tr>

<tr height="40" align="center">

<td>kolom 1 baris 3</td>

<td>kolom 2 baris 3</td>

<td>kolom 3 baris 3</td>

</tr>

</table>

Hasilnya :

kolom 1 baris 1	kolom 2 baris 1	kolom 3 baris 1
kolom 1+2 baris 2		kolom 3 baris 2
kolom 1 baris 3	kolom 2 baris 3	kolom 3 baris 3

Penggabungan baris

Sebagai contoh, kode tabel di bawah :

<table border="2" width="100%" style="font-size:21px;">

<tr height="40" align="center">

<td>kolom 1 baris 1</td>

<td>kolom 2 baris 1</td>

<td>kolom 3 baris 1</td>

</tr>

      <tr height="40" align="center">

      <td>kolom 1 baris 2</td>

      <td>kolom 2 baris 2</td>

      <td>kolom 3 baris 2</td>

      </tr>

<tr height="40" align="center">

<td>kolom 1 baris 3</td>

<td>kolom 2 baris 3</td>

<td>kolom 3 baris 3</td>

</tr>

</table>

 Tabelnya :

kolom 1 baris 1	kolom 2 baris 1	kolom 3 baris 1
kolom 1 baris 2	kolom 2 baris 2	kolom 3 baris 2
kolom 1 baris 3	kolom 2 baris 3	kolom 3 baris 3

Kita akan menggabungkan kolom 3 baris 1 dengan kolom 3 baris 2 maka pada :

<td>kolom 3 baris 1</td>

diubah jadi  <td colspan=”2”> kolom 3 baris 1 + 2 </td>

sedangkan   <td>kolom 3 baris 2</td>  dihilangkan karena sudah digabung dengan kolom 3 baris 2.

Seingga kodenya menjadi

<table border="2" width="100%" style="font-size:21px;">

<tr height="40" align="center">

<td>kolom 1 baris 1</td>

<td>kolom 2 baris 1</td>

<td rowspan="2">kolom 3 baris 1 + 2</td>

</tr>

      <tr height="40" align="center">

      <td>kolom 1 baris 2</td>

      <td>kolom 2 baris 2</td>     

      </tr>

<tr height="40" align="center">

<td>kolom 1 baris 3</td>

<td>kolom 2 baris 3</td>

<td>kolom 3 baris 3</td>

</tr>

</table>

  

Hasilnya :

kolom 1 baris 1	kolom 2 baris 1	kolom 3 baris 1 + 2
kolom 1 baris 2	kolom 2 baris 2
kolom 1 baris 3	kolom 2 baris 3	kolom 3 baris 3

Itulah  Cara menggabungkan dua cell atau lebih pada tabel HTML semoga bermanfaat bagi anda yang memerlukannya.