05. html 4.ppt

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