Membuat Tabel Kompleks

Membuat Tabel Kompleks
DAFTAR ISI

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:

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

Baca Juga:  Cara Membuat Fungsi setTimeout didalam Javascript

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

Ebook Gratis!!

Subscribe untuk dapatkan e-book GRATIS dan informasi teknologi terbaru dan diskon menarik langsung di Email-mu

Taufiq
Taufiq
Digital Strategist & System Analyst. Passion dalam teknologi terutama dalam pengembangan aplikasi. Selain itu senang mempelajari digital marketing dan bisnis.
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
WhatsApp chat