Header Ads

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 :
  1. Table Row -> Mendefinisikan suatu baris dalam tabel => <TR>...</TR>
  2. Table Data -> Mendefinisikan suatu kolom dan memasukkan data pada kolom tersebut => <TD>...</TD>
  3. Table Head -> Memberi judul tabel yang biasanya terletak pada baris paling atas atau sebelah kiri tabel. Tulisan bercetak tebal => <TH>...</TH>
  4. 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.





Tidak ada komentar

Diberdayakan oleh Blogger.