Belajar HTML Mudah Pemula Chapter 13

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