Untuk membuat table pada halaman HTML kita harus menggunakan tag <table>…</table>. Elemen pada table berisi properti <tr>…</tr> untuk menentukan baris (table row) atau membuat baris baru yang di dalamnya terdapat property <td>…</td> untuk menampilkan data pada setiap sel table (table data) atau untuk membuat kolom baru.
Sebagai contoh struktur elemen table adalah sebagai berikut :
<html>
<head>
<title>Struktur Table</title>
</head>
<body>
<table border=”1”>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baris 1 kolom 2</td>
</tr>
<tr>
<td>data baris 2 kolom 1</td>
<td>data baris 2 kolom 2</td>
</tr>
<tr>
<td>data baris 3 kolom 1</td>
<td>data baris 3 kolom 2</td>
</tr>
</table>
</body>
</html>
Maka akan terlihat seperti ini strukturnya :
Sekarang saya akan menjelaskan
atribut yang terdapat dalam tag <table>.
Atribut elemen table :
Width = Lebar tabel
Height = tinggi table
Border = tebal garis table
Cellspacing = spasi antar sel
Cellpadding = spasi di dalam sel
Align = [left | center | right] perataan table
Bgcolor = warna latar belakang table
Atribut table row
Align = [left | center | right] perataan sebaris sel
secara horizontal
Valign = [top | middle | bottom] perataan sebaris sel
secara vertical
Bgcolor = warna latar belakang baris
Atribut table data :
Rowspan = menggabungkan baris
Colspan = menggabungkan kolom
Align = [left | center | right] perataan horizontal
Valign = [top | middle | bottom] perataan horizontal
Width = lebar sel
Height = tinggi sel
Bgcolor = warna latar belakang sel
Ketikan script HTML berikut pada
note pad lalu simpan dengan ekstensi .HTML lalu jalankan untuk mencobanya.
<html>
<head>
<title>Tabel</title>
</head>
<body>
Berikut ini contoh table dengan rowspan dan colspan
<table width=80% border=2 cellspacing=0 cellpading=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 2</td>
</tr>
</table>
</body>
</html>
Semoga artikel ini bermanfaat, apabila ada yang masih bingung bisa di komentarkan....
0 komentar:
Post a Comment