Cara Membuat Tabel Dari Nol sampai Mahir
Tabel juga merupakan salah satu komponen penting dalam pembuatan suatu dokumen html.
Tabel dapat dibuat dengan menggunakan elemen <TABLE>...</TABLE>
Bagian-bagian dari elemen Tabel ini adalah :
- Table Row -> Mendefinisikan suatu baris dalam tabel => <TR>...</TR>
- Table Data -> Mendefinisikan suatu kolom dan memasukkan data pada kolom tersebut => <TD>...</TD>
- Table Head -> Memberi judul tabel yang biasanya terletak pada baris paling atas atau sebelah kiri tabel. Tulisan bercetak tebal => <TH>...</TH>
- Caption -> Memberi judul tabel yang terletak di luar tabel => <CAPTION>...</CAPTION>
Berikut atribut yang dapat digunakan :
- Background -> Memberi latar belakang gambar
- Bgcolor -> Memberi latar belakang warna
- Border -> Memberi batas tabel
- Bordercolor -> Memberi warna pada batas tabel
- Cellspacing -> Mengatur banyak spasi antar sel
- Cellpading -> Mengatur jarak data dengan batas tabel
- Height -> Mengatur tinggi tabel
- Width -> Mengatur lebar tabel
- Rowspan -> Menggabungkan beberapa baris secara vertikal
- Colspan -> Menggabungkan beberapa kolom secara horizontal
- Align -> Mengatur perataan tulisan
Contoh :
Ketik kode berikut pada notepad kemudian simpan dalam bentuk html (baca : cara menyimpan dalam html).
<html>
<body>
<table height="100%" width="100%" border="2" bordercolor="red" cellpading="20" cellspacing="10">
<tr>
<td width="40%" height="40%" bgcolor="yellow">Kolom 1</td>
<td colspan="3" background="question.jpg" align="center">Kolom 2 gabungan 3 kolom</td>
</tr>
<tr>
<td rowspan="4" bgcolor="aqua">Kolom 3 gabungan 4 baris</td>
<td width="20%" height="15%">Kolom 4</td>
<td width="20%" height="15%">Kolom 5</td>
<td width="20%" height="15%">Kolom 6</td>
</tr>
<tr>
<td width="20%" height="15%">Kolom 7</td>
<td width="20%" height="15%">Kolom 8</td>
<td width="20%" height="15%">Kolom 9</td>
</tr>
<tr>
<td colspan="3" rowspan="2" width="60%" height="30%">Kolom 10 gabungan 3 kolom dan 2 baris</td>
</tr>
</table>
</body>
</html>
Jika kode html di atas dibuka pada browser maka tampilannya nampak seperti berikut.
Post a Comment