Pertemuan VII

1
Pertemuan VII

• Zanial Mazalisa, S.Kom.,M.M
• http//blog.binadarma.ac.id/nayel

2
Table HTML

• Digukan utk menyajikan data dlm bentuk kolom dan
  baris
• Tabel juga dapat dipergunakan sebagai LayOut dari
  document HTML
• Diperbolehkan membuat table dalam table

3
Tabel HTML

• Tag-tag Tabel
• lttablegt .. lt/tablegt
• Mendefinisikan sebuah table
• Jika atribut border didefinisikan maka tabel akan
  diberi border/bingkai
• lttrgt.. lt/trgt
• Mendefinisikan sebuah baris dalam table
• lttdgt..lt/tdgt
• Mendefinisikan sebuah sel, bagian ini yang dapat
  diisi informasi
• ltcaptiongt..lt/captiongt
• Mendefinisikan Caption
• ltthgt..lt/thgt
• Mendefinisikan heading

4
Tabel HTML

• Atribut Table
• Width mengatur lebar dari table berupa pixel
  atau persen
• Border mengatur ukuran bingkai table
• Cellspacing mengatur jarak antar cel
• Cellpadding mengajtur jarak bingkai dengan
  isi
• Align mengatur perataan tengah, kanan atau
  kiri
• Bgcolor mengatur warna dasar belakang table

5
Tabel HTML

• Artibut TR
• Align mengatur perataan isi table tengah,
  kiri atau kanan
• Valign mengatur perataan secara vertical,
  tengah atau bawah
• Bgcolor mengatur warna dasar cel
• Atribut TD
• Rowspan menggabungkan beberapa baris menjadi
  satu
• Colspan menggabungkan beberapa kolo, menjadi
  satu

6
Contoh Table
lthtmlgt ltbodygt lttable border"1"gt lttrgt
lttdgt100lt/tdgt lt/trgt lt/tablegt ltbrgt Satu baris,
tiga kolom lttable border"1"gt lttrgt
lttdgt100lt/tdgt lttdgt200lt/tdgt lttdgt300lt/tdgt lt/trgt
lt/tablegt ltbrgt Dua baris dan tiga kolom lttable
border"1"gt lttrgt lttdgt100lt/tdgt lttdgt200lt/tdgt
lttdgt300lt/tdgt lt/trgt lttrgt lttdgt400lt/tdgt
lttdgt500lt/tdgt lttdgt600lt/tdgt lt/trgt lt/tablegt
lt/bodygt lt/htmlgt
7
Contoh Tabel tanpa Border
lthtmlgt ltbodygt Tabel Tanpa Border lttablegt lttrgt
lttdgt100lt/tdgt lttdgt200lt/tdgt lttdgt300lt/tdgt lt/trgt lt
trgt lttdgt400lt/tdgt lttdgt500lt/tdgt
lttdgt600lt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
8
Border
lthtmlgt ltbodygt lth4gtBorder sedanglt/h4gt lttable
border"8"gt lttrgt lttdgtFirstlt/tdgt
lttdgtRowlt/tdgt lt/trgt lttrgt lttdgtSecondlt/tdgt
lttdgtRowlt/tdgt lt/trgt lt/tablegt lth4gtDengan Border
besarlt/h4gt lttable border"15"gt lttrgt
lttdgtFirstlt/tdgt lttdgtRowlt/tdgt lt/trgt lttrgt
lttdgtSecondlt/tdgt lttdgtRowlt/tdgt lt/trgt lt/tablegt lt/b
odygt lt/htmlgt
9
Heading
lthtmlgt ltbodygt lth4gtTable headerslt/h4gt lttable
border"1"gt lttrgt ltthgtNamelt/thgt
ltthgtTelephonelt/thgt ltthgtTelephonelt/thgt lt/trgt lttrgt
lttdgtBill Gateslt/tdgt lttdgt555 77 854lt/tdgt
lttdgt555 77 855lt/tdgt lt/trgt lt/tablegt lth4gtVertical
headerslt/h4gt lttable border"1"gt lttrgt ltthgtFirst
Namelt/thgt lttdgtBill Gateslt/tdgt lt/trgt lttrgt
ltthgtTelephonelt/thgt lttdgt555 77
854lt/tdgt lt/trgt lttrgt ltthgtTelephonelt/thgt
lttdgt555 77 855lt/tdgt lt/trgt lt/tablegt lt/bodygt lt/html
gt
10
Contoh tabel cel kosong
lthtmlgt ltbodygt lttable border"1"gt lttrgt lttdgtSome
textlt/tdgt lttdgtSome textlt/tdgt lt/trgt lttrgt
lttdgtlt/tdgt lttdgtSome textlt/tdgt lt/trgt lt/tablegt lt/
bodygt lt/htmlgt
11
Dengan Caption
lthtmlgt ltbodygt lttable border"6"gt ltcaptiongtMy
Captionlt/captiongt lttrgt lttdgt100lt/tdgt
lttdgt200lt/tdgt lttdgt300lt/tdgt lt/trgt lttrgt
lttdgt400lt/tdgt lttdgt500lt/tdgt lttdgt600lt/tdgt lt/trgt lt
/tablegt lt/bodygt lt/htmlgt
12
Collspan
lthtmlgt ltbodygt lth4gtCell that spans two
columnslt/h4gt lttable border"1"gt lttrgt
ltthgtNamelt/thgt ltth colspan"2"gtTelephonelt/thgt lt/t
rgt lttrgt lttdgtBill Gateslt/tdgt lttdgt555 77
854lt/tdgt lttdgt555 77 855lt/tdgt lt/trgt lt/tablegt lt/b
odygt lt/htmlgt
13
Rowspan
lthtmlgt ltbodygt lth4gtCell that spans two
rowslt/h4gt lttable border"1"gt lttrgt ltthgtFirst
Namelt/thgt lttdgtBill Gateslt/tdgt lt/trgt lttrgt ltth
rowspan"2"gtTelephonelt/thgt lttdgt555 77
854lt/tdgt lt/trgt lttrgt lttdgt555 77
855lt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
14
Cellspadding
lthtmlgt ltbodygt lth4gtWith cellpaddinglt/h4gt lttable
border"1 cellpadding"10"gt lttrgt
lttdgtFirstlt/tdgt lttdgtRowlt/tdgt lt/trgt lttrgt
lttdgtSecondlt/tdgt lttdgtRowlt/tdgt lt/trgt lt/tablegt lt/b
odygt lt/htmlgt
15
CellSpacing
lthtmlgt ltbodygt lth4gtWith cellspacinglt/h4gt lttable
border"1" cellspacing"10"gt lttrgt
lttdgtFirstlt/tdgt lttdgtRowlt/tdgt lt/trgt lttrgt
lttdgtSecondlt/tdgt lttdgtRowlt/tdgt lt/trgt lt/tablegt lt/b
odygt lt/htmlgt
16
Background Color Table
lthtmlgt ltbodygt lth4gtA background
colorlt/h4gt lttable border"1" bgcolor"red"gt lttrgt
lttdgtFirstlt/tdgt lttdgtRowlt/tdgt lt/trgt lttrgt
lttdgtSecondlt/tdgt lttdgtRowlt/tdgt lt/trgt lt/tablegt lt/b
odygt lt/htmlgt
17
Background Image
lthtmlgt ltbodygt lth4gtA background
imagelt/h4gt lttable border"1" background"bgdeser
t.jpg"gt lttrgt lttdgtFirstlt/tdgt
lttdgtRowlt/tdgt lt/trgt lttrgt lttdgtSecondlt/tdgt
lttdgtRowlt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
18
Background Cell
lthtmlgt ltbodygt lth4gtCell backgroundslt/h4gt
lttable border"1"gt lttrgt lttd bgcolor"red"gtFirst
lt/tdgt lttdgtRowlt/tdgt lt/trgt lttrgt lttd
background"bgdesert.jpg"gt Secondlt/tdgt
lttdgtRowlt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
19
Align
lthtmlgt ltbodygt lttable width"400" border"1"gt
lttrgt ltth align"left"gtMoney spent on....lt/thgt
ltth align"right"gtJanuarylt/thgt ltth
align"right"gtFebruarylt/thgt lt/trgt lttrgt lttd
align"left"gtClotheslt/tdgt lttd
align"right"gt241.10lt/tdgt lttd
align"right"gt50.20lt/tdgt lt/trgt lttrgt lttd
align"left"gtMake-Uplt/tdgt lttd
align"right"gt30.00lt/tdgt lttd
align"right"gt44.45lt/tdgt lt/trgt lttrgt lttd
align"left"gtFoodlt/tdgt lttd align"right"gt730.40
lt/tdgt lttd align"right"gt650.00lt/tdgt lt/trgt
lttrgt ltth align"left"gtSumlt/thgt ltth
align"right"gt1001.50lt/thgt ltth
align"right"gt744.65lt/thgt lt/trgt lt/tablegt lt/body
gt lt/htmlgt
20
Tugas

• Profile Pribadi
• Saya Nadya Ayu Satriani, Lahir di Palembang pada
  7 Juli 1995, saya anak ke 3 dari 4
  bersaudara
• Rian lahir 4 April 1991
• Nina Blog Nina 8 Mei 1993
• Fatur 10 Okober 1997.
• Sekolah
• Tamat SD pada tahun 2006
• SMP 35 Palembang
• SMA PGRI 2 Palembang.
• Saya gemar internet, suka membuka
• Google untuk mencari informasi penunjang belajar
  saya,
• berkomunikasi dengan teman-teman lewat
  Facebook
• Beberapa koleksi poto saya dapat dilihat dalam
  Album Poto dan kamau mau kontak ke aku bisa
  mengirim email disini

Info lain Foto Album Blog Link Google.Com Yahoo.c
om Berita Detik Antara Kompas