Tabel HTML Bambang Irawan.

Presentasi berjudul: "Tabel HTML Bambang Irawan."— Transcript presentasi:

1 Tabel HTML Bambang Irawan

2 Pemanfaatan tabel Menyajikan data dalam kolom dan baris
Memiliki judul Baris informasi Sel untuk setiap item Dalam pengembangannya, teknik tabel dimanfaatkan untuk mengatur tampilan pada sebuah halaman web.

3 Elemen-elemen tabel Elemen Penjelasan <table> … </table>
Mendefinisikan tabel HTML <th> … </th> Mendefinisikan sel header <caption> … </caption> Menuliskan judul tabel <tr> … </tr> Mendefinisikan baris tabel <td> … </td> Mendefinisikan sel data

4 Atribut tabel Elemen Penjelasan align = [left|center|right]
Menentukan posisi horizontal valign = [top|middle|bottom] Menentukan posisi vertikal colspan = n Menyatukan sel n kolom rowspan = n Menyatukan sel n baris nowrap Mematikan wrapping

5 Catatan: Tiap tabel dimulai dengan tag <table> dan ditutup tag </table> Jumlah baris tabel ditentukan oleh pasangan tag <tr> … </tr> di dalam pasangan tag <table> … </table> Jumlah kolom tabel ditentukan oleh pasangan tag <td> … </td> di dalam pasangan tag <tr> … </tr> Tabel 1 Tabel 2

6 Colspan dan Rowspan Tabel 3 Dua kolom jadi satu
Colspan akan menghasilkan penyatuan terhadap lebih dari satu kolom Rowspan akan menghasilkan penyatuan terhadap lebih dari satu baris Dua kolom jadi satu Dua baris jadi satu Tabel 3

7 Empty Cell Sebuah tabel yang tak berisi secara otomatis akan menghasilkan tampilan tabel yang isinya sama dengan border Untuk mengatasi hal tersebut maka sebagai pengganti isi tabel dapat kita berikan mnemonic “ ” (tanpa tanda petik) yang merepresentasikan ‘spasi’, atau dengan karakter lain seperti “…” Tabel 4

8 Cellpadding dan Cellspacing
Cellpadding berfungsi untuk membuat spasi lebih antara sel dengan border. Cellspacing berfungsi untuk menambah jarak antar sel. Tabel 4

9 Background Untuk menambahkan background pada tabel dapat melalui atribut di dalam tag <table>: <table border=“0” background=“anu.jpg”> Untuk menambahkan background pada satu atau lebih sel dapat melalui atribut di dalam tag <td>: <td bgcolor=“#ff0033”> // b.g. warna <td background=“anu.jpg”> // b.g. gambar Tabel 5

10 Align dan valign Align berfungsi untuk mengatur perataan posisi karakter di dalam sel tabel secara horizontal, terdapat 3 nilai, yaitu: kiri, tengah dan kanan (left, center, right) Valign berfungsi untuk mengatur perataan posisi karakter di dalam sel tabel secara horizontal, terdapat 3 nilai, yaitu: atas, tengah dan bawah (top, middle, bottom) Tabel 6

11 Tabel di dalam tabel Teknis pembuatan tabel di dalam HTML memungkinkan kita memberikan perintah tabel berjenjang hingga dapat dihasilkan tabel di dalam tabel <table><tr><td> </td></tr></table> Tabel 7

12 Atribut frame Atribut frame digunakan untuk mengatur border pada sebuah tabel Beberapa di antara atribut tersebut, antara lain: border, box, above, below, hsides, vsides, lhsrhs dan void. Tabel 7

13 Tabel untuk Layout Tabel dapat dimanfaatkan untuk mengatur Layout sebuah halaman web Biasanya sebuah website didisain dengan 3 menyediakan standar layout, yaitu untuk halaman pertama yang biasanya simpel dan tidak di-scroll, serta 2 halaman untuk konten, yang half-content dan full-content.

14 Layout Layout half-content Layout Full-content Test layout

15 First Page Layout

16 Half Content Layout

17 Full Content Layout

18 Next… Teknik Layout dengan CSS

19 Referensi Modifikasi blog contoh