Materi Pengantar Web Pertemuan Ke5

TABEL
Untuk menciptakan tabel yang berisi baris (row) dan kolom . Berikut ini adalah
beberapa tag yang sering digunakan dalam membuat tabel :
Tag Keterangan
<TABLE> Mengawali pembentukan sebuah tabel
<CAPTION> Menentukan judul sebuah tabel
<TR> Membuat sebuah baris dalam tabel
<TD> Membuat sebuah sel data
<TH> Membuat judul kolom ( huruf terlihat tebal )
 HEADING DALAM TABLE
Heading dalam tabel dibuat dengan tag <th>

Contoh 1:
<table border="0">
<tr>
<th>Heading</th>
<th>Heading lain</th>
</tr>
<tr>
<td>baris 1 kolom 1</td>
</tr>
<tr>
</tr>
</table>
Hasilnya:
 MEMBERI GARIS PADA TABEL
Untuk memberi garis pada tabel, kita bisa menggunakan atribut BORDER pada tag
<table>. Bentuk nya adalah:
<table border=”nilai”>
Jika atribut border tidak disertakan di dalam tag table, nilai border dianggap sama
dengan nol, sehingga garis tidak akan ditampilkan seperti pada contoh 1. Dengan kata
lain identik dengan
<table border=”0”>
Contoh 2 :
<HTML>
<HEAD>
<TITLE>Tabel dengan Garis</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Daftar Harga Keladi</CAPTION>
<TR><TH>Nama</TH><TH>Harga</TH></TR>
<TR><TD>Red Flash</TD><TD>35.000</TD></TR>
<TR><TD>Red Fire</TD><TD>60.000</TD></TR>
<TR><TD>Fannie Munson</TD><TD>60.000</TD></TR>
</TABLE>
</BODY>
</HTML>
Hasilnya :
Pada kode di atas, <table>..</table> merupakan bagian terluar dalam pendefinisian
tabel. Di dalam pasangan tag tersebut, pasangan <caption>..</caption> digunakan untuk
menentukan judul tabel. Selanjutnya,
Digunakan untuk membentuk baris yang berisi dua buah sel, yakni karena ada dua buah
pasangan <th>..</th>. Sebuah baris dibentuk oleh pasangan <tr>..</tr>. Perlu diketahui,
pasangan <th>..</th> akan membuat teks dalam keadaan tebal.
Serupa dengan <TR><TH>Nama</TH><TH>Harga</TH></TR>
Yang berbeda adalah, teks tidak tebal.
Contoh 3:
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Nama</th>
<th>Telepon</th>
<th>JK</th>
</tr>
<tr>
<td>Andi</td>
<td>085666666111</td>
<td>pria</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>Nama</th>
<td>Andi</td>
</tr>
<tr>
<th>Telepon</th>
<td>085666666111</td>
</tr>
<tr>
<th>JK</th>
<td>Pria</td>
</tr>
</table>
</body>
</html>
Hasilnya:
 MELETAKKAN JUDUL DI BAWAH TABEL
Untuk menampilkan judul di bawah tabel, atribut yang digunakan adalah align=”bottom”
yang berada pada tag <caption>
Contoh :
<HTML>
<HEAD>
<TITLE>Judul dibawah tabel</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION align="bottom">Daftar Harga Keladi</CAPTION>
</TABLE>
</BODY>
</HTML>
Hasilnya:
Dari contoh di atas, terlihat walaupun kita menuliskan teks ‘daftar harga keladi’ di
bagian atas tabel, tapi karena penulisannya di dalam tag <caption> dan menggunakan
atribut align=”bottom”, maka teks judul akan muncul di bagian bawah dari tabel
 MENENTUKAN WARNA LATAR BELAKANG TABEL
Untuk menambahkan warna latar belakang terhadap tabel, anda bisa menggunakan
atribut bgcolor pada tag <table>, nilai yang digunakan untuk bgcolor sudah dijelaskan di
depan, yaitu bisa menggunakan RGB atau bisa juga menggunakan nama warna dalam
bahasa inggris.
Contoh:
<HTML>
<HEAD>
<TITLE>Tabel dengan Garis</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1" bgcolor="aqua">
<CAPTION align="bottom">Daftar Harga Keladi</CAPTION>
</TABLE>
</BODY>
</HTML>
Hasilnya:
Dari contoh terlihat bahwa background tabel berubah warna menjadi warna aqua.
Contoh berikut menunjukkan pewarnaan tabel melalui bgcolor pada <table> dan <td>,
dan sekaligus menunjukkan cara mengatur warna teks pada sebuah kolom.
Contoh:
<html>
<head>
<title>warna tabel</title>
</head>
<body>
<table border="1" bgcolor="#00CC99">
<tr>
<td bgcolor="green">kolom satu baris satu</td>
<td>kolom dua baris satu</td>
</tr>
<tr>
<td>kolom dua baris satu</td>
<td bgcolor="#993399">
<font color="#FFFFFF">
kolom dua baris dua
</font>
</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Bgcolor pada tag <table> digunakan untuk mengatur warna latar belakang tabel agar
berubah warna menjadi #00CC99 , sedangkan
Bgcolor pada tag <td> digunakan untuk membuat sel yang yang bersangkutan latar
belakangnya berubah warna sesuai nilai yang dimasukkan pada atribut bgcolor.
 MENGGABUNGKAN SEL
HTML memungkinkan kita untuk menggabung sel pada tabel. Baik penggabungan
kolom maupun penggabungan baris.
Atribut yang digunakan:
 Rowspan : untuk menggabungkan beberapa baris
 Colspan : untuk menggabungkan beberapa kolom
Contoh rowspan:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">Nama</td>
<td>Andi</td>
</tr>
<tr>
<td>Siska</td>
</tr>
<tr>
<td>Lia</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Contoh Colspan:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td colspan="3" align="center">Kelas</td>
</tr>
<tr>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Dari contoh di atas, terlihat ada dua baris, untuk baris pertama terdapat satu kolom,
sedangkan untuk baris kedua terdapat tiga kolom.
 MENGATUR PELETAKAN TABEL DALAM HALAMAN
Atribut align pada tag <tr></th> dan <td> dapat digunakan untuk mengatur peletakan teks
dalam keadaan rata kiri, rata kanan, atau rata tengah. Nilai untuk align dapat dilihat pada tabel
berikut:
Align dan nilainya Keterangan
Align = “left” Teks diatur rata kiri
Align = ”center” Teks ditengahkan
Align = “right” Teks diatur rata kanan
Contoh :
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td colspan="3" align="center">Nilai</td>
</tr>
<tr>
<td>modul 1</td>
<td>modul 2</td>
<td>modul 3</td>
</tr>
<tr>
<td align = "left">70</td>
<td align = "center">98</td>
<td align = "right">80</td>
</tr>
</table>
</body>
</html>
Hasil
 MENGATUR TINGGI SEL
Untuk mengatur tinggi sel, kita bisa menggunakan atribut height pada tag <table>
dengan suatu nilai (yang dinyatakan dengan satuan piksel).
<html>
<body>
<table border="1">
<tr>
<th>Nama</th>
<th>Telepon</th>
<th>JK</th>
</tr>
<tr>
<td>Andi</td>
<td>085666666111</td>
<td>pria</td>
</tr>
</table>
<br>
<table border="1"height ="150">
<tr>
<th>Nama</th>
<th>Telepon</th>
<th>JK</th>
</tr>
<tr>
<td>Andi</td>
<td>085666666111</td>
<td>pria</td>
</tr>
</table>
</body>
</html>
 PENGATURAN TEKS PADA POSISI VERTIKAL
Di dalam sebuah sel, teks dapat diatur menurut posisi vertikal apakah akan diletakkan di
atas, di tengah, atau di bawah. Hal ini bisa dilakukan dengan menggunakan atribut valign
pada tag <th>, <tr>, dan <td>
Nilai untuk 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
Contoh:
<html>
<head>
</head>
<body>
<table height="200" border="1">
<tr>
<td valign="top">valign = top</td>
</tr>
<tr>
<td valign="middle">valign = middle</td>

</tr>
<tr>
<td valign="bottom">valign = bottom</td>
</tr>
</table>
</body>
</html>
Hasil:
 MENGATUR LEBAR TABEL DAN SEL
Atribut width pada tag <table> dapat digunakan untuk mengatur lebar tabel tanpa
tergantung oleh ukuran jendela browser.
Contoh:
<html>
<body>
<table border = "1">

<tr>
<td>NIM</td><td>Nama</td>
</tr>
<tr>
<td>095410014</td><td>Agus</td>
</tr>
</table>
<br>
<table border = "1" width="200">
<tr>
</tr>
<tr>
<td>095410014</td><td>Agus</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Contoh diatas menunjukkan pengaturan lebar tabel sebesar 200 piksel.
Contoh lain :
<html>
<body>
<tr>
</tr>
<tr>
<td>095410014</td><td>Agus</td>
</tr>
</table>
<br>
<table border = "1" width="75%">
<tr>
</tr>
<tr>
<td>095410014</td><td>Agus</td>
</tr>
</table>
</body>
</html>
Width = “75%” menyatakan bahwa lebar tabel sebesar 75% terhadap lebar jendela
browser
Width juga dapat dikenakan pada pada sel tertentu, dengan cara menyebutkannya pada
tag <TD> atau <TH>
 MENGATUR JARAK DALAM TABEL
Pada tag <table> terdapat dua buah atribut lagi yang dapat digunakan untuk mengatur
jarak dalam tabel.
atribut keterangan
cellpadding Mengatur jarak teks terhadap tepi kiri
Cellspasing Mengatur jarak bagian sel terhadap tepi dalam

bingkai tabel
Contoh :
<html>
<body>
<tr>
</tr>
<tr>
<td>095410014</td><td>Agus</td>
</tr>
</table>
<br>
<table border = "1" cellpadding = "20" cellspacing ="10">
<tr>
</tr>
<tr>
<td>095410014</td><td>Agus</td>
</tr>
</table>
</body>
</html>
Tabel dengan pengaturan border, cellpadding dan cellspacing dapat dimanfaatkan
untuk pembuatan tombol
Contoh :
<html>
<body>
<table border = "10" cellspacing ="10" cellpadding ="5"

bgcolor="black">
<tr>
<td><font color = "white"><B>e-mail</font></td>
</tr>
</table>
</body>
</html>
Hasil tampilan :
 TABEL DAN GAMBAR
Cell pada tabel tidak harus berupa teks, melainkan juga bisa diisi dengan gambar.
Contoh :
<html>
<body>
<table border ="2">
<tr>
<th>Gambar</th><th>Keterangan</th>
</tr>
<tr>
<td><img src="dingin.gif"</td><td>kedinginan</td>
</tr>
</table>
</body>
</html>
Hasil tampilan :

Bahasa

Materi Pengantar Web Pertemuan Ke5

Diunggah oleh

Informasi Dokumen

Deskripsi:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Deskripsi:

Hak Cipta:

Format Tersedia

Materi Pengantar Web Pertemuan Ke5

Diunggah oleh

Deskripsi:

Hak Cipta:

Format Tersedia

TABEL

<TABLE> Mengawali pembentukan sebuah tabel

<CAPTION> Menentukan judul sebuah tabel

<TR> Membuat sebuah baris dalam tabel

<TD> Membuat sebuah sel data

<TH> Membuat judul kolom ( huruf terlihat tebal )

 HEADING DALAM TABLE

Heading dalam tabel dibuat dengan tag <th>

 MELETAKKAN JUDUL DI BAWAH TABEL

<TITLE>Judul dibawah tabel</TITLE>

<TABLE BORDER = "1">

<CAPTION align="bottom">Daftar Harga Keladi</CAPTION>

 MENENTUKAN WARNA LATAR BELAKANG TABEL

<TITLE>Tabel dengan Garis</TITLE>

<TABLE BORDER = "1" bgcolor="aqua">

<CAPTION align="bottom">Daftar Harga Keladi</CAPTION>

<table border="1" bgcolor="#00CC99">

<td>kolom dua baris satu</td>

<td>kolom dua baris satu</td>

kolom dua baris dua

Atribut yang digunakan:

 Rowspan : untuk menggabungkan beberapa baris

 Colspan : untuk menggabungkan beberapa kolom

<td colspan="3" align="center">Kelas</td>

 MENGATUR PELETAKAN TABEL DALAM HALAMAN

Align dan nilainya Keterangan

Align = “left” Teks diatur rata kiri

Align = ”center” Teks ditengahkan

Align = “right” Teks diatur rata kanan

<td colspan="3" align="center">Nilai</td>

<td align = "left">70</td>

<td align = "center">98</td>

<td align = "right">80</td>

 MENGATUR TINGGI SEL

<table border="1"height ="150">

Nilai untuk 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

<table height="200" border="1">

<td valign="top">valign = top</td>

<td valign="middle">valign = middle</td>

<td valign="bottom">valign = bottom</td>

 MENGATUR LEBAR TABEL DAN SEL

<table border = "1">

<table border = "1" width="200">

<table border = "1">

<table border = "1" width="75%">

 MENGATUR JARAK DALAM TABEL

cellpadding Mengatur jarak teks terhadap tepi kiri

Cellspasing Mengatur jarak bagian sel terhadap tepi dalam

<table border = "1">

<table border = "1" cellpadding = "20" cellspacing ="10">

<table border = "10" cellspacing ="10" cellpadding ="5"

<td><font color = "white"><B>e-mail</font></td>

 TABEL DAN GAMBAR

<table border ="2">

Anda mungkin juga menyukai