Professional Documents
Culture Documents
MODUL 3
3. Membuat Daftar
3.1. Memahami Daftar
List adalah sebuah metode untuk menampiljan sekumpulan data dengan
cara penomoron atau dengan symbol. Dalam membuat daftar(list) digunakan
Tag <LI>, dan ditambah lagi dengan tag <UL> (Unordered List/List tak
bernomor urut) atau <Ol> (Ordered List/List dengan nomor urut). Berikut
adalah beberapa daftar tag yang digunakan beserta dengan atributnya :
Tag
<UL>
Atribut
TYPE
<OL>
TYPE
<OL>
TYPE
Value
SQUARE
DISC
CIRCLE
I
i
A
a
START
Keterangan
Bulat Kotak
Bulat Titik
Bulat Lingkaran
Huruf Besar Romawi
Huruf Kecil Romawi
Huruf Besar Latin
Huruf Kecil Latin
Nilai awal Penomoran
___________________________________________________________________________
D3 Komputer & Sistem Informasi
___________________________________________________________________________
19
D3 Komputer & Sistem Informasi
Akhir Script
___________________________________________________________________________
20
D3 Komputer & Sistem Informasi
1</LI>
2</LI>
1</LI>
2</LI>
___________________________________________________________________________
21
D3 Komputer & Sistem Informasi
___________________________________________________________________________
22
D3 Komputer & Sistem Informasi
MENU KIRI
ISI/CONTENT
MENU KANAN
Tag <TR> adalah tag yang digunakan untuk membuat sebuah baris
di dalam tabel dan di dalam tag <TR> dapat ditambahkan beberapa
atribut yang sering digunakan di dalam membuat sebuah tabel.
___________________________________________________________________________
23
D3 Komputer & Sistem Informasi
3.8.1.
Untuk dapat membuat sebuah tabel dengan dua buah kolom, maka harus
ada dua buah tag <td> dan </td> dalam tag <tr> dan </tr>. Baik jumlah
<tr> maupun jumlah <td> akan mempengaruhi banyaknya baris dan kolom
yang ada dalam tabel.
Contoh Script Tabel_2.html
<html>
<head><title>Contoh Membuat Tabel</title>
</head>
<body>
<table border=1 bordercolor=black>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
<td>Baris 1 Kolom 3</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
<td>Baris 2 Kolom 3</td>
</tr>
</table>
</body>
</html>
Akhir Script
Pada contoh di atas terdapat tag <TR> dua pasang terdiri dari dua
baris, sedangkan tag <TD> terdapat tiga pasang pada setiap barisnya,
sehingka tabel di atas akan menghasilkan dua baris tiga kolom, seperti
tampilan berikut :
___________________________________________________________________________
24
D3 Komputer & Sistem Informasi
Value
Left,Center
Right
Border
1,2,,n
Width
Height
n%
N%
Cellspacing
1,2,,n
Cellpadding
1,2,,n
Bgcolor
#ffffff-#000000
Bordercolor
#ffffff-#000000
Keterangan
Digunakan untuk meratakan posisi tabel ke
kiri, ke tengah atau ke kanan
Digunakan untuk mengatur ketebalan garis
pembatas antar sel-dalam tabel
Digunakan untuk menentukan lebar tabel
Digunakan untuk menentukan tinggi tabel
Digunakan untuk menyatakan jarak sapasi
antar sel satu dengan lainnya serta antar sel
dengan pembatas tabel
Digunakan untuk mengatur jarak is isle
dengan batas sel
Digunakan untuk memberikan warna latar
belakang semua isi sel pada atribut tabel
Digunakan untuk memberikan warna pada
border.
___________________________________________________________________________
25
D3 Komputer & Sistem Informasi
Value
Align
Left,Center,Right
Width
Height
n%
N%
Bgcolor
#ffffff-#000000
Keterangan
Digunakan untuk meratakan tabel ke kiri, ke
tengah atau ke kanan
Digunakan untuk menentukan lebar baris
Digunakan untuk menentukan tinggi baris tabel
Digunakan untuk memberikan warna latar
belakang pada baris tabel
Value
Align
Left,Center,Right
Width
Height
n%
N%
Bgcolor
#ffffff-#000000
Keterangan
Digunakan untuk meratakan tabel ke kiri, ke
tengah atau ke kanan
Digunakan untuk menentukan lebar kolom
Digunakan untuk menentukan tinggi kolom
Digunakan untuk memberikan warna latar
belakang pada kolom/sel
Akhir Script
___________________________________________________________________________
26
D3 Komputer & Sistem Informasi
___________________________________________________________________________
27
D3 Komputer & Sistem Informasi
2. Buatlah sebuah tabel yang dapat menampilkan halaman seperti berikut ini
DAFTAR STOK BARANG PADA PT. SEDIA SELALU
No
Nama Barang
Televisi 14
2
3
Lemari Es
Computer
Merk
Sony
Toshiba
Polytron
LG
LG
Jumlah
Jumlah
5
3
7
8
6
5
34
Harga/ITEM
1.400.000
1.350.000
1.300.000
1.200.000
2.100.000
3.500.000
NO
NAMA BARANG
Lemari es
Televisi 21
LCD Projector
Jumlah
STOK
8
7
3
18
___________________________________________________________________________
28
D3 Komputer & Sistem Informasi