Table merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris. 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 table
• color – Untuk mengatur warna suatu sel dalam table
• 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.
CONTOH:
<html>
<head>
<title>::: Pembuatan Table :::</title>
</head>
<body background=backgrnd.gif>
<font face=arial size=2 color=maroon>
<table width="100" border="1" cellspacing="2" cellpadding="2">
<tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFCC99"> </td>
</tr></table>
</body>
</html>
maka hasinya akan seperti gambar di bawah ini:
Untuk gambar lebih jelasnya klik saja gambarnya...
Contoh yang lain:
<html>
<head>
<title>::: Pembuatan Table :::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table>
<tr>
<td>Ini contoh tabel sederhana tanpa border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>Ini contoh tabel sederhana dengan border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>Jam 'Iyatul Khoir</td>
<td>Bulubrangsi Lamongan</td>
</tr>
<tr>
<td>2.</td>
<td>Ari Mulyaningsih</td>
<td>Wringin Anom Gresik</td>
</tr>
</table>
</body>
</html>
maka hasinya akan seperti gambar di bawah ini:
Untuk gambar lebih jelasnya klik saja gambarnya...
Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI
Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH
No comments:
Post a Comment