MEMBUAT TABLE 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 !!

 

SUMBER : http://gudanginfo.web.id/html/

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s