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

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

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

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

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

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

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

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

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

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

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

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

<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

<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>12351010</td> Tommy, ST, Mkom

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

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>1125132</td><td>-</td> Tommy, ST, Mkom

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

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