Di dalam html, memungkinkan untuk menampilkan data di dalam tabel secara atraktif. Yang artinya, tak hanya sebatas pada data tabular saja, namun juga mengijinkan untuk melakukan pemformatan.
Untuk menampilkan tabel, pada prinsipnya sangat sederhana, yaitu hanya pada pengorganisasian. semua tabel harus diawali dengan tag <table> kemudian ada tiga tag dasar yang mengikutinya, yaitu meliputi:
- Tag <th> atau table heading yang berfungsi mendefinisikan header
- Tag <th> atau table row yang berfungsi mendefinisikan baris
- Tag <th> atau table data yang berfungsi mendefinisikan sel
Di dalam elemen tabel menyediakan sejumlah atribut yang dapat digunakan untuk memformat visualisasi tabel. Tiga atribut yang pertama sering digunakan adalah align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antar sel) dan cellpadding (untuk mengatur spasi antar border sel dengan isinya).
Sebuah tabel tidak sellau memiliki ukuran dan jumlah sel yang sama dalam setiap baris ataupun kolomnya. Misalnya, mungkin kita perlu melakukan penggabungan (marge) sel. Dalam konteks elemen tabel penggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom (colspan).
Sebuat tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam setiap baris ataupun kolom. Misalnya, kita perlu melakukan penggabungan (marge) sel.
Dalam konteks elemen tabel, peggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom (colspan).
Di bawah ini adalah contoh mendesain web dengan memanfaatkan tabel. Untuk lebih jelasnya lihat kode html berikut:
<!DOCTYPE html
PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Neng Uus Cute</title>
</head>
<body>
<table border=1 align="center" cellspacing=0 cellpadding=5>
<tr>
<td colspan="3" scope="col" align="center" height="80">Header</th>
<tr>
<tr>
<td width ="150" valign="top" height = "350">Left Menu</a></td>
<td width= "550" valign="top" height = "350">Contens</td>
<td width = "150" valign="top" height = "350">Righ Menu</td>
</tr>
<tr>
<td colspan="3" scope="col" align="center" height="80">Footer</td>
</tr>
</table>
<p align="center">© Copyright <a href = "mailto: mbauus@gmail.com">mba-uus.blogspot.com</a>
</body>
</html>
Hasil eksekusinya yaitu sebagai berikut:
Selamat mencoba...Semoga sukses!!!
Tidak ada komentar:
Posting Komentar