Membuat Tabel Kompleks

Sesuai janji, maka kali ini kita akan bahas bagaimana cara membuat sebuah table yang kompleks. Kompleks disini adalah sebuah tabel yang akan menggabungkan beberapa cell sesuai kebutuhkan. Contohnya seperti ini:

Nama BULAN
Januari Februari Maret April
LUTVI 10.000 10.000 10.000 10.000
IIM 10.000 10.000 10.000 10.000
ATHIA 10.000 10.000 10.000 10.000

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 adalah seperti ini:

1. Buat dulu tag table

<table>
</table>

2. Di tengahnya kita masukkan berapa baris tabel yang ingin kita buat. Misalnya 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 hingga baris ke-2. Berarti ada 2 baris yang digabungkan. Maka atributnya ROWSPAN="2". Sehingga jadinya seperti 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 seperti ini:

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

5. Berikutnya baris kedua. Karena kolom pertama sudah diambil alih oleh kolom pertama baris pertama, maka sudah tidak perlu kita urus lagi. Jadi, langsung aja ke kolom kedua, ketiga, keempat dan kelima. Jadinya seperti 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 cuma menambahkan 4 kolom saja di baris 2 karena kolom 1 kan sudah diambil oleh baris pertama sehingga kita hanya perlu menambah kekurangannya saja.

6. Baris ketiga karena tidak 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 !!

10 thoughts on “Membuat Tabel Kompleks

  1. Pingback: Belajar Dasar HTML | fachristawarna

  2. Pretty component to content. I simply stumbled upon your website and in accession capital to claim that I acquire actually
    enjoyed account your blog posts. Any way I will be subscribing on your augment or
    even I success you get admission to persistently quickly.

  3. maap mas mau nanya, mas saya udah coba script yang post, tapi yang muncul pas jalankan tidak ada garis tabelnya mas, mohon pencerahannya

  4. Hey theгe great website! Does runnіng a blog sіmilar to this take a
    great deal of work? I have very little undeгstanding of comрuter programming but I had been hoping to start my own blog soon. Anyhow, should you have any ideɑs or tips for new blog owners please sharе.

    I knoѡ this is off subjeϲt but I simplу needed to ask.

    Appreciate it!

Leave a Reply

Your email address will not be published. Required fields are marked *