1 PEMROGRAMAN WEB 04 Table Andi WRE List 3 macam List : - Ordered List : list yang menggunakan nomor berdasarkan urutan (numbering) - Unordered List :...
List 3 macam List : - Ordered List : list yang menggunakan nomor berdasarkan urutan (numbering) - Unordered List : list yang tidak berurut dan menggunakan bullet (bullets) - Definition List : list yang disertai dengan deskripsi dari setiap item. Deskripsi dari item akan ditampilkan dengan indentasi ½ inchi menjorok ke dalam
HereProgramming comes your footer Web – Table
1
Ordered List … : tells the browser that list items will follow, and to render them using a sequenced value.
…
: describes each list item Attribute ...
Nilai Attribute
start
Number
type
Tipe number
HereProgramming comes your footer Web – Table
Ordered List (Example)
Item pertama
Item kedua
Item ketiga
Item keempat
Item pertama
Item kedua
sub item pertama
sub item kedua
Item ketiga
Item keempat
HereProgramming comes your footer Web – Table
2
Unordered List
…
: tells the browser that list items will follow, and to render them as a bulleted list
…
: describes each list item Attribute ...
type
Nilai Attribute
Tipe bullets disc (default) circle square
HereProgramming comes your footer Web – Table
Unordered List (Example)
A nested List:
Coffee
Tea
Black tea
Green tea
China
Africa
Milk
HereProgramming comes your footer Web – Table
3
Definition List
…
…
: data term, tag is used to render the term to define
…
: deskripsi dari item pada tag
A Definition List:
Coffee
Black hot drink
Milk
White cold drink
HereProgramming comes your footer Web – Table
Table Menyusun data dalam baris dan kolom Membuat layout untuk halaman web Struktur Table
. . .
. . .
atau
. . .
HereProgramming comes your footer Web – Table
4
…
Tag
…
: elemen utama yang mengenkapsulasi semua komponen dalam tabel Tag
berisi tag lain yang membantu dalam membentuk struktur table Attribute
Nilai Attribute
Keterangan
width
px atau %
Lebar table
height
px atau %
Tinggi table
border
px
Ukuran bingkai table
cellspacing
px
Jarak antar kolom
cellpadding
px
Jarak bingkai dengan content
align
left, right, center
Posisi table dalam 1 halaman
bgcolor
pre-define color / HEX
Background warna
background
file gambar
Background gambar
bordercolor
pre-define color / HEX
Warna bingkai table
HereProgramming comes your footer Web – Table
…
Memberikan judul untuk table Diletakan dalam tag
Implementasi :
Schedule
Attribute
align
Nilai Attribute
bottom, center, left, right, top
HereProgramming comes your footer Web – Table
5
Table Row
…
Menyatakan baris baru dalam table Tag
berisi kumpulan cell (tag
) 1 tag
…
= 1 baris Attribute
Nilai Attribute
Keterangan
align
left, right, center
Perataan text secara horizontal
valign
top, middle, bottom
Perataan text secara vertikal
bgcolor
pre-define color / HEX
Background warna
bordercolor
pre-define color / HEX
Warna bingkai 1 baris
height
px
Tinggi baris
HereProgramming comes your footer Web – Table
Table Cell
…
Menyatakan sebuah kolom dalam 1 baris Berada dalam tag
1 tag
…
= 1 kolom Attribute
Nilai Attribute
Keterangan
rowspan
number
Menyatukan beberapa baris
colspan
number
Menyatukan beberapa kolom
bgcolor
pre-define color / HEX
Background warna
align
left, right, center
Perataan text secara horizontal
valign
bottom, middle, top
Perataan text secara vertikal
background
nama file
Background image
width
px
Lebar cell
height
px
Tinggi cell
bordercolor
px
Warna bingkai 1 cell HereProgramming comes your footer Web – Table
6
Column Header
…
Browsers render the
tag as centered in the column and in boldface font. Memiliki atribut yang sama dengan tag
Schedule
Time
Class
Room
Instructor
HereProgramming comes your footer Web – Table
Contoh
My Schedule
Time
Class
Room
Instructor
8:00
Web Development
OEH 113
Lee Cottrell
9:00
Java Programming
Thackeray 720
Les Graves
12:00
Marketing
Benedum 23
Gina Czina
Caption Column header
HereProgramming comes your footer Web – Table
7
Latihan 1 Buatlah list sesuai tampilan dibawah ini
