Website sering menampilkan konten dalam beberapa kolom (like a magazine or newspaper) .
City Gallery
Paris
Tokyo
London
London adalah ibu kota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.
Berdiri di Sungai Thames, London telah menjadi pemukiman utama bagi dua ribu tahun, sejarah akan kembali ke didirikan oleh orang Romawi, yang menamakannya Londinium.
HTML Tata Letak Menggunakan <div> Elemen
The <div> elemen sering digunakan sebagai alat tata letak, karena dapat dengan mudah diposisikan dengan CSS.
Contoh ini menggunakan empat <div> elemen untuk membuat tata letak kolom beberapa:
Contoh
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo
</div>
<div id="section">
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div id="footer">
Copyright © w3ii.com
</div>
</body> Cobalah sendiri " CSS:
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>Situs Tata Letak Menggunakan HTML5
HTML5 menawarkan unsur-unsur semantik baru yang mendefinisikan berbagai bagian dari suatu halaman web:
 |
|
Contoh ini menggunakan <header> , <nav> , <section> , dan <footer> untuk membuat kolom layout beberapa:
Contoh
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo
</nav>
<section>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</section>
<footer>
Copyright © w3ii.com
</footer>
</body> Cobalah sendiri " CSS:
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>HTML Tata Letak Menggunakan Tabel
The <table> elemen tidak dirancang untuk menjadi alat tata letak.
Tujuan dari <table> elemen untuk menampilkan data tabular.
Tata letak dapat dicapai dengan menggunakan <table> elemen, karena unsur-unsur tabel dapat ditata dengan CSS:
Contoh
<body>
<table class="lamp">
<tr>
<th>
<img src="../images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body> Cobalah sendiri " CSS:
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp th {
width:40px;
}
</style>Peringatan: Menciptakan tata letak dengan meja-meja tidak salah, tetapi tidak dianjurkan! Hindari tabel untuk menciptakan tata letak.