05. html 4.ppt
TRANSCRIPT
PEMROGRAMAN WEB 1
HTML (TABEL)
Rina Dewi Indah Sari, S.Kom
STMIK Asia Malang - 2013
Tabel Formating
Tabel biasanya digunakan untuk menempatkan data secara spreadset,
Tapi untuk desain web, selain untuk menempatkan data, tabel digunakan untuk merapikan teks, ataupun gambar.
Dengan menggunakan tabel, teks ataupun gambar dapat disusun menjadi lebih rapi.
Tampilan halaman web akan menjadi lebih baik, apabila dasar/kerangkanya menggunakan tabel.
STMIK Asia Malang - 2013
Elemen-elemen Tabel
STMIK Asia Malang - 2013
Atribut-atribut Tabel
STMIK Asia Malang - 2013
Tabel Sederhana
Untuk membuat suatu tabel minimal diperlukan tiga elemen tabel. Tag TABLE digunakan sebagai awal
pembuatan tabel, Tag TR digunakan untuk mendifinisikan
berapa banyak baris pada tabel, Tag TD digunakan untuk menampung sel
data dari tabel tersebut.
STMIK Asia Malang - 2013
Tabel Sederhana
<table><tr><td>Tabel sederhana Tanpa border</td></tr></table>
Untuk membuat garis batas, dapat ditambahkan dengan atribut border seperti berikut :<table border=1><tr><td>Tabel sederhana dengan menggunakan
border.</td></tr></table>
STMIK Asia Malang - 2013
Tabel Dua Dimensi
Tabel biasanya tidak hanya terdiri dari dari 1 dimensi atau 1 kolom saja , tapi bisa 2, 3 atau sesuai dengan kebutuhan kita. <table border=5><tr><td>Tabel Kolom Pertama </td><td>Tabel Kolom Kedua </td><td>Tabel Kolom ketiga </td></tr></table>
STMIK Asia Malang - 2013
Tabel Dua Dimensi
<table border=5><tr><td>Baris 1 Kolom 1 </td><td>Baris 1 Kolom 2 </td><td>Baris 1 Kolom 3 </td></tr><tr><td>Baris 2 Kolom 1 </td><td>Baris 2 Kolom 2 </td><td>Baris 2 Kolom 3 </td></tr></table>
STMIK Asia Malang - 2013
Judul Tabel
Suatu tabel biasanya memiliki judul. Judul pada tabel dibedakan menjadi tiga
macam yaitu, judul tabel itu sendiri, judul kolom tabel, dan judul baris tabel.
Untuk membuat judul diluar tabel, tag yang digunakan adalah CAPTION,
untuk membuat judul kolom atau baris pada tabel menggunakan tag TH.
Bagian yang merupakan judul tabel akan ditebalkan penulisannya.
STMIK Asia Malang - 2013
Judul Tabel
<table border=5><caption><b>Judul Tabel
dengan Caption</b></caption>
<tr><td>Baris 1 Kolom 1 </td><td>Baris 1 Kolom 2 </td><td>Baris 1 Kolom 3 </td></tr><tr><td>Baris 2 Kolom 1 </td><td>Baris 2 Kolom 2 </td><td>Baris 2 Kolom 3 </td></tr></table>
<br><table border=5><caption><b>Judul Tabel
dengan Tabel Header</b></caption>
<tr><th>Baris 1 Kolom 1 </th><th>Baris 1 Kolom 2 </th><th>Baris 1 Kolom 3 </th></tr><tr><th>Baris 2 Kolom 1 </th><td>Baris 2 Kolom 2 </td><td>Baris 2 Kolom 3 </td></tr></table>STMIK Asia Malang -
2013
Judul Tabel
STMIK Asia Malang - 2013
Sel Kosong
tabel yang memiliki judul kolom dan judul baris biasanya memiliki suatu sel kosong pada bagian kiri atasnya.
Untuk membuatnya, cukup dengan mendefinisikan sel tersebut dengan elemen TD atau TH tanpa diisi dengan data apapun.
STMIK Asia Malang - 2013
Sel Kosong
STMIK Asia Malang - 2013
Perataan Tabel
Tabel dapat diratakan baik secara horizontal maupun secara vertikal.
Perataan horizontal mempunyai orientasi ke kiri, kanan dan tengah.
Sedang perataan vertikal orientasinya ke atas, bawah dan tengah.
STMIK Asia Malang - 2013
Perataan Tabel
STMIK Asia Malang - 2013
Mengatur Lebar Tabel
Lebar suatu tabel diatur besarnya dengan menggunakan atribut WIDTH.
Atribut WIDTH digunakan untuk mengubah lebar tabel maupun lebar kolom suatu tabel.
STMIK Asia Malang - 2013
Mengatur Lebar Tabel
STMIK Asia Malang - 2013
Frame tabel
Ketebalan garis pada frame tabel dapat diseting dengan atribut border.
Sedangkan jenis frame tabel di seting dengan atribut frame.
STMIK Asia Malang - 2013
Frame border
<table frame=”border”><tr><td>Pertama</td><td>Baris</td></tr><tr><td>Kedua</td><td>Baris</td></tr></table>
STMIK Asia Malang - 2013
Frame box
<h4>Dengan frame=”box”:</h4><table frame=”box”><tr>
<td>Pertama</td><td>Baris</td></tr><tr><td>Kedua</td><td>Baris</td></tr>
</table>
STMIK Asia Malang - 2013
Frame Void
<h4>Dengan frame=”void”:</h4><table frame=”void”><tr><td>Pertama</td><td>Baris</td></tr><tr><td>Kedua</td><td>Baris</td></tr></table>
STMIK Asia Malang - 2013
Frame above
<h4>Dengan frame=”above”:</h4><table frame=”above”><tr><td>Pertama</td><td>Baris</td></tr><tr><td>Kedua</td><td>Baris</td></tr></table>
STMIK Asia Malang - 2013
Frame Below
<h4>Dengan frame=”below”:</h4><table frame=”below”><tr><td>Pertama</td><td>Baris</td></tr><tr><td>Kedua</td><td>Baris</td></tr></table>
STMIK Asia Malang - 2013
Frame Hsides
<h4>Dengan frame=”hsides”:</h4><table frame=”hsides”><tr><td>Pertama</td><td>Baris</td></tr><tr><td>Kedua</td><td>Baris</td></tr></table>
STMIK Asia Malang - 2013
Frame Vsides
<h4>Dengan frame=”vsides”:</h4><table frame=”vsides”><tr><td>Pertama</td><td>Baris</td></tr><tr><td>Kedua</td><td>Baris</td></tr></table>
STMIK Asia Malang - 2013
Frame LHS
<h4>Dengan frame=”lhs”:</h4><table frame=”lhs”><tr><td>Pertama</td><td>Baris</td></tr><tr><td>Kedua</td><td>Baris</td></tr></table>
STMIK Asia Malang - 2013
Frame RHS
<h4>Dengan frame=”rhs”:</h4><table frame=”rhs”><tr><td>Pertama</td><td>Baris</td></tr><tr><td>Kedua</td><td>Baris</td></tr></table>
STMIK Asia Malang - 2013
Pewarnaan Tabel
Pemberian warna dapat dilakukan pada tabel, sel maupun pada border dari suatu tabel.
Warna dapat ditulis dengan menggunakan bilangan Hexadesimal RRGGBB atau dengan menyebutkan warnanya.
Atribut BGCOLOR digunakan pada perintah TABLE, TD, TR
STMIK Asia Malang - 2013
Pewarnaan Tabel
STMIK Asia Malang - 2013
Mengantur Spasi Tabel
Atribut yang digunakan untuk mengatur spasi dalam tabel yaitu CELLSPACING dan CELLPADDING.
CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah sel dalam sebuah tabel,
CELLPADDING digunakan untuk menentukan jumlah spasi yang terdapat diantara border sel dan dengan isi yang ada didalam sel tersebut.
STMIK Asia Malang - 2013
Mengantur Spasi Tabel
STMIK Asia Malang - 2013
Menggabungkan Kolom dan Baris Pada tabel dapat digabungkan
dua atau lebih kolom/baris menjadi satu buah kolom/baris.
Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN, sedang atribut untuk menggabungkan baris adalah ROWSPAN.
Kedua atribut ini bisa dikenakan pada sembarang sel dalam suatu tabel (TH atau TD) dan untuk menggunakannya cukup dengan menentukan berapa banyak kolom atau baris yang akan digabungkan.
STMIK Asia Malang - 2013
Menggabungkan Kolom dan Baris
STMIK Asia Malang - 2013
Contoh <table border="4">Make a
Table<tr><th bgcolor="blue">Header 1<th bgcolor="red">Header 2<tr><td bgcolor="yellow">Satu<td bgcolor="gold">dua<tr><td bgcolor="magenta" colspan="2"<em>Not Available</em></table>
STMIK Asia Malang - 2013
Contoh <TABLE border="1"><CAPTION>Cups of coffee consumed by
each senator</CAPTION><TR><TH bgcolor="aquamarine">Name<TH>Cups<TH>Type of Coffee<TH>Sugar?<TR><TD bgcolor="aquamarine">T. Sexton<TD>10<TD>Espresso<TD>No<TR><TD bgcolor="aquamarine">J. Dinnen<TD>5<TD>Decaf<TD>Yes<TR><TD bgcolor="aquamarine">A. Soria<TD bgcolor="summer sky" colspan="3"><em>Not available</em>
STMIK Asia Malang - 2013
Latihan
Kembangkan web latihan (web pribadi) pada pertemuan sebelumnya.
Atur layout dan tata letak komponen dengan menggunakan pentabelan agar lebih rapi (luruskan teks dan titik dua /: )
STMIK Asia Malang - 2013