membuat tabel komplek

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

2. Di tengahnya kita masukkan berapa baris tabel yang ingin kita buat. Misalnya contoh diatas kita buat sampai LUTVI, berarti ada 3 baris

  1. <table>
  2.   <tr>
  3.   </tr>
  4.   <tr>
  5.   </tr>
  6.   <tr>
  7.   </tr>
  8. </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:

  1. <table>
  2.   <tr>
  3.     <td rowspan=”2″></td>
  4.   </tr>
  5.   <tr>
  6.   </tr>
  7.   <tr>
  8.   </tr>
  9. </table>

4. Kolom kedua di baris pertama menggabungkan 4 kolom. Maka atributnyaCOLSPAN="4". Sehingga jadinya seperti ini:

  1. <table>
  2.   <tr>
  3.     <td rowspan=”2″></td>
  4.     <td colspan=”4″></td>
  5.   </tr>
  6.   <tr>
  7.   </tr>
  8.   <tr>
  9.   </tr>
  10. </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:

  1. <table>
  2.   <tr>
  3.     <td rowspan=”2″></td>
  4.     <td colspan=”4″></td>
  5.   </tr>
  6.   <tr>
  7.     <td></td>
  8.     <td></td>
  9.     <td></td>
  10.     <td></td>
  11.   </tr>
  12.   <tr>
  13.   </tr>
  14. </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:

  1. <table>
  2.   <tr>
  3.     <td rowspan=”2″></td>
  4.     <td colspan=”4″></td>
  5.   </tr>
  6.   <tr>
  7.     <td></td>
  8.     <td></td>
  9.     <td></td>
  10.     <td></td>
  11.   </tr>
  12.   <tr>
  13.     <td></td>
  14.     <td></td>
  15.     <td></td>
  16.     <td></td>
  17.     <td></td>
  18.   </tr>
  19. </table>

7. Sekarang tinggal mengisi saja kolom-kolomnya dengan text sesuka hati. Dan inilah hasil akhir untuk tampilan diatas:

  1. <table>
  2. <tr>
  3. <td rowspan=”2″ style=”text-align:center; vertical-align:middle;”>Nama</td>
  4. <td colspan=”4″ style=”text-align:center; vertical-align:middle;”>BULAN</td>
  5. </tr>
  6. <tr>
  7. <td>Januari</td>
  8. <td>Februari</td>
  9. <td>Maret</td>
  10. <td>April</td>
  11. </tr>
  12. <tr>
  13. <td>LUTVI</td>
  14. <td>10.000</td>
  15. <td>10.000</td>
  16. <td>10.000</td>
  17. <td>10.000</td>
  18. </tr>
  19. <tr>
  20. <td>IIM</td>
  21. <td>10.000</td>
  22. <td>10.000</td>
  23. <td>10.000</td>
  24. <td>10.000</td>
  25. </tr>
  26. <tr>
  27. <td>ATHIA</td>
  28. <td>10.000</td>
  29. <td>10.000</td>
  30. <td>10.000</td>
  31. <td>10.000</td>
  32. </tr>
  33. </table>

Selamat mencoba !!

sumber: http://gudanginfo.web.id/html/membuat-tabel-kompleks.html#more-55

About suhendraroby

saya seorang CEPERIST

Posted on May 5, 2013, in Uncategorized. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: