PEMROGRAMAN WEB 04 Table Andi WRE 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 1
Ordered List <ol> </ol> : tells the browser that list items will follow, and to render them using a sequenced value. <li> </li> : describes each list item Attribute <ol>...</ol> start type Number Tipe number Ordered List (Example) <ol type = "1"> <li>item pertama</li> <li>item kedua</li> <li>item ketiga</li> <li>item keempat</li> </ol> <ol type = "1"> <li>item pertama</li> <li>item kedua <ol type = "a"> <li>sub item pertama</li> <li>sub item kedua</li> </ol> </li> <li>item ketiga</li> <li>item keempat</li> </ol> 2
Unordered List <ul> </ul> : tells the browser that list items will follow, and to render them as a bulleted list <li> </li> : describes each list item Attribute <ol>...</ol> type Tipe bullets disc (default) circle square Unordered List (Example) <h4>a nested List:</h4> <ul> <li>coffee</li> <li>tea <ul> <li>black tea</li> <li>green tea <ul> <li>china</li> <li>africa</li> </ul> </li> </ul> </li> <li>milk</li> </ul> 3
Definition List <dl> </dl> <dt> </dt> : data term, tag is used to render the term to define <dd> </dd> : deskripsi dari item pada tag <dt> <html> <body> <h4>a Definition List:</h4> <dl> <dt>coffee</dt> <dd>black hot drink</dd> <dt>milk</dt> <dd>white cold drink</dd> </dl> </body> </html> Table Menyusun data dalam baris dan kolom Membuat layout untuk halaman web Struktur Table <table> <caption>... </caption> <td>... </td> atau <th>... </th> </table> 4
<table> </table> Tag <table> </table> : elemen utama yang mengenkapsulasi semua komponen dalam tabel Tag <table> berisi tag lain yang membantu dalam membentuk struktur table Attribute width height border cellspacing cellpadding align bgcolor background bordercolor atau % atau % left, right, center file gambar Keterangan Lebar table Tinggi table Ukuran bingkai table Jarak antar kolom Jarak bingkai dengan content Posisi table dalam 1 halaman Background warna Background gambar Warna bingkai table <caption> </caption> Memberikan judul untuk table Diletakan dalam tag <table> Implementasi : <caption>schedule</caption> Attribute align bottom, center, left, right, top 5
Table Row Menyatakan baris baru dalam table Tag berisi kumpulan cell (tag <td>) 1 tag = 1 baris Attribute align valign bgcolor bordercolor height left, right, center top, middle, bottom Keterangan Perataan text secara horizontal Perataan text secara vertikal Background warna Warna bingkai 1 baris Tinggi baris Table Cell <td> </td> Menyatakan sebuah kolom dalam 1 baris Berada dalam tag 1 tag <td> </td> = 1 kolom Attribute rowspan colspan bgcolor align valign background width height bordercolor number number left, right, center bottom, middle, top nama file Keterangan Menyatukan beberapa baris Menyatukan beberapa kolom Background warna Perataan text secara horizontal Perataan text secara vertikal Background image Lebar cell Tinggi cell Warna bingkai 1 cell 6
Column Header <th> </th> Browsers render the <th> tag as centered in the column and in boldface font. Memiliki atribut yang sama dengan tag <td> <table border="1"> <caption>schedule</caption> <th>time</th> <th>class</th> <th>room</th> <th>instructor</th> </table> Contoh <table border="1"> <caption>my Schedule</caption> <th>time</th> <th>class</th> <th>room</th> <th>instructor</th> <td>8:00</td> <td>web Development</td> <td>oeh 113</td> <td>lee Cottrell</td> <td>9:00</td> <td>java Programming</td> <td>thackeray 720</td> <td>les Graves</td> </table> <td>12:00</td> <td>marketing</td> <td>benedum 23</td> <td>gina Czina</td> Caption Column header 7
Latihan 1 Buatlah list sesuai tampilan dibawah ini Latihan 2 8
Latihan 3 (Gunakan IE) 9