- Sketsakan tabel yang akan dibuat dalam kertas dengan pensil
- Bacalah data-data tabel secara horisontal, jangan vertikal ini menyesatkan
!
- Terjemahkan pembacaan tadi ke bahasa html :)
Contoh :
| No. | Nama | Harga | Jumlah | Netto |
|---|
| 1 | Buku | 3500 | 10 | ? |
| 2 | Pensil | 750 | 5 | ? |
| Total | <B> |
Maka cara menulis html-nya adalah
<table align=center border=1 cellspacing=2 bgcolor=yellow>
<!--Di atas sebagai attribut table--!>
<tr><th>No.</th><th>Nama</th>
<th>Harga</th><th>Jumlah</th><th>Netto</th><tr>
<!--Sebagai baris pertama/judul--!>
<tr><td>1</td> <td>Buku</td> <td>3500</td>
<td>10</td> <td
align=center>?</td></tr>
<!--Sebagai baris kedua--!>
<tr><td>2</td> <td>Pensil</td><td>750</td>
<td>5</td> <td
align=center>?</td></tr>
<!--Sebagai baris ketiga--!>
<tr><td colspan=4 bgcolor=lightgreen>Total</td> <td
align=center><B></td></tr>
<!--Sebagai baris ke-4 beberapa kolom digabung dengan perintah <td colspan=4>--!>
</table>
Contoh lagi penggunaan colspan dan rowspan:
| Hari | Sesi | Ruang I |
| Dosen | Materi |
| Senin | 7 | - | - |
| 9 | - | - |
| 11 | - | - |
| Selasa | 7 | - | - |
| 9 | - | - |
Html-nya :
<table align=center border=1 cellspacing=3 bgcolor=yellow>
<tr><th rowspan=2>Hari</th><th rowspan=2>Sesi</th><th
colspan=2>Ruang
I</th></tr>
<tr><th>Dosen</th><th>Materi</th></tr>
<tr><th
rowspan=3>Senin</th><td>7</td><td>-</td><td>-</td>&l
t;/tr>
<tr><td>9</td><td>-</td><td>-</td></tr>
<tr><td>11</td><td>-</td><td>-</td></tr>
<tr><th
rowspan=2>Selasa</th><td>7</td><td>-</td><td>-</td>&
lt;/tr>
<tr><td>9</td><td>-</td><td>-</td></tr>
</table>
Perhatikan ! terkadang kita perlu menulis attribut border=1 untuk mengetahui kondisi garis-garis
pada table, karena keinginan kita kadang beda dengan default dari broser tersebut :)
Posted at 08:09 am by
siswa