Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
Tabel PENGGUNAAN TABEL
Memperindah tampilan atau mengatur agar dapat disajikan dengan tampilan yang enak dibaca / dilihat Tag yang digunakan : <table>..</table> : mengawali dan mengakhiri sebuah tabel <caption>..</caption> : menentukan judul pada tabel. <tr>..</tr> : membuat sebuah baris dalam tabel
2
Tabel Atribut yang bisa ditambahkan untuk tag-tag di atas :
<th>..</th> : membuat judul kolom <td>..</td> : membuat sel data Atribut yang bisa ditambahkan untuk tag-tag di atas : border : melengkapi tabel dengan garis untuk kolom maupun baris bgcolor : menambahkan warna belakang pada tabel ataupun sel rowspan : pembuatan tabel dengan sejumlah baris sel digabungkan. Digunakan pada tag <td> dan <th>
3
Tabel colspan : pembuatan tabel dengan sejumlah kolom sel digabungkan. Digunakan pada tag <td> dan <th> align : mengatur peletakan teks dalam keadaan rata kiri, rata kanan, atau rata tengah. Digunakan pada tag <tr>, <th>, <td> valign : mengatur peletakan teks secara vertikal apakah akan diletakkan di atas, di tengah atau di bawah height : mengatur tinggi tabel atau sel width : mengatur lebar tabel atau sel
4
Tabel cellspacing : menentukan jarak antara sel
cellpadding : menentukan jarak dari dinding sel ke isi sel adalah
5
Pengaturan teks secara vertikal
Didalam sebuah sel, teks dapat diatur menurut posisi vertikal, apakah diletakkan diatas, di tengah atau di bawah. Hal ini bisa dilakukan dengan menggunakan atribut VALIGN pada tag <TH>, <TD> atau <TR>
6
Pengaturan teks secara vertikal
Nilai atribut VALIGN Nilai VALIGN Keterangan TOP Teks diletakkan di bagian atas pada sel MIDDLE Teks diletakkan di bagian tengah pada sel BOTTOM Teks diletakkan di bagian bawah pada sel
7
Pengaturan teks secara Horizontal
Didalam sebuah sel, teks dapat diatur menurut posisi horizontal, apakah diletakkan dikiri, di tengah atau di kanan. Hal ini bisa dilakukan dengan menggunakan atribut ALIGN pada tag <TH>, <TD> atau <TR>
8
Pengaturan teks secara Horizontal
Nilai atribut pada ALIGN Nilai ALIGN Keterangan RIGHT Teks diatur rata kanan CENTER Teks ditengahkan LEFT Teks diatur rata kiri
9
Contoh : <html> <head>
<title>Menu Utama</title> </head> <body> <h1>Menu Utama</h1> Silahkan klik pada link-link berikut:<br> <a href =“halx.htm” target =“_blank”>Halaman X</a><br> <a href =“haly.htm” target =“_blank”>Halaman Y</a><br> </body> </html>
10
Warna latar belakang Table
Untuk menambahkan warna latar belakang table, digunakan atribut BGCOLOR pada tag <TABLE>. <TABLE BGCOLOR = "silver" BORDER = "10"> <TD BGCOLOR = "green">
11
Rowspan dan Colspan Untuk menggabungkan beberapa baris sel, digunakan atribut ROWSPAN pada tag <TD> <TABLE BORDER = "1"> <CAPTION>Daftar Wilayah dan Kota</CAPTION> <TR> <TD ROWSPAN = "3">Jawa Tengah</TD> <TD>Semarang</TD> </TR> <TR><TD>Kudus</TD></TR> <TR><TD>Solo</TD></TR> </TABLE>
12
Rowspan dan Colspan Untuk menggabungkan beberapa sel dalam satu baris, digunakan atribut COLSPAN pada tag <TH> atau <TD> <TR> <TH COLSPAN = "2">Area: Jawa Tengah</TH> </TR> <TR><TD>Semarang</TD><TD> </TD></TR> <TR><TD>Kudus</TD><TD> </TD></TR> <TR><TD>Solo</TD><TD> </TD></TR>
13
Mengatur Tinggi Table Untuk mengatur tinggi table, digunakan atribut HEIGHT pada tag <TABLE> <TABLE BORDER = "1" HEIGHT = "150"> <TR><TH>Nama</TH><TH>Usia</TH></TR> <TR><TD>Ali</TD><TD>25</TD></TR> <TR><TD>Fahmianto</TD><TD>27</TD></TR> </TABLE>
14
Mengatur Tinggi Sel Untuk mengatur tinggi table, digunakan atribut HEIGHT pada tag <TR> <TABLE BORDER = "1"> <TR HEIGHT = "50"><TH>Nama</TH><TH>Usia</TH></TR> <TR><TD>Ali</TD><TD>25</TD></TR> <TR><TD>Fahmianto</TD><TD>27</TD></TR> </TABLE>
15
Mengatur Lebar Tabel Atribut WIDTH pada tag <TABLE> dapat digunakan untuk mengatur lebar table <TABLE BORDER = "1" WIDTH = "200"> <CAPTION>Dengan WIDTH</CAPTION> <TR><TD>ABC</TD><TD>DEF</TD></TR> <TR><TD>GHI</TD><TD>JKL</TD></TR> </TABLE>
16
Mengatur Lebar sel WIDTH juga dapat digunakan pada sel tertentu, dengan cara menyebutkannya pada tag <TD> atau <TH> <TABLE BORDER = "1"> <TR><TD WIDTH = "200">ABC</TD><TD>DEF</TD></TR> <TR><TD>GHI</TD><TD>JKL</TD></TR> </TABLE>
Presentasi serupa
