Tabel adalah sebuah sarana menginformasikan data-data berupa kolom dan baris. Pada umumnya pada setiap kolom menunjukan data-data yang sama dalam suatu kelompok data, sedangkan baris menunjukan data-data dari kolom-kolom yang menunjukan sekelompok data dalam suatu kumpulan. Pada dokumen html, penggunaan tabel lebih banyak di gunakan untuk mengorganisasikan data dalam struktur tabular yang rumit. Selain itu penggunaan tabel dalam sebuah dokumen html dapat meningkatkan kualitas tampilan dari sebuah web karena kita dapat leluasa mengatur halaman web.
Sintak dasar dalam pembuatan table adalah sebagai berikut :
<table>
<tr>
<td>……..isi cell/isi colom 1 barisi 1……</td><td>……..isi cell/isi colom 2 baris 1……</td>
</tr>
<tr>
<td>……..isi cell/isi colom 1 barisi 2……</td><td>……..isi cell/isi colom 2 baris 2……</td>
</tr>
<tr>
<td>……..isi cell/isi colom 1 barisi 3……</td><td>……..isi cell/isi colom 2 baris 3……</td>
</tr>
</table>
Secara umum atau garis besar elemen dari sebuah table terdiri dari :
| Elemen dasar tabel | Keterangan |
| <table>…</table> | Mendefinisikan sebuah table dengan atribut table antara lain : Border=”angka” Bordercolor=”kode warna” Align=”left | center |right” Cellpadding=”angka” Cellspacing=”angka” Width=”angka (persen % atau pexel)” |
| <tr>…</tr> | Mendefinisikan sebuah baris dalam sebuah table dengan atribut antara lain : Align=”left | center |right” Valign=”bottom | middle | top” |
| <td>…</td> | Mendefinisikan sebuah cell dalam sebuah colom dengan atribut antara lain : Align=”left | center |right” Valign=”bottom | middle | top” Bgcolor=”kode warna” Colspan / rowspan=”angka” Width=”angka (persen % atau pexel)” |
| <th>…</th> | Mendefinisikan cell header dalam sebuah garis Secara default,atribut antara lain : Align=”left | center |right” Valign=”bottom | middle | top” Bgcolor=”kode warna” Colspan / rowspan=”angka” Width=”angka (persen % atau pexel)” |
Pengaturan border
Border adalah garis yang membatasi atau mengelilingi table. Apabila atribut border tidak di gunakan dalam sebuah table, maka border tersebut tidak di tampilkan.
Sintaknya adalah sebagai berikut :
<table border=”angka”>
…………………………
</table>
Cellpadding dan cellspacing
Cellpadding di gunakan untuk mengatur jarak antara tepi table dengan isi cell, baik vertical maupun horizontal dalam sebuah pixel, sedangkan cellspacing digunakan untuk mengatur table atau frame dalam suatu pixel.
Sintaknya adalah sebagai berikut :
<table border=”angka” cellpadding=”angka” cellspacing=”angka”>
……………………………………
<table>
Contoh :
<html>
<head>
<title>index table</title>
</head>
<body>
<p align="center">
<table border="1" cellpadding="3" cellspacing="3">
<tr>
<td rowspan="2">Nama buku</td>
<td colspan="2">Category</td>
</tr>
<tr>
<td>pelajaran</td>
<td>Non-pelajaran</td>
</tr>
<tr>
<td>PKN</td>
<td>Ya</td>
<td>Bukan</td>
</tr>
<tr>
<td>Naruto #1</td>
<td>Bukan</td>
<td>Ya</td>
</tr>
<tr>
<td>Doraemon</td>
<td>Ya</td>
<td>Bukan</td>
</tr>
</table>
</p>
</body>
</html>
Note : Untuk hasil bias di lihat sendiri sekalian di praktekan
Post a Comment