�ݺ�ߣ

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

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Pertemuan 05 (20)

More from Andyy EmeMezt (8)

Pertemuan 05