KOMPUTER APLIKASI IT XHTML & CSS MODUL 04

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

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>

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.

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”>

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%”>

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

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>

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>

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>

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:

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:

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:

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>

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>

<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%”>

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

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

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

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

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.

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

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