Membuat Layout Website Dengan Tabel

Membuat
Layout
Website
Dengan Tabel
Rizky Bintang Utama
1

Assalamualaikum wr.wb

Kali ini saya akan memberikan tutorial tentang cara membuat layout website dengan tabel.
Pertama, anda sebelumya harus paham dengan struktur tag HTML dan CSS agar dapat memahami
dengan baik tutorial yang saya berikan ini.

2

Membuat onsep
Hal penting pertama yang harus anda pikirkan adalah membuat konsep dari layout yang akan anda
buat. Contohnya saya akan membuat konsep layout seperti ini:

Yap, kira kira seperti itulah bayangan layout yang akan saya buat dalam tutorial ini.

Merealisasikan onsep Yang Sudab
Di Buat
Saat anda sudah membuat konsep, maka anda harus merealisasikannya. Yang harus anda buat
selanjutnya adalah file index.html
Tulis dalam text editor anda:
<!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=utf-8" />
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>

<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
3

<tr>
<td colspan="2">Ini Header</td>
</tr>
<tr>
<td valign="top">Ini Isi</td>
<td width="275px" valign="top">Ini Sidebar</td>
</tr>
<tr>
<td colspan="2">Ini Footer</td>
</tr>
</table>
</body>
</html>

Maka tampilannya akan seperti ini:

Untuk saat ini tampilan masih tidak beraturan.
Sekarang saya beri penjelasannya ...
Ini adalah tag awal menyatakan bahwa dokumen ini berisi script HTML.
<head>
4

</head>
Ini adalah wilayah header yg berisi content type dan title.
Lalu link rel stylesheet menyatakan bahwa akan meload stylesheet, href adalah lokasi stylesheet,
dan type adalah tipe stylesheet.
<body>
<table width="900px" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">Ini Header</td>
</tr>
<tr>
<td valign="top">Ini Isi</td>
<td width="275px" valign="top">Ini Sidebar</td>
</tr>
<tr>
<td colspan="2">Ini Footer</td>
</tr>
</table>
</body>
Body : script didalamnya lah yang akan tampil dalam web browser.
Table : menyatakan bahwa kita akan membuat tabel.
Width : menyatakan ukuran objek yang akan dibuat.
Border : menyatakan besarnya garis yg mengelilingi objek.
Align : menyatakan posisi objek yang akan dibuat.
Cellpadding & Cellspacing : menyatakan jarak spasi antar baris dan kolom.
Tr : menyatakan baris didalam tabel.
Td : menyatakan kolom didalam tabel.
Colspan : menyatakan jumlah kolom yang di satukan dalam baris tersebut.
5

Valign : meyatakan posisi vertikal isi dari kolom tersebut.

Membuat Style Untuk Layout
Website
Nah sekaranglah saat nya membuat style atau desain dari layout yang ingin kita buat.
Buka text editor anda dan tulis script berikut:
body {
background:#CCCCCC;
margin:0 auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
a {
color:#0066FF;
text-decoration:none;
}
a:hover {
color:#0099FF;
border-bottom:1px dotted #0099FF;
}

.header {
background:#0099FF;
border-bottom:2px solid #333333;
height:90px;
padding-left:20px;
padding-top:20px;
}
.header a {
color:#FFFFFF;
text-decoration:none;
font-size:26px;
font-weight:bold;
}
.header a:hover {
border-bottom:2px dotted #FFFFFF;
}

.content {
padding:5px;
background:#FFFFFF;
}
6

#content-title {
font-size:14px;
font-weight:bold;
}
#content-post {
padding-bottom:10px;
text-align:justify;
}

.sidebar {
padding:5px;
background:#ECECEC;
}
#sidebar-title {
font-size:13px;
font-weight:bold;
}
#sidebar-post {
padding-bottom:10px;
}

.footer {
background:#333333;
padding:5px;
font-size:11px;
color:#FFFFFF;
}

Penjelasannya ..
Kan udah belajar CSS, jadi ga perlu detail :D
. adalah untuk class
# untuk id
:hover untuk menyatakan style saat objek disorot dengan kursor

7

Finisbing
Setelah membuat style nya, maka anda tinggal memasukkan class dan id pada file indx.html sesuai
dengan posisinya seperti ini:
<head>
</head>

<body>
<table width="900" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td colspan="2" class="header">
<a href="#">Header</a>
</td>
</tr>
<tr>
<td valign="top" class="content">
<p id="content-title">Lorem ipsum</p>
<p id="content-post">Lorem <strong>ipsum</strong> no has veniam elaboraret
constituam, ne nibh posidonium vel. Has ad quaeque omittantur, malis abhorreant eam no,
qui cu minim placerat definitionem. Et sonet ludus apeirian mei, ut tibique corpora
<em>posidonium</em> vis, iusto nominavi prodesset in pro. Ad mea omnes aliquando,
idque democritum incorrupte at sed, nostrud feugiat consetetur duo in. Aeque reformidans
ex quo, facilisis appellantur ea mei. Illud scaevola pertinacia mel ad, est ex tractatos
aliquando, cibo eloquentiam ea per.<br />
<br />
Cibo quas assum mel an, mel partiendo adipiscing quaerendum ne, dictas iisque ad usu.
Invenire delicata sit at, ad est mollis civibus corrumpit. Ne has delenit eligendi splendide,
harum numquam epicuri quo ea, sed verear aliquando consequuntur eu. Ad mea mucius
expetenda liberavisse, mei ea assentior dissentiunt, delectus antiopam disputando vel ad.
Ad pro erat quaeque suscipiantur, vis alia pertinacia at, ei duo zzril tibique necessitatibus.
Tritani reprehendunt et vel, et habeo viderer eruditi eos, ornatus pertinax periculis mel
ea.<br />
<br />
<a href="#">[Readmore ..]</a></p>

<p id="content-title">Ei brute deserunt</p>
<p id="content-post">Ei brute deserunt delicata nam, mundi
moderatius ex quo. Id per modo molestie lobortis, perfecto corrumpit omittantur nec an.
Albucius intellegam scripserit et cum, no mei porro tantas menandri. Nam detraxit
disputando efficiantur cu, nisl petentium repudiandae eum ut. Pri reque scripta admodum
te, rebum legere inimicus et has, ne qui amet meis commodo.<br />
<br />
8

Sint illud inani cum an, et primis nostrum adipiscing usu, ut alienum insolens omittantur eos.
Ad dolore torquatos moderatius vim, modo vero definitiones te his. Mea ei solet decore
quaestio, nam an dolores concludaturque. Has illud mazim deserunt in, qui ad mazim
democritum moderatius. Has essent sensibus id, dicant recusabo reprehendunt te pro, meis
facilis maiorum id pri. Et nec mutat erroribus, ad fugit aliquando incorrupte has.<br />
<br />
<a href="#">[Readmore ..]</a></p>
</td>
<td width="275" valign="top" class="sidebar">
<p id="sidebar-title">Search</p>
<form action="#" method="post">
<table width="100%" border="0">
<tr>
<td><input type="text" name="search" /></td>
</tr>
<tr>
<td><input type="submit" value="Search" /></td>
</tr>
</table>
</form>

<p id="sidebar-title">Login</p>
<form action="#" method="post">
<tr>
<td>Username</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Login" /></td>
</tr>
</table>
</form>

<p id="sidebar-title">Links</p>
<tr>
<td>
<ul>
<li><a href="#">Google</a></li>
<li><a href="#">Kaskus</a></li>
<li><a href="#">Indowebster</a></li>
</ul>
</td>
</tr>
</table>
9

</td>
</tr>
<tr>
<td colspan="2" class="footer">
<p>Copyright © 2011 | All right reserved<br />Design by <a href="#">Rizky
Bintang Utama</a></p>
</td>
</tr>
</table>
</body>
</html>

Ket:
Merah adalah class.
Biru adalah id.
Dan Hijau adalah isinya.

Maka tampilan akhirnya akan seperti ini :

Membuat Layout Website Dengan Tabel

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Layout Website Dengan Tabel

Diunggah oleh

Hak Cipta:

Format Tersedia

Membuat

Anda mungkin juga menyukai