Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Didalam membuat tampilan website yang menarik, para programmer sering menggunakan tabel untuk mempermudah penempatan objek pada dokumen HTML.
Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag <table>..... </table>. Elemen tabel berisi properti <tr>.....</tr> untuk menentukan baris (table row) yang di dalamnya terdapat properti <td>.....</td> untuk menampilkan data pada setiap sel tabel (table data).
Struktur lengkap dari elemen tabel adalah sebagai berikut:
<table>
<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>
</table>
Latihan07.html
<html>
<head>
<title bgcolor="#FFFFCC">Latihan-7: Membuat tabel sederhana</title>
</head>
<body>
Berikut contoh tabel dengan rowspan dan colspan:
<table width=80% border=2 cellspacing=0 cellpadding=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>
Atribut elemen tabel
width = lebar tabel, pixel atau persen
height = tinggi tabel, pixel atau persen
border = tebal garis tepi, pixel
cellspacing = spasi antar sel, pixel
cellpadding = spasi di dalam sel, pixel
align = [ left | center | right ] (perataan tabel)
bgcolor = warna latar belakang tabel
Atribut table row <tr>
align = [ left | center | right ] (perataan sebaris sel secara horisontal)
valign = [ top | middle | bottom ] (perataan sebaris sel secara vertikal)
bgcolor = warna latar belakang baris
Atribut table data <td>
rowspan = jumlah baris yang dispan oleh sel (penggabungan baris)
colspan = jumlah kolom yang dispan oleh sel (penggabungan kolom)
align = [ left | center | right ] (perataan horisontal)
valign = [ top | middle | bottom ] (perataan vertikal)
width = lebar sel, pixel atau persen
height = tinggi sel, pixel atau persen
bgcolor = warna latar belakang tabel
Latihan08.html
<html>
<head>
<title bgcolor="#FFFFCC">Latihan-8: Mengatur bentuk tabel</title>
</head>
<body>
<table width=80% border=2 cellspacing=2 cellpadding=2>
<tr>
<td colspan=2>
Latihan menampilkan gambar dan link dalam tabel
</td>
</tr>
<tr>
<td width=25% height=300 align=center>
<img src="Gambar.jpg" width=50%>
</td>
<td valign=top>
Kolom sebelah kiri untuk menampilkan gambar,
sedangkan baris paling bawah untuk menempatkan link
</td>
</tr>
<tr>
<td colspan=2 align=center>
<a href="Latihan05.HTML">Link ke Latihan 1.05</a>
</td>
</tr>
</table>
</body>
</html>
Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag <table>..... </table>. Elemen tabel berisi properti <tr>.....</tr> untuk menentukan baris (table row) yang di dalamnya terdapat properti <td>.....</td> untuk menampilkan data pada setiap sel tabel (table data).
Struktur lengkap dari elemen tabel adalah sebagai berikut:
<table>
<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>
</table>
Latihan07.html
<html>
<head>
<title bgcolor="#FFFFCC">Latihan-7: Membuat tabel sederhana</title>
</head>
<body>
Berikut contoh tabel dengan rowspan dan colspan:
<table width=80% border=2 cellspacing=0 cellpadding=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>
Atribut elemen tabel
width = lebar tabel, pixel atau persen
height = tinggi tabel, pixel atau persen
border = tebal garis tepi, pixel
cellspacing = spasi antar sel, pixel
cellpadding = spasi di dalam sel, pixel
align = [ left | center | right ] (perataan tabel)
bgcolor = warna latar belakang tabel
Atribut table row <tr>
align = [ left | center | right ] (perataan sebaris sel secara horisontal)
valign = [ top | middle | bottom ] (perataan sebaris sel secara vertikal)
bgcolor = warna latar belakang baris
Atribut table data <td>
rowspan = jumlah baris yang dispan oleh sel (penggabungan baris)
colspan = jumlah kolom yang dispan oleh sel (penggabungan kolom)
align = [ left | center | right ] (perataan horisontal)
valign = [ top | middle | bottom ] (perataan vertikal)
width = lebar sel, pixel atau persen
height = tinggi sel, pixel atau persen
bgcolor = warna latar belakang tabel
Latihan08.html
<html>
<head>
<title bgcolor="#FFFFCC">Latihan-8: Mengatur bentuk tabel</title>
</head>
<body>
<table width=80% border=2 cellspacing=2 cellpadding=2>
<tr>
<td colspan=2>
Latihan menampilkan gambar dan link dalam tabel
</td>
</tr>
<tr>
<td width=25% height=300 align=center>
<img src="Gambar.jpg" width=50%>
</td>
<td valign=top>
Kolom sebelah kiri untuk menampilkan gambar,
sedangkan baris paling bawah untuk menempatkan link
</td>
</tr>
<tr>
<td colspan=2 align=center>
<a href="Latihan05.HTML">Link ke Latihan 1.05</a>
</td>
</tr>
</table>
</body>
</html>
Komentar
Posting Komentar