Tabel dalam HTML

*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.

 

<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.

  <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 ) :

Hasil tampilan Notepad diatas :

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>

 

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.