[ pendopo ] [ kabar-kabur ] [ temonggo ]

Siswa, predikat seorang untuk terus belajar ....



Thursday, May 12, 2005
CARA MEMBUAT TABLE

  1. Sketsakan tabel yang akan dibuat dalam kertas dengan pensil
  2. Bacalah data-data tabel secara horisontal, jangan vertikal ini menyesatkan !
  3. Terjemahkan pembacaan tadi ke bahasa html :)

Contoh :

No.NamaHargaJumlahNetto
1Buku350010?
2Pensil7505?
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>&lt;B&gt</td></tr>
<!--Sebagai baris ke-4 beberapa kolom digabung dengan perintah <td colspan=4>--!>
</table>

Contoh lagi penggunaan colspan dan rowspan:

HariSesiRuang I
DosenMateri
Senin7--
9--
11--
Selasa7--
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

 

Leave a Comment:

Name


Homepage (optional)


Comments







Previous Entry Home Next Entry

Sign In

Ruang bertanya :

   





<< May 2005 >>
Sun Mon Tue Wed Thu Fri Sat
01 02 03 04 05 06 07
08 09 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

Tutorial Homepage