Pemrograman Web Ch.3 LIST dan TABLE Tommy, ST, MKom.

Presentasi berjudul: "Pemrograman Web Ch.3 LIST dan TABLE Tommy, ST, MKom."— Transcript presentasi:

1 Pemrograman Web Ch.3 LIST dan TABLE Tommy, ST, MKom

2 LIST HTML memiliki beberapa fungsi yang dapat digunakan untuk menyusun list/daftar informasi yang terdiri dari : Daftar tidak berurut (Unordered). Daftar berurut (Ordered). Dan Definisi (Definition). Tommy, ST, Mkom

3 Unordered List (UL) Daftar tidak berurut diawali dengan tag <ul> dan diakhiri dengan tag </ul>. Syntax : <ul> <li>…..</li> </ul> Tommy, ST, MKom

4 Unordered List memiliki beberapa tipe grafis yaitu disc, square, dan circle sebagai berikut :
Tommy, ST, MKom

5 Ordered List Daftar berurut diawali dengan tag <ol> dan diakhiri dengan tag </ol>. Syntax : <ol> <li>…..</li> </ol> Tommy, ST, MKom

6 Browser secara otomatis akan memberikan nomor berurut pada tag Ordered List.
Tipe nomor OL : Tommy, ST, Mkom

7 Definitions Daftar definisi dibuat menggunakan element DL, yang mana terdiri dari pasangan makna (Term) dan definisi(Definition). Syntax : <DL> <DT>……. <DD>…….</DD> </DT> </DL> Tommy, ST, Mkom

8 TABLE Table memungkinkan content disusun kedalam cell – cell dalam bentuk baris dan kolom. Terdapat beberapa elemen utama pada tabel : <Table> <caption> <Thead> <Tbody> <Tfoot> <TR> <TH> <TD> Tommy, ST, Mkom

9 <Table> Merupakan elemen utama yang melingkupi seluruh elemen – elemen penyusun table. Example : <table border=“1” width=“100”> ….. …. … </table> Tommy, ST, Mkom

10 Caption Elemen Caption digunakan untuk memberikan judul tabel. Contoh:
<table> <caption>Data Mahasiswa</caption> … </table> Tommy, ST, Mkom

11 <Thead>,<Tbody> dan <Tfooter>
Merupakan elemen yang digunakan untuk mengelompokkan elemen baris tabel yang berfungsi sebagai header, body atau sebagai footer. ‘ Tommy, ST, Mkom

12 <tr> Elemen yang mengelompokkan beberapa elemen cell dalam sebuah baris tabel. Syntax : <tr> <td>…</td> </tr> Tommy, ST, Mkom

13 <th> Elemen cell yang biasanya digunakan sebagai cell header atau judul kolom. Browser biasanya akan mencetak teks pada elemen ini dalam format bold. Example : <th>Nama</th><th>NPM</th> Tommy, ST, Mkom

14 <td> Elemen cell yang biasanya digunakan sebagai cell content atau body. Elemen TD merupakan elemen yang merepresentasikan informasi dari tabel. Example : <td>Andi</td><td> </td> Tommy, ST, Mkom

15 Format Ukuran Ukuran dari cell atau tabel dapat ditentukan dengan beberapa cara, yaitu : Nilai Tetap (Piksel) -> width=“30” Persentase (Berdasarkan elemen parent) -> width=“20%” Proporsional (Browser definition) Tommy, ST, Mkom

16 Span / Merger Cell dapat di-merger (gabung) dengan menggunakan atribut colspan, atau rowspan. Penggabungan biasanya menyebabkan adanya elemen cell yang dihilangkan. Contoh : <tr> <td colspan=“2”>Tidak Ada</td><td>-</td> </tr> <td>Andi</td><td> </td><td>-</td> Tommy, ST, Mkom

17 LATIHAN Buatlah daftar informasi sebagai berikut : Tommy, ST, Mkom

18 LATIHAN Buatlah tampilan tabel seperti berikut : Tommy, ST, Mkom