Tata Letak HTML

Laman web seringkali dipaparkan dalam bentuk beberapa kolum (seperti majalah dan surat khabar).

Penggunaan tata letak HTML <div> element

Keterangan:<div> elemen biasa digunakan sebagai alat tata letak, kerana ia dapat ditarik dengan mudah melalui CSS untuk lokasinya.

Contoh ini menggunakan empat elemen <div> untuk membuat tata letak kolom ganda:

Contoh

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London adalah ibu kota Inggris. Ini adalah kota yang paling penduduk di United Kingdom,
dengan kawasan metropolitan yang melampau 13 juta penduduk.
</p>
<p>
Berdiri di Sungai Thames, London telah menjadi pemukiman utama selama dua ribu tahun,
Sejarahnya kembali ke penubuhan oleh Romawi, yang menamakannya Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Coba 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>

Tata letak situs menggunakan HTML5

Elemen semantik baru yang disediakan oleh HTML5 mendefinisikan bagian berbeda di laman web:

Elemen Semantik HTML5

header Tentukan judul bagian dokumen
nav Tentukan wadah tautan navigasi
section Tentukan bagian di dalam dokumen
article Tentukan artikel yang terpisah dan terkandung
aside Tentukan konten di luar konten (seperti sidebar)
footer Tentukan kaki laman atau bagian di dalam dokumen
details Tentukan detil tambahan
summary Tentukan judul elemen details

Contoh ini menggunakan <header>, <nav>, <section>, serta <footer> untuk membuat tata letak kolom ganda:

Contoh

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London adalah ibu kota Inggris. Ini adalah kota yang paling penduduk di United Kingdom,
dengan kawasan metropolitan yang melampau 13 juta penduduk.
</p>
<p>
Berdiri di Sungai Thames, London telah menjadi pemukiman utama selama dua ribu tahun,
Sejarahnya kembali ke penubuhan oleh Romawi, yang menamakannya Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Coba Sendiri

CSS

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; 
}

Layout HTML menggunakan tabel

Keterangan:Elemen <table> tidak dirancang untuk menjadi alat layout.

Elemen <table> digunakan untuk menampilkan data berformat tabel.

Penggunaan elemen <table> dapat mencapai efek layout, karena dapat menata gaya elemen tabel melalui CSS:

Contoh

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    Element tabel tidak dirancang untuk menjadi alat layout.
  </td>
</tr>
</table>
</body>

Coba Sendiri

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>