Membuat Tabel Kompleks

Sesuai janji, maka saat ini kita akan bahas bagaimana cara membuat sebuah table yang kompleks. Kompleks disini ialah sebuah tabel yang akan menggabungkan beberapa cell sesuai kebutuhkan. Misalnya semacam ini:

Bagaimana cara membuatnya?

Kita fokuskan kodenya sampai baris LUTVI saja atau baris ke-3. Sisanya tinggal mengikuti sebagaimana baris lutvi.

Rumus sederhana untuk membuat kode rumit diatas ialah semacam ini:

1. Buat dulu tag table.

<table>
</table>

2. Di tengahnya kita masukkan berapa baris tabel yang mau kita buat. Contohnya contoh diatas kita buat sampai LUTVI, berarti ada 3 baris.

<table>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
</table>

3. Sekarang kita buat kolomnya. Di baris pertama, kolom pertama, kolomnya turun sampai baris ke-2. Berarti ada 2 baris yang digabungkan. Maka atributnya ROWSPAN="2". Sehingga jadinya semacam ini:

<table>
  <tr>
    <td rowspan="2"></td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
</table>

4. Kolom kedua di baris pertama menggabungkan 4 kolom. Maka atributnya COLSPAN="4". Sehingga jadinya semacam ini:

<table>
  <tr>
    <td rowspan="2"></td>
    <td colspan="4"></td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
</table>

5. Selanjutnya baris kedua. Sebab kolom pertama telah diambil alih oleh kolom pertama baris pertama, maka sudah harus kita urus lagi. Jadi, langsung saja ke kolom kedua, ketiga, keempat, dan kelima. Jadinya semacam ini:

<table>
  <tr>
    <td rowspan="2"></td>
    <td colspan="4"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
  </tr>
</table>

Lihat kan? Saya hanya menambahkan 4 kolom saja di baris 2 sebab kolom 1 kan telah diambil oleh baris pertama sehingga kita cuma harus menambah kekurangannya saja.

6. Baris ketiga sebab tak ada yang diambil alih, berarti tetap 5 kolom yang kita pasang. Jadinya:

<table>
  <tr>
    <td rowspan="2"></td>
    <td colspan="4"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

7. Sekarang tinggal mengisi saja kolom-kolomnya dengan text sesuka hati. Dan inilah hasil akhir untuk tampilan diatas:

<table>
<tr>
<td rowspan="2" style="text-align:center; vertical-align:middle;">Nama</td>
<td colspan="4" style="text-align:center; vertical-align:middle;">BULAN</td>
</tr>
<tr>
<td>Januari</td>
<td>Februari</td>
<td>Maret</td>
<td>April</td>
</tr>
<tr>
<td>LUTVI</td>
<td>10.000</td>
<td>10.000</td>
<td>10.000</td>
<td>10.000</td>
</tr>
<tr>
<td>IIM</td>
<td>10.000</td>
<td>10.000</td>
<td>10.000</td>
<td>10.000</td>
</tr>
<tr>
<td>ATHIA</td>
<td>10.000</td>
<td>10.000</td>
<td>10.000</td>
<td>10.000</td>
</tr>
</table>

Selamat mencoba !!