Layout Halaman Web dengan Tabel (Table)
Table merupakan
cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan
baris.
Membuat Tabel
Terdapat tiga
tag atau elemen utama yang digunakan dalam pembuatan table, yaitu:
<TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag
<TR> dan <TD> harus terletak di antara tag <TABLE> dan
</TABLE> .
þ
<TABLE>
Digunakan untuk
mendefinisikan pembuatan tabel. Memiliki attribut:
·
align - perataan: rata kiri (left), tengah (center) atau
kanan (right).
·
valign – mengatur bentuk
perataan secara vertikal
·
bgcolor – mengatur warna
latar belakang (background) dari tabel.
·
background – menentukan
gambar yang digunakan sebagai background tabel
·
color – Untuk
mengatur warna suatu sel dalam tabel
·
border – menentukan ukuran
border tabel (dalam pixel).
·
rowspan – menggabungkan
beberapa baris
·
colspan – menggabungkan
beberapa kolom
·
cellpadding - jarak antara isi
cell dengan batas cell (dalam pixel).
·
cellspacing – mengatur spasi/jarak
antar cell (dalam pixel).
·
width – menentukan lebar tabel
dalam pixel atau percent.
·
height
– Menentukan tinggi tabel
<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari
atribut:
· align - perataan: rata kiri (left), tengah (center) atau
kanan (right).
· bgcolor - warna
latar belakang dari baris.
· valign - perataan
vertikal: top, middle atau bottom.
<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya adalah:
· align – untuk
menentukan perataan kolom
·
background – untuk menentukan image
yang digunakan sebagai latar belakang dari kolom.
· bgcolor – untuk
menentukan warna latar belakang
· colspan - lihat
gambar contoh
· height – untuk
mengatur ukuran tinggi cell dalam pixels.
· nowrap – untuk membuat
supaya isi dari kolom tetap berada pada satu baris.
· rowspan - lihat
gambar contoh
· valign – untuk
mengatur perataan vertikal: top, middle atau bottom.
· width – untuk
menentukan lebar kolom dalam pixel atau percen.
Ikuti langkah-langkah berikut ini:
1. Buat direktori dengan nama latihan di drive C:.
Dan selanjutnya dalam direktori ini kita akan menyimpan semua file-file latihan
kita.
2. Buka Browser,
misalnya Internet Explorer atau Netscape Navigator.
3. Buka program aplikasi teks editor misalnya dalam
latihan ini adalah Notepad.
4. Mulai baris paling atas, tuliskan:
<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table border=1>
<caption
align=bottom><b><u>Daftar
Alamat</u></b></caption>
<tr>
<th width=60
align=left>No.</td>
<td
width=150>1.</td>
<td
width=200>2.</td>
</tr>
<tr>
<th
align=left>Nama</td>
<td>Ravy Octhavy
Yansen</td>
<td>Eny Lusita</td>
</tr>
<tr>
<th
align=left>Alamat</td>
<td>Depok</td>
<td>Jakarta</td>
</tr>
</table>
</body>
</html>
5. Simpan file anda dengan cara klik menu File
– Save-As :
6. Pada box File name, isikan nama filenya
dengan Latihan7.html
Untuk
menjalankan kode-kode tersebut, silahkan buka browser seperti Internet
Explorer, Mozila Firefox.
1.
Klik menu File à
Open
2.
Ketika jendela baru terbuka pilih file Latihan7.html.
3.
Klik tombol Open lalu tekan tombol Ok,
halaman web yang ditampilkan dalam browser adalah seperti berikut:
0 komentar:
Posting Komentar