KOMPUTER APLIKASI IT XHTML & CSS MODUL 04

Presentasi berjudul: "KOMPUTER APLIKASI IT XHTML & CSS MODUL 04"— Transcript presentasi:

1 KOMPUTER APLIKASI IT XHTML & CSS MODUL 04

2 QUIZ. Buat Dua Halaman home. html dan biodata
QUIZ!!!!!!! Buat Dua Halaman home.html dan biodata.html yang saling terhubung dengan Hyperlink. Tampilan sebagai berikut: home.html biodata.html

3 Untuk membuat Tabel, Gunakan tag <table></table>.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABLE Untuk membuat Tabel, Gunakan tag <table></table>. Tabel memiliki rows/baris, Gunakan tag <tr></tr>. Dalam Baris, terdapat kolom, Gunakan tag <td></td>. Sintax: <table> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> </table>

4 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04
TABEL Hasil XHTML Tersebut: Pada contoh diatas, Terdapat Tabel Tanpa Border, dengan jumlah baris 2 buah, dan jumlah kolom 2 buah.

5 Coba Tambah Attribut border=“1” pada tag <table>
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABEL Tambahkan Border?? Coba Tambah Attribut border=“1” pada tag <table> <table border=“1”>

6 Coba Tambah Attribut width=“100%” pada tag <table>
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABEL Ukuran Layar Penuh?? Coba Tambah Attribut width=“100%” pada tag <table> <table border=“1” width=“100%”>

7 Baris 3 Kolom 1, dan Baris 3 Kolom 2
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABEL Tambah Baris?? Duplikat/Copy dari <tr> … sampai … </tr> dan paste sebelum </table>, kemudian ubah isinya menjadi Baris 3 Kolom 1, dan Baris 3 Kolom 2

8 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04
TABEL Tambah Kolom?? Di dalam <tr> .. </tr> terdapat 2 buah <td> .. </td>. Tambah 1 <td></td> Lagi di masing-masing <tr> .. </tr>

9 ILUSTRASI: <table> <tr> </tr> <tr> </tr>
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABEL ILUSTRASI: <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

10 STANDARISASI TABLE XHTML
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TENTANG STANDARD TABLE STANDARISASI TABLE XHTML Tag <tr></tr> harus di dalam tag <table></table>. Tag <td></td> harus di dalam tag <tr></tr>. Urutan Struktur adalah Table  Baris  Kolom, dimana Tabel memiliki beberapa baris, dan baris memiliki beberapa kolom. Urutan Baris dan Kolom tidak dapat ditukar, jadi ILEGAL (Tidak Boleh) membuat tag <tr> di dalam tag <td> seperti berikut: <td><tr> bla.. Bla.. </tr></td>

11 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04
TABLE MENAMBAHKAN HEADER Untuk membuat Header pada Table, Kita dapat merubah tag <td></td> menjadi <th></th>. Misalnya kita rubah semua tag <td></td> menjadi <th></th> pada Baris (<tr>) pertama, Hasilnya:

12 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04
TABLE MERGE COLUMN/KOLOM Untuk menyatukan 2/Lebih Kolom menjadi Satu, Kita dapat menambahkan attribut colspan=“2” pada tag <td> yang dimaksud:

13 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04
TABLE MERGE ROW/BARIS Untuk menyatukan 2/Lebih Baris menjadi Satu, Kita dapat menambahkan attribut rowpan=“2” pada tag <td> yang dimaksud:

14 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04
TABLE TENTANG MERGE Bila tag <td> memiliki colspan=“2”, maka kita harus menghapus satu <td> di dalam <tr>/baris yang sama. Misalnya: HTML AWAL SETELAH DI COLSPAN <tr> <td>Satu</td> <td>Dua</td> </tr> <td>Tiga</td> <td>Empat</td> <td colspan=“2”> Satu dan Dua </td>

15 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04
TABLE TENTANG MERGE Bila tag <td> memiliki rowspan=“2”, maka kita harus menghapus satu <td> di dalam <tr>/baris selanjutnya. Misalnya: HTML AWAL SETELAH DI COLSPAN <tr> <td>Satu</td> <td>Dua</td> </tr> <td>Tiga</td> <td>Empat</td> <td rowspan=“2”> Dua dan Tiga </td>

16 <table cellpadding=“5” cellspacing=“10” border=“1” width=“100%”>
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABLE PADDING DAN SPACING TABLE dalam XHTML mendukung dua penjarak/perenggang yaitu cellpadding dan cellspacing. Sintax: Dimasukan ke dalam attribut di dalam tag <table> seperti berikut: <table cellpadding=“5” cellspacing=“10” border=“1” width=“100%”>

17 HASIL TAMPILAN cellpadding=“5” dan cellspacing=“5”
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABLE HASIL TAMPILAN cellpadding=“5” dan cellspacing=“5”

18 HASIL TAMPILAN cellpadding=“5” dan cellspacing=“25”
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABLE HASIL TAMPILAN cellpadding=“5” dan cellspacing=“25”

19 HASIL TAMPILAN cellpadding=“25” dan cellspacing=“5”
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABLE HASIL TAMPILAN cellpadding=“25” dan cellspacing=“5”

20 HASIL TAMPILAN cellpadding=“15” dan cellspacing=“1”
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABLE HASIL TAMPILAN cellpadding=“15” dan cellspacing=“1”

21 CELLPADDING vs CELLSPACING
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABLE CELLPADDING vs CELLSPACING Cellpadding, menambah jarak antara garis/border dengan text di dalamnya. Cellspacing, menambah jarak antara garis/border satu dengan border lainnya.

22 TABLE CELLPADDING CELLSPACING
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 TABLE CELLPADDING CELLSPACING

23 TERIMA KASIH DAN SELAMAT BELAJAR PENUTUP
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 04 PENUTUP TERIMA KASIH DAN SELAMAT BELAJAR