Untuk menuliskan nama nama anggota yang begitu banyak sebaiknya kita menggunakan tabel agar terlihat rapi dan mudah untuk dikelola,misalnya : daftar siswa,daftar guru,daftar barang, dan lain sebagainya. Sebenarnya software dreamwaver atau yang sejenis dapat memudahkan dalam pembuatan tabel tersebut akan tetapi dalam taraf pembelajaran kita gunakan notepad ataupun microsoft office word agar kita tahu struktur dasar html itu sendiri.
Dalam html kita dapat menggunakan tag tabel,tr, dan td.
Berikut ini adalah struktur dasar html untuk membentuk tabel yang masih kosong.
<html>
<table width="550" border="1" cellspacing="0" cellpadding="0">
<!-Baris pertama->
<tr>
<td height="42" colspan="5"> </td>
</tr>
<tr>
<!-baris kedua->
<!-Membuat lima buah kolom dengan lebar yang ditentukan->
<td width="35"> </td>
<td width="144"> </td>
<td width="35"> </td>
<td width="214"> </td>
<td width="110"> </td>
</tr>
<tr>
<!-baris ketiga->
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<!-baris keempat->
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<!-baris kelima->
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<!-baris keenam->
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<!-baris ketujuh->
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</html>
Maka tampilanya adalah sebagai berikut:
Baiklah sekarang kita mengisi tabel dengan format yang kita perlukan misalnya Nomor, nama,kegiatan, dan keterangan. Kemudian kita isikan data nama,kegiatan dan keterangan.
Berikut tabel yang sudah berisi data.
<html>
<table width="550" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5"><div align="center">LAPORAN BULAN INI </div></td>
</tr>
<tr>
<td width="39"><div align="center">NO</div></td>
<td width="117"><div align="center">NAMA</div></td>
<td width="35"><div align="center">L/P</div></td>
<td width="228"><div align="center">KEGIATAN</div></td>
<td width="119"><div align="center">KETERANGAN</div></td>
</tr>
<tr>
<td><div align="center">1</div></td>
<td>Ani</td>
<td><div align="center">P</div></td>
<td>mengetik surat </td>
<td> </td>
</tr>
<tr>
<td><div align="center">2</div></td>
<td>Ana</td>
<td><div align="center">P</div></td>
<td>membuat laporan keuangan </td>
<td> </td>
</tr>
<tr>
<td><div align="center">3</div></td>
<td>Ina</td>
<td><div align="center">P</div></td>
<td>mendata jumlah barang </td>
<td> </td>
</tr>
<tr>
<td><div align="center">4</div></td>
<td>Nia</td>
<td><div align="center">P</div></td>
<td>mencari pelanggan </td>
<td> </td>
</tr>
<tr>
<td><div align="center">5</div></td>
<td>Inai</td>
<td><div align="center">P</div></td>
<td>mencari pelanggan </td>
<td> </td>
</tr>
</table>
</html>
Maka tampilannya adalah sebagai berikut:
Demikian semoga bermanfaat.
0 komentar:
Posting Komentar