JOB SHEET 2

TABLE & LIST

I. Tujuan Instruksional Khusus

1. Memahami dan menuliskan tag table pada dokumen HTML.
2. Memahami dan menuliskan tag list pada dokumen HTML.

II. Teori Pendahuluan

2.1 Table
Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas
kolom dan baris.
<TABLE> .. </TABLE>
Atribut :
align
: Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri
(left), tengah (center) atau kanan (right).
bgcolor
: Mendefinisikan warna latar belakang
border
: Mendefinisikan ukuran garis tepi (border) dalam satuan pixels.
cellpadding
: Mendefinisikan spasi
cellspacing
: Mendefinisikan spasi antara dua cells dalam satuan pixels.
width
: Mendefinisikan ukuran tabel dalam pixels atau persentase.
Contoh :
<TABLE align=center bgcolor=blue border=2 cellpadding=5
cellspacing=2 width=90%>

ELEMEN CAPTION
Elemen CAPTION berfungsi untuk membuat judul dari tabel. Elemen ini berada di
dalam elemen TABLE dan mempunyai attribute align dengan nilai top (judul terletak di atas
tabel), dan bottom (judul terletak di bawah tabel).
Sintaks:
<caption align="top"|"bottom">
..........................
</caption>

1|Page

ELEMEN TR (Table Row)

Elemen TR mendefinisikan baris pada tabel dan elemen ini harus berada di dalam
elemen TABLE. Pada elemen TR terdapat elemen TH dan TD.
Sintaks:
<tr
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color">
..........................
</tr>

<TR> .. </TR>, untuk menentukan baris (table row)

Atribut :
align

: Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left),

tengah (center) atau kanan (right)

bgcolor : Mendefinisikan warna latar belakang pada baris (rows)
valign : Mendefinisikan perataan vertikal pada isi dari rows, yaitu perataan top,
middle atau bottom.
Contoh :
<TR align=right bgcolor=red valign=top>

ELEMEN TH (Table Header) dan TD (Table Data)

Elemen TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya
tercetak tebal dan dengan posisi ditengah sel.
Sintaks:
<th
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</th>
<td
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</td>

2|Page

<TD> </TD>, untuk menampilkan data pada setiap sel tabel (table data).
Atribut :
align
: Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left),
tengah (center) atau kanan (right).
background : Meletakkan image pada latar belakang tabel.
bgcolor
: Mendefinisikan warna latar belakang
colspan
height
: Mendefinisikan tinggi cells dalam pixels
nowrap
rowspan
valign
: Perataan vertikal yaitu perataan pada top, middle atau bottom.
width
: Mendefinisikan ukuran tabel dalam pixels atau persentase.
Contoh :
<TD align=right background=back.gif bgcolor=green colspan=3
height=200 nowrap rowspan=2 valign=bottom width=300>

Struktur tagnya adalah sebagai berikut :

<TABLE>
<TR>
<TD>
<TD>
</TR>
<TR>
<TD>
<TD>
</TR>
</TABLE>

data baris 1 kolom 1 </TD>

data baris 1 kolom 2 </TD>
data baris 2 kolom 1 </TD>
data baris 2 kolom 2 </TD>

data baris 1 kolom 1 data baris 1 kolom 2

data baris 2 kolom 1 data baris 2 kolom 2

2.2 List
Dalam membuat list di dokumen HTML dapat menggunakan tag <ul>, <ol>, dan
<li>. Tag <li> digunakan untuk membuat detail dari list.
Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan. Contoh

perintah Ordered List :

<ol>
<li>Nelpon Mirza</li>
<li>Bayar tagihan listrik</li>
<li>Ambil cucian di laundry</li>
<li>Nganterin Ayah ke bandara</li>
<li>Beli lampu neon buat di taman</li>

3|Page

</ol>

Tag <ul> adalah kependekan dari Unordered List, yang artinya list yang tidak berurutan.
Contoh :
<ul>
<li>Bayar tagihan listrik</li>
<li>Nganterin Ayah ke bandara</li>
<li>Beli lampu neon buat di taman</li>
<li>Ambil cucian di laundry</li>
<li>Nelpon Mirza</li>
</ul>

Definition List, digunakan untuk menampilkan suatu daftar istilah-istilah berikut

penjelasannya.
Tag- tag yang digunakan:

<dl> untuk membuat suatu Definition List

<dt> untuk menampilkan suatu istilah, kependekan dari Definition Term
<dd> untuk menampilkan penjelasan dari istilah sebelumnya, kependekan dari
Definition Description

Contoh:
<dl>
<dt>Obeng</dt>
<dd>Perkakas yang digunakan untuk memutar suatu skrup</dd>
<dt>Stop Kontak</dt>
<dd>Suatu panel yang digunakan sebagai sumber listrik</dd>
<dt>Mur</dt>
<dd>Pasangannya baut, digunakan untuk menjepit sesuatu, bagian l
aki-lakinya</dd>
<dt>Baut</dt>
<dd>Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian
perempuannya</dd>
</dl>

III. Peralatan dan Bahan

1. PC Processor minimal Pentium IV, RAM minimal 512 MB
2. Editor Web Notepad atau Edit Plus
3. Browser Mozilla, IE, dll

IV. Langkah Kerja/Percobaan

1.

Hidupkan computer

2.

Buat folder Praktek2 pada direktori : D:\

3.

Buka Edit Plus atau NotePad untuk menuliskan kode program HTML.

4|Page

4.

Buka lembar kerja baru dan tuliskan kode program berikut (gambar 2.1):

Gambar 2.1 Tag Table

5.

Simpan dengan nama file: Praktek2-1-Table.html

6.

Test hasilnya menggunakan browser .

7.

Ambil gambar dari hasil kode program Praktek2-1-Table.html dan masukkan dalam
lembar kerja.

8.

Ulangilangkahkerja no 1-4 untuk melakukan praktek selanjutnya, namun pada point 4,

kode programnya sebagai berikut :

Gambar 2.2 Table & Border Attribute

9.

Simpan dengan nama file: Praktek2-2-Table&BorderAttribute.html.

10. Test hasilnya menggunakan browser .

11. Ambil gambar dari hasil kode program Praktek2-2-Table&BorderAttribute.html.
dan masukkan dalam lembar kerja.
5|Page

12. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 3):

Gambar 1.3 Headers

13. Simpan dengan nama file: Praktek2-3-Headers.html.
14. Test hasilnya menggunakan browser .
15. Ambil gambar dari hasil kode program Praktek2-3-Headers.html dan masukkan
dalam lembar kerja.
16. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 4):

6|Page

Gambar 2.4 Table Without Borders

17. Simpan dengan nama file: Praktek2-4-TableWithoutBorders.html.
18. Test hasilnya menggunakan browser .
19. Ambil gambar dari hasil kode program Praktek2-4-TableWithoutBorders.html dan
masukkan dalam lembarkerja.
20. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 5):

7|Page

Gambar 2.5 Table Headers

21. Simpan dengan nama file: Praktek2-5-TableWithoutHeaders.html.
22. Test hasilnya menggunakan browser .
23. Ambil gambar dari hasil kode program Praktek2-5-TableWithoutHeaders.html dan
masukkan dalam lembar kerja.
24. Buka lembar kerja baru dan tuliskan kode program berikut (Gambar 2.6):

8|Page

Gambar 2.6 Table With a Caption

25. Simpan dengan nama file: Praktek2-6-TableWithaCaption.html.
26. Test hasilnya menggunakan browser .
27. Ambil gambardari hasil kode program Praktek2-6-TableWithaCaption.html dan
masukkan dalam lemba rkerja.
28. Buka lembar kerja baru dan tuliskan kode program berikut (Gambar 2.7):

9|Page

Gambar 2.7 TableMoreThanOneRow-Coloumn

29. Simpan dengan nama file: Praktek2-7-TableMoreThanOneRow-Coloumn.html.
30. Test hasilnya menggunakan browser .
31. Ambil gambar dari hasil kode program Praktek2-7-TableMoreThanOneRowColoumn.html dan masukkan dalam lembar kerja.
32. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 8):

10 | P a g e

Gambar 2.8 Inside a Table

33. Simpan dengan nama file: Praktek2-8-Inside a Table.html.
34. Test hasilnya menggunakan browser .
35. Ambil gambar dari hasil kode program Praktek2-8-Inside a Table.html dan masukkan
dalam lembar kerja.
36. Buka lembar kerja baru dan tuliskan kode program berikut (Gambar 2.9):

11 | P a g e

Gambar 2.9 CellPadding

37. Simpan dengan nama file: Praktek2-9-CellPadding.html.
38. Test hasilnya menggunakan browser .
39. Ambil gambar dari hasil kode program Praktek2-9-CellPadding.html dan masukkan
dalam lembar kerja.
40. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 2.10):

12 | P a g e

Gambar 2.10 CellSpacing

41. Simpan dengan nama file: Praktek2-10-CellSpacing.html.
42. Test hasilnya menggunakan browser .
43. Ambil gambar dari hasil kode program Praktek2-10-CellSpacing.html dan masukkan
dalamlembar kerja.
44. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 2.11):

13 | P a g e

14 | P a g e

15 | P a g e

Gambar 2.11 TheFrameAttribute

45.

Simpan dengan nama file: Praktek2-11-TheFrameAttribute.html.

46.

Test hasilnya menggunakan browser .

47.

Ambil gambar dari hasil kode program Praktek2-11-TheFrameAttribute.html dan

masukkan dalam lembar kerja.

48.

Buka lembar kerja baru dan tuliskan kode program berikut (gambar 2.12):

Gambar 2.12 Unordered List

49. Simpan dengan nama file: Praktek2-12-UnorderedList.html.
50. Test hasilnya menggunakan browser .
51. Ambil gambar dari hasil kode program Praktek2-12-UnorderedList.html dan
masukkan dalam lembar kerja.
52. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 2.13):

Gambar 13 Ordered List

16 | P a g e

53. Simpan dengan nama file: Praktek2-13-OrderedList.html

54. Test hasilnya menggunakan browser .
55. Ambil gambar dari hasil kode program Praktek2-13-OrderedList.html dan
masukkan dalam lembar kerja.
56. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 2.14):

Gambar 2.14 Definition List

57. Simpan dengan nama file: Praktek2-14-DefinitionList.html.
58. Test hasilnya menggunakan browser .
59. Ambil gambar dari hasil kode program Praktek2-14-DefinitionList.html dan
masukkan dalam lembar kerja.
60. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 15):

17 | P a g e

Gambar 2.15 Different Oredered List

61. Simpan dengan nama file: Praktek2-15-DifferentOrderedList.html.
62. Test hasilnya menggunakan browser .
63. Ambil gambar dari hasil kode program Praktek2-15-DifferentOrderedList.html dan
masukkan dalam lembar kerja.
18 | P a g e

64. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 2.16):

Gambar 2.16 Different Unordered List

65. Simpan dengan nama file: Praktek2-16- DifferentUnorderedList.html
66. Test hasilnya menggunakan browser .
67. Ambil gambar dari hasil kode program Praktek2-16- DifferentUnorderedList.html
dan masukkan dalam lembar kerja.
68. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 2.17):

19 | P a g e

Gambar 2.17 Nested List

69. Simpan dengan nama file: Praktek2-17-NestedList.html.
70. Test hasilnya menggunakan browser .
71. Ambil gambar dari hasil kode program Praktek2-17-NestedList.html dan masukkan
dalam lembar kerja.
72. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 2.18):

20 | P a g e

Gambar 2.18 Nested List2

73. Simpan dengan nama file: Praktek2-18-NestedList2.html
74. Test hasilnya menggunakan browser .
75. Ambil gambar dari hasil kode program Praktek2-18-NestedList2.html
76. dan masukkan dalam lembar kerja.
77. Buka lembar kerja baru dan tuliskan kode program berikut (gambar 2.19):

21 | P a g e

Gambar 2.19 Definition List2

78. Simpan dengan nama file: Praktek2-19-DefinitionList2.html.
79. Test hasilnya menggunakan browser .
80. Ambil gambar dari hasil kode program Praktek2-19-DefinitionList2.html dan
masukkan dalam lembar kerja.

22 | P a g e

V. Lembar Kerja
No
1

Praktik
Praktek2-1Table.html

Praktek2-2Table &
Border
Attribute.html

Praktek2-3Table
Headers.html

Praktek2-4Table Without
Border.html

Praktek2-5Table
Headers.html

Praktek2-6Table With a
Caption.html

Praktek2-7Table More
Than One
RowColoumn.html

Praktek2-8Inside a
Table.html

23 | P a g e

Hasil Program

Komentar

Praktek2-9Cell
Padding.html

10

Praktek2-10Cell
Spacing.html

VI. Tugas/Pertanyaan
Buatlah daftar keluarga anda dilengkapi dengan keterangan nama, tempat tanggal
lahir, pekerjaan, status. Berilah warna dan pengaturan lay out data yang sesuai. Contoh
tabelnya adalah sebagai berikut:
Tabel 1. Data Keluarga nama anda
No

Data Pribadi
Nama

Tempat Tanggal Lahir

VII. Kesimpulan
Buatlah kesimpulan dari praktek yang sudah anda lakukan.

24 | P a g e

Pekerjaan

Status