Membuat Tabel Kompleks

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..

1. HTML Pertamaku
2. Cara Memasukkan Gambar
3. Membuat Text Mengalir di sekeliling Gambar
4. Macam-macam Heading 
5. Membuat Formulir Isian
6. Form Input Data
7. Membuat Optional
8. Membuat Optional Data dari Banyak Data
9. Input Data Artikel
10. Membuat Tombol Submit dan Reset
11. Membuat Tabel
12. Membuat Tabel Kompleks
13. Bekerja dengan Frame
14. Memasukkan Halaman Lain dengan iFrame