Layout 2 kolom

Hal pertama dalam pembuatan sebuah website adalah membuat layout website. Ada 2 cara pembuatan layout website, yakni: dengan struktur table dan dengan struktur div.

Contoh coding layout website dengan struktur table:

<table width="80%" border="1" cellspacing="0" align="center">
<tbody>
<tr>
<td colspan="2" align="center">HEADER GOES HERE</td>
</tr>
<tr>
<td align="center" width="24%" height="245">
LEFT CONTENT GOES HERE</td>
<td align="center" width="76%">
RIGHT CONTENT GOES HERE</td>
</tr>
<tr>
<td colspan="2" align="center">FOOTER GOES HERE</td>
</tr>
</tbody>
</table>

Contoh coding layout website dengan struktur div:

<div id="page">
<div id="header">
<h1>HEADER GOES HERE</h1>
</div>
<div id="leftcontent">
<h3>LEFT CONTENT GOES HERE</h3>
</div>
<div id="rightcontent">
<h2>RIGHT CONTENT GOES HERE</h2>
</div>
<div id="footer">
<h4>FOOTER GOES HERE</h4>
</div>
</div>

Coding layout website dengan struktur table terlihat lebih banyak dibandingkan dengan struktur div, dengan kata lain struktur table lebih kompleks daripada struktur div. Tabel jauh dari clean code dan mengandung semantik. Semantik dari table adalah menampilkan data (data table). Struktur table yang lebih kompleks akan mempengaruhi development time dan maintenance website nantinya . Coding yang lebih banyak tentu akan mempengaruhi kinerja website pada saat loading.

Dengan struktur div kita akan dapat lebih banyak mengatur presentasinya dengan CSS. Dengan memisahkan struktur dan presentasi akan memudahkan coding dan maintenance website.

@charset "utf-8";
/* CSS Document */
body {
	margin: 0;
	padding: 0;
	text-align: center;
}
#page {
	border: 3px solid #c0c0c0;
	margin: 0 auto;
	width: 960px;
	height:1000px
	text-align: left;
}
#header {
	border: 3px solid #c0c0c0;
	height: 192px;
}
#leftcontent {
	border: 3px solid #c0c0c0;
	float: left;
	width: 192px;
	height: 700px;
}
#rightcontent {
	border: 3px solid #c0c0c0;
	float: left;
	width: 756px; /*kurang 12px*/
	height: 700px;
}
#footer {
	border: 3px solid #c0c0c0;
	clear: left;
	height: 100px;
}

Kita dapat mengembangkan website ini dengan mudah dengan modifikasi html maupun CSS-nya.