Pertemuan 05

1
PEMROGRAMAN WEB I
Oleh:
Andi Irmayana,S.Kom., M.T.

2
Tabel dalam HTML
• Tabel digunakan untuk menyajikan data
dalam betuk baris dan kolom.
• Elemen-Elemen Tabel:
Elemen Penjelasan
<table>…</table> Mendefinisikan
sebuah tabel
<caption>…</caption> Medefinisikan Judul
Tabel
<tr>…</tr> Mendefinisikan
sebuah Baris

3
Elemen Penjelasan
<td>…</td> Medefinisikan sebuah
Kolom
<th>…</th> Mendefinisikan Header
Tabel
<col> Seting property kolom
<colgroup>…</colgroup> Seting property kolom
secara berkelompok
<thead>…</thead>,
<tbody>…</tbody>,
<tfoot>…</tfoot>
Menentukan properti
kelompok baris
<table rules=box>
Elemen lanjutan

4
Atribut Tag <TABLE ….>
BORDER Biangkai Tabel
CELLPADDING Jarak antara sel dan isi sel
CELLSPACING Spasi antara sel
WIDTH Lebar tabel
BGCOLOR Latar belakang dg warna
BACKGROUND Latar belakang dg image
ALIGN Perataan tabel

5
Atribut Tag <TABLE ….> (Kont.)
HEIGHT Tinggi table
FRAME Sekeliling tabel ada atu tidak
garis
RULES Garis internal tabel
BORDERCOLOR Warna bingkai
BORDERCOLORLIGHT Warna bingkai bagian
terang
BORDERCOLORDARK Warna bingkai bagian gelap

6
BGCOLOR
BORDERCOLORDARK
BORDERCOLORLIGHT

7
Atribut Tabel tag <TR>
Atribut Penjelasan
Align ={left | center |
right}
Perataan teks secara
horizontal
Halign={left | center |
right}
Perataan horizontal
Valign={top | middle |
bottom}
vertikal
Width Lebar baris
Height Tinggi baris
Bgcolor=“kode_warna” Warna latar belakang

8
Atribut Penjelasan
Bordercolor=“Warna” Warna border sel dalam
baris
Bordercolorlight=
“Warna”
Warna border untuk
yang terang
Bordercolordark=
“Warna”
Warna border untuk
warna gelap
Backgound=“image” Menggunakan gambar
sebagai latar belakang
Atribut Tabel tag <TR> (Kont.)

10
Atribut Tabel tag <TD>
Atribut Penjelasan
Align ={left | center |
right}
horizontal
Valign={top | middle |
bottom}
vertikal
Colspan=n Menggabung n sel
kolom
Rowspan=n Menggabung n sel
baris
Nowrap Non-aktipkan wraping
teks dalam sel

11
Atribut Penjelasan
Cellpading=“n” Mengatur jarak border
dengan isi sel
Cellspacing=“n” Mengatur tebal frame
dalan satuan pixel
Bgcolor=“kode_warna
”
Mengatur warna latar
belakang sel pada tag
Backgound=“image” Menggunakan gambar
sebagai latar belakang
Atribut Tabel tag <TD> (Kont.)

12
Atribut Penjelasan
Bordercolor=“Warna” Warna border sel dalam
sel
Bordercolorlight=
“Warna”
Warna border untuk
yang terang sel
Bordercolordark=
“Warna”
Warna border untuk
warna gelap sel
Width=n Mengatur lebar
kolom/sel
Atribut Tabel tag <TD> (Kont.)

13
Mengatur Border
• Border adalah garis yang mengelilingi
sebuah tabel.
• Contoh:

14
Source
<html>
<head><title>Untitled</title></head>
<body>
<BODY BGCOLOR="#c0c0c0"><CENTER>
<P>Menggunakan tag <font face=courier new><b><
TABLE BORDER="10"></b></font><P>
<TABLE BORDER="10">
<TR>
<TD>Baris #1 Kolom #1</TD>
</TR>
<TR>
</TR>
</TABLE></body></html>

15
Manipulasi Sel dalam Tabel
• Mengatur jarak antara border dg isi sel
(cellpading)
• Contoh:

16
<html>
<head><title>Cell</title></head>
TABLE BORDER
CELLPADDING="10"></b></font><P>
<TABLE BORDER CELLPADDING="10">
<TR>
</TR>
<TR>
</TR>

17
• Mengatur jarak antara border luar dg
border sel
• Contoh:

18
<html>
<head><title>CellSpacing</title></head>
<body>
TABLE BORDER CELLSPACING="10"></b></font><P>
<TABLE BORDER CELLSPACING="10">
<TR>
</TR>
<TR>
</TR>

19
Menggabung Sel
• Menggabung kolom
<BODY BGCOLOR="#C0C0C0">
<TABLE BORDER="3"
CELLPADDING="10"
CELLSPACING="4">
<TR>
<TD COLSPAN=2>1 & 2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE></BODY>

20
• Menggabung Baris
<BODY BGCOLOR="#C0C0C0">
<TABLE BORDER="3"
CELLPADDING="10"
CELLSPACING="4">
<TR>
<TD ROWSPAN="2">1 & 3</TD>

<TD>2</TD>
</TR>
<TR>
<TD>4</TD>
</TR>
</TABLE>
</BODY>

21
Perataan Tabel
• Posisi tabel dapat diatur pertaannya dg
menyertakan atribut ALIGN pada tag
<TABLE>
• Contoh:

22
<html>
<head>
<title>Untitled</title>
</head>
<body BGCOLOR="#c0c0c0">
<TABLE BORDER>
<TR>
<TH>Default (ALIGN="left")</TH>
<TD>Kolom #2</TD>
<TD>Kolom #3</TD>
</TR>
</TABLE><BR>

23
<TABLE BORDER ALIGN="center">
<TR>
<TH>ALIGN="center"</TH>
<TD>Kolom #2</TD>
<TD>Kolom #3</TD>
</TR>
</TABLE><BR>
<TABLE BORDER ALIGN="right">
<TR>
<TH>ALIGN="right"</TH>
<TD>Kolom #2</TD>
<TD>Kolom #3</TD>
</TR>
</TABLE>
</body></html>

24
Mengatur Isi Sel
• Teks dalam sel dapat diatur (align) dg:
Rata kiri, rata tengah, dan rata kanan
• Atribut yang dibunakan:
– Align={“left” | “center” | “right”} pada tag
<TD> atau <TR>
• Atau
– Align={“left” | “center” | “right” | “justify”}
pada tag <P> dalam tag <TD>

26
Source<html>
<BODY>
<TABLE BORDER="2" CELLSPACING="3"
WIDTH="100%">
<TR bgcolor="silver">
<td>Kiri</td>
<td>Tengan</td>
<td>Kanan</td>
<td>Kiri-Kanan</td>
</TR>
</TR>
<TR>
<TD ALIGN="left" bgcolor="yellow">Kata-kata
dalam sel ini rata KIRI</TD>

27
<TD ALIGN="center">Kata-kata dalam sel ini rata
TENGAH</TD>
<TD ALIGN="right" bgcolor="green"><font
color="yellow">Kata-kata dalam sel ini rata
KANAN</TD>
<TD><p Align="Justify">Kata-kata dalam sel ini
rata KIRI-KANAN</TD>
</TR>
</TABLE>
</BODY>
</html>

28
Mengatur properti Kolom
• Tag yang digunakan pengatur properti
kolom dalam <TABLE> adalah <COL>.
• Bentuk:
– Span=n  n kolom propertinya diatur sama
– Align  Perataan teks dalam dalam kolom
– Bgcolor  menentukan backgroun kolom
<COL Span=n Align=“Left | Center | Right |
Justify” Width=n Bgcolor=“Warna”>

29
Contoh
<HTML>
<HEAD>
<TITLE>COL</TITLE>
</HEAD>
<BODY>
<TABLE BORDER CELLPADDING=5>
<COL>
<COL ALIGN="RIGHT" BGCOLOR="BLUE">
<COL STYLE="color:red" bgcolor="silver">
<TR><TH >Expense</TH> <TH>Price</TH> <TH>Status</TH> </TR>
<TR><TD>office suite</TD> <TD>1,343.56</TD> <TD>rental</TD></TR>
<TR> <TD>cabling</TD> <TD>1.25</TD> <TD>installed</TD> </TR>
</TABLE>
</BODY>
</HTML>

31
Contoh lain
<HTML>
<HEAD>
<TITLE>COL2</TITLE>
</HEAD>
<BODY>
<TABLE BORDER CELLPADDING=5>
<COL STYLE="color:brown" bgcolor="blue">
<COL SPAN=2 STYLE="color:red"
bgcolor="silver" width="80" ALIGN="right" >
<TR> <TH >Expense</TH> <TH>Price</TH> <TH>Status</TH> </TR>
<TR bgcolor="magenta"> <TD>office suite</TD> <TD>1,343.56</TD>
<TD>rental</TD> </TR>
<TR bgcolor=“khaki"><TD>cabling</TD> <TD>1.25</TD>
<TD>installed</TD> </TR>
</TABLE>
</BODY>
</HTML>

33
Mengatur properti Kolom
berdasarkan Group
• Tag yang digunakan untuk mengaptur properti
beberapa kolom sekaligus dalam <TABLE>,
adalah <COLGROUP> … </COLGROUP>.
– Berkonjungsi dengan <TABLE RULES=GROUPS>
• Bentuk:
<COLGROUP Span=n Align=“Left | Center
| Right | Justify” Width=n
Bgcolor=“Warna”></COLGROUP>

34
Atur Properti kolom dg Tag COLGROUP
<HTML>
<HEAD>
<TITLE>COLGROUP </TITLE>
</HEAD>
<BODY>
<P><TABLE BORDER=1 CELLPADDING=4>
<COLGROUP></COLGROUP>
<COLGROUP SPAN=3 bgcolor="blue"></COLGROUP>
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
<TR> <TD>Monday</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tuesday</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wednesday</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thursday</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Friday</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Saturday</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sunday</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
</TABLE>
</BODY>
</HTML>

36
Atur Properti kolom dg Tag
COLGROUP (kont.)
• Jika bentuk dari tag TABLE dan
COLGROP berbentuk:
• Maka hasilnya berbentuk:
<TABLE BORDER=1 CELLPADDING=4
RULES=GROUPS FRAME=BOX>
<COLGROUP></COLGROUP>
<COLGROUP SPAN=3></COLGROUP>

39
Mengatur garis suatu tablel
• Garis internal tabel dapat diatur sesuai
dengan kebutuhan:
• Bentuk:
RULES = NONE | ALL | COLS | ROWS | GROUPS

40
TUGAS
• Buat web page dengan HTML dengan
bentuk tampilan sebagi berikut:

Pertemuan 05

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (20)

Similar to Pertemuan 05

Similar to Pertemuan 05 (20)

More from Andyy EmeMezt

More from Andyy EmeMezt (9)

Pertemuan 05