Tabel adalah sebuah sarana untuk
menginformasikan data – data berupa baris dan kolom. Pada dokumen HTML,
penggunaan tabel lebih banyak digunakan untuk meningkatkan kualitas tampilan
dari sebuah web.
STRUKTUR TABEL
Dalam struktur tabel, tidak jauh
berbeda halnya dengan struktur dasar HTML. Dimana pada struktur tabel juga
terdapat beberapa elemen penting, yaitu ada 3 elemen penting yang wajib Anda
ketahui, pahami, dan hafalkan.
1.
<table> à Merupakan tag pembuka untuk
mengawali struktur dari tabel. Didalam tag pembuka ini terdapat Attribute nantinya.
</table>
à
Merupakan tag penutup untuk mengakhiri struktur dari tabel.
2. |
<tr> à
Tag pembuka untuk mendefinisikan sebuah baris dalam tabel.
</tr>
à
Tag penutup sebagai akhir dari baris tersebut
<td> à Tag pembuka untuk mendefinisikan
sebuah kolom dalam tabel
</td>
à
Tag penutup sebagai akhir dari kolom tersebut.
Penerapan
pada Notepad : ( Tabel dengan 2 baris 1 kolom )
Maka hasil
tampilan yang diperoleh dari Notepad tersebut :
Kemudian
berikutnya membuat tabel ( 2 kolom, 1 baris ) :
ATTRIBUTE DARI TABEL
Elemen Tabel
|
Attribute
|
Penulisannya
|
<table>
</table>
|
Border : untuk memberikan garis tepi / bingkai pada tabel
|
<table border=1>
</table>
|
Width : untuk mengatur lebar dari tabel
|
<table border=1 width=500>
</table>
|
|
Height : untuk mengatur tinggi dari tabel
|
<table border=1 width=500
height=400>
</table>
|
|
Align : mengatur letak tabel secara horisontal ( left, center, right )
|
<table border=1 width=500
height=400 align=center>
</table>
|
|
Valign : mengatur letak tabel secara vertical ( top, center, bottom )
|
<table border=1 width=500
height=400 align=center valign=top>
</table>
|
|
Bordercolor : untuk memberikan warna pada tepi / bingkai tabel
|
<table border=1 width=500
height=400 align=center bordercolor=red>
</table>
|
|
Bgcolor : memberikan latar belakang warna pada Tabel
|
<table border=1 width=500
height=400 align=center bordercolor=red bgcolor=pink>
</table>
|
|
Background : memberikan latar belakang berupa gambar pada Tabel
|
<table border=1 width=500
height=400 align=center background=”gambar.jpg”>
|
|
Cellspacing : digunakan untuk memberi jarak antar kolom
|
<table border=1 width=500
height=400 align=center background=”gambar.jpg” cellspacing=5>
|
|
Cellpadding : digunakan untuk memberi jarak obyek dengan kolom
|
<table border=1 width=500
height=400 align=center background=”gambar.jpg” cellspacing=5 cellpadding=20>
|
|
<tr>
</tr>
|
Align dan Valign
|
<tr align=center
valign=center>
</tr>
|
<td>
</td>
|
Bgcolor : digunakan untuk memberikan latar belakang warna pada kolom
|
<td bgcolor=yellow>
</td>
|
Width : mengatur lebar kolom
|
<td width=200></td>
|
|
Height : mengatur tinggi kolom
|
<td height=300></td>
|
|
Background : memberikan gambar pada kolom
|
<td background=”gambar.jpg”>
</td>
|
|
Align dan Valign
|
<td align=left valign=top></td>
|
|
Colspan : digunakan untuk menggabungkan beberapa kolom menjadi satu
|
<td colspan=2>
</td>
|
|
Rowspan : digunakan untuk menggabungkan beberapa baris menjadi satu
|
<td rowspan=2>
</td>
|
No comments:
Post a Comment