Seperti telah disebutkan pada artikel sebelumnya, bahwa dengan layout website tanpa table, akan memudahkan search engine mengetahui content website anda. Sekarang mari kita coba membuat layout website tanpa table yang hasilnya sama dengan layout website sebelumnya yang menggunakan table.
Berikut ini adalah contoh kode html untuk layout website tanpa table:
utama.htm
[html]
[/html]
Dan CSS untuk style dari layout diatas disimpan dengan nama file table.css yang berisi:
[css]
* {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12px;
}
#main {
width: 800px;
margin: 0px 0px 0px 100px;
}
#header {
font-weight: bold;
padding: 10px 10px 10px 10px;
background: #FFCC00;
}
#nav {
text-align: right;
padding: 0px 20px 0px 0px;
background: #6666CC;
}
#middle {
clear: both;
}
#left {
float: left;
width: 180px;
padding: 5px 5px 5px 5px;
}
#content {
float: left;
width: 350px;
padding: 10px 10px 10px 10px;
}
#right {
float: left;
padding: 5px 5px 5px 5px;
}
#footer {
float: left;
padding: 10px 10px 10px 10px;
text-align: center;
}
[/css]
- width: lebar
- margin: jarak batas dengan batas terluar
- font-weight: untuk menetukan ketebalan teks
- padding: jarak isi dengan batas
- text-align: mengatur rata kanan / kiri dari suatu teks
- clear: mengatur floating block yang dapat ditampilkan dibaris yang sama
- float: mengatur posisi floating block
Sumber https://www.rumahweb.com