Tabel memiliki peranan yang cukup penting
dalam pendesainan suatu tampilan. Dengan menggunakan tabel kita dapat dengan
mudah menentukan letak suatu objek. Untuk membuat tabel digunakan
<table></table>. Atribut dari tag table boleh dibilang cukup
banyak. Daftar atribut tag table dapat anda lihat pada tabel 1.3.
Tabel 1.3 Daftar atribut dari tag table
Jika kita hanya menggunakan tag <table></table> saja maka tabel tidak akan pernah terbentuk karena belum memiliki baris dan kolom. Untuk membuat baris kita gunakan tag <tr></tr> dan untuk membuat kolom digunakan tag <td></td>. Terdapat juga tag <th></th> tag ini digunakan untuk membuat header tabel. Ketiga tag tersebut memiliki atribut yang hampir sama. Lihat tabel 1.4 untuk melihat daftar atributnya.
Tabel 1.4 Daftar atribut tag tr, td, dan th
Contoh dibawah ini mengilustrasikan kita akan membuat tabel dengan dua baris dan satu kolom.
<table border="1">
<tr>
PENERAPAN TEORI MEMBUAT TABEL
Seperti biasa jalankan PHP DESIGNER 2006. Klik File-New-HTML/XHTML untuk membuat file HTML baru. Kemudian ketik kode dibawah ini
<html>
<head>
<title>Membuat Tabel</title>
</head>
Atribut
|
Keterangan
|
width
|
untuk mengatur lebar tabel (% atau pixel)
|
height
|
untuk mengatur tinggi tabel
|
border
|
untuk menentukan tebal bingkai
|
cellpadding
|
menentukan jarak padding antar cell
|
cellspacing
|
menentukan jarak spacing antar cell
|
name
|
untuk menentukan nama tabel
|
bgcolor
|
untuk mengatur warna background
|
background
|
untuk menampilkan gambar sebagai background
|
align
|
letak teks secara horizontal (rata kiri, tengah atau kanan)
|
valign
|
letak teks secara vertical (rata atas, tengah atau bawah)
|
style
|
untuk CSS
|
bordercolor
|
untuk mengatur warna bingkai
|
Jika kita hanya menggunakan tag <table></table> saja maka tabel tidak akan pernah terbentuk karena belum memiliki baris dan kolom. Untuk membuat baris kita gunakan tag <tr></tr> dan untuk membuat kolom digunakan tag <td></td>. Terdapat juga tag <th></th> tag ini digunakan untuk membuat header tabel. Ketiga tag tersebut memiliki atribut yang hampir sama. Lihat tabel 1.4 untuk melihat daftar atributnya.
Tabel 1.4 Daftar atribut tag tr, td, dan th
Atribut
|
Keterangan
|
height
|
untuk mengatur tinggi
|
bgcolor
|
untuk mengatur warna background
|
background
|
untuk menjadikan gambar sebagai background
|
align
|
untuk mengatur letak teks
|
valign
|
untuk mengatur letak teks secara vertical
|
colspan
|
untuk menghilangkan sejumlah kolom
|
rowspan
|
Contoh dibawah ini mengilustrasikan kita akan membuat tabel dengan dua baris dan satu kolom.
<table border="1">
<tr>
<td>Baris
1 kolom 1</td>
</tr>
<tr>
</tr>
<tr>
<td>Baris 2 kolom
1</td>
</tr>
</table>
</tr>
</table>
PENERAPAN TEORI MEMBUAT TABEL
Seperti biasa jalankan PHP DESIGNER 2006. Klik File-New-HTML/XHTML untuk membuat file HTML baru. Kemudian ketik kode dibawah ini
<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<h2>Daftar
Harga</h2>
<table border="1"
style="border-collapse: collapse"
width="100%">
<tr bgcolor="#cccccc">
<th>Nama
Barang</th><th>Harga Satuan</th><th>Jumlah Barang</th>
<th>Total</th>
</tr>
<tr align="center">
<td>CD R</td><td>Rp.
2.000,-</td><td>5</td><td>Rp. 10.000,-</td>
</tr>
<tr
align="center">
<td>CD
RW</td><td>Rp.
5.000,-</td><td>4</td><td>Rp. 20.000,-</td>
</tr>
<tr align="center">
<td colspan="3">TOTAL
>>> </td><td><b>Rp.
30.000,-</b></td>
</tr>
</table>
</body>
</html>
Simpan dengan nama tabel.html. Jika anda jalankan pada Internet Explorer maka hasilnya akan terlihat seperti gambar 1.2.
Simpan dengan nama tabel.html. Jika anda jalankan pada Internet Explorer maka hasilnya akan terlihat seperti gambar 1.2.
Gambar 1.2: output file tabel.html
Posting Komentar