Desain WEB dengan memanfaatkan TABEL
Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. Perpotongan baris dan kolom didalam tabel disebut sebagai sel. Bagaimanapun, fleksibilitas HTML memungkinkan kita untuk menampilkan data didalam tabel secara atraktif. Artinya, tak hanya sebatas pada data tabular saja, namun juga mengizinkan kita melakukan pemformatan.
1. Menciptakan tabel
Pembuatan table sangat sederhana sekali, hanya masalah pengorganisasian. Semua tabel harus diawali dengan tag tabel, kemudian ada tiga tag dasar yang mengikutinya, meliputi:
a. table heading yang berfungsi mendefinisikan header
b. table row yang berfungsi mendefinisikan baris
c. table data yang berfungsi mendefinisikan sel
2. Pemformatan tabel
Elemen table menyediakan sejumlah atribut yang dapat digunakan untuk memformat visualisasi table. Tiga atribut yang sering digunakan adalah align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antar sel), dan cellpadding (untuk mengatur spasi antara border sel dengan isinya)
3. Desain tabel
Sebuah table tidak selalu memiliki ukuran dan jumlah sel yang sama dalam setiap baris ataupun kolomnya. Sebagai contoh, mungkin kita perlu melakukan penggabungan (merge) sel. Dalam konteks elemen table, penggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom (colspan)
Ini adalah contoh sederhana desain web menggunakan tabel. Semoga bermanfaat.
source code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AgusSite</title>
<style type="text/css">
<!--
a:link {
color: #0000CC;
}
a:visited {
color: #990033;
}
a:active {
color: #FF0000;
}
a:hover {
color: #00FF00;
}
-->
</style></head>
<body>
<table width="894" border="0" align="center">
<tr>
<td height="62" colspan="3"><img src="image/header.jpg" width="900" height="198" /></td>
</tr>
<tr>
<td width="149" height="98" bgcolor="#666666">
<table width="100%" border="0" bgcolor="">
<tr align="center" bgcolor="#FF6600">
<td bordercolor="#FF6600" bgcolor="#CCCCCC"><strong>Menu</strong></td>
</tr>
<tr align="center" bgcolor="#FF6600">
<td bordercolor="#FF6600" bgcolor="#FF6600"><a href="index.html">Home</a></td>
</tr>
<tr align="center" bgcolor="#FF6600">
<td bordercolor="#FF6600" bgcolor="#FF6600"><a href="pop.html">Musik POP</a> </td>
</tr>
<tr align="center" bgcolor="#FF6600">
<td bordercolor="#FF6600" bgcolor="#FF6600"><a href="rock.html">Musik Rock</a> </td>
</tr>
<tr align="center" bgcolor="#FF6600">
<td bordercolor="#FF6600" bgcolor="#FF6600"><a href="dangdut.html">Musik Dangdut </a></td>
</tr>
<tr align="center" bgcolor="#FF6600">
<td bordercolor="#FF6600" bgcolor="#666666"> </td>
</tr>
<tr align="center" bgcolor="#FF6600">
<td bordercolor="#FF6600" bgcolor="#666666"> </td>
</tr>
</table>
</td>
<td width="588">
<div align="center">
<h1><strong>Selamat Datang di AgusSite</strong></h1>
<h6><strong><---Halaman WEB Sederhana---></strong></h6>
<img src="image/Welcome.gif" align=left width="560" height="40"/>
</td>
<td width="150"><table width="100%" border="0" bgcolor="#666666">
<tr align="center" bgcolor="#FF6600">
<td bgcolor="#CCCCCC"><strong>Link WebSite </strong></td>
</tr>
<tr align="center" bgcolor="#FF6600">
<td bordercolor="#FF6600" bgcolor="#FF6600"><a href="profil.html">Profil</td>
</tr>
<tr align="center" bgcolor="#666666">
<td bordercolor="#666666" bgcolor="#FF6600"><a href="JadwalKuliah.html">Jadwal Kuliah </td>
</tr>
<tr align="center" bgcolor="#666666">
<td bordercolor="#666666" bgcolor="#FF6600"><a href="www.um.ac.id">Kampus UM Malang </td>
</tr>
<tr align="center" bgcolor="#666666">
<td bordercolor="#666666" bgcolor="#FF6600"><a href="www.google.com">Google</td>
</tr>
<tr align="center" bgcolor="#666666">
<td bordercolor="#666666" bgcolor="#FF6600"><a href="www.yahoo.com">Yahoo</td>
</tr>
<tr align="center" bgcolor="#666666">
<td bordercolor="#666666" bgcolor="#FF6600"><a href="www.facebook.com">Facebook</td>
</tr>
</table></td>
</tr>
<tr>
<td height="23" colspan="3" align="center" bgcolor="#A0A0A4">copyright@agusblogsite.blogspot.com </td>
</tr>
</table>
</body>
</html>
copy code diatas kemudian buka program notepad.exe kemudian paste di program notepad tersebut. Simpan file dalam format html, caranya dibagian save as type diganti ke allfiles kemudian tambahkan .html pada nama file contohnya namafile.html kemudian buka file tersebut melalui browser.
Source Code desain web dengan memanfaatkan tabel (menampilkan Header, Footer, Left Menu, Right Menu, dan Contents) yang lengkap bisa di DOWNLOAD:
Tidak ada komentar:
Posting Komentar