Membuat desain layout website dengan tabel

hallo teman-teman kali ini saya ingin berbagi sedikit tutorial website html. Pada dasarnya website memiliki layout yang berbeda-beda, namun ada beberapa komponen umum yang biasanya terdapat dalam desain layout website. Layout dibagi menjadi beberapa bagian yakni :

1. header
2. menu
3. content
4. sidebar
5. footer.

Ilustrasi dapat dilihat dari gambar di bawah ini :

Kalau begitu langsung saja kita mulai codingnya hehe..
Pertama-tama download file index.html disini

Kemudian buat file CSS dengan nama style.css di folder yang sama. CSS berguna untuk mempercantik tampilan website.


.badan_tabel{
margin: auto;
border: 1px solid #999999;
}
.header{
background-color: #6699FF;
padding: 5px;
height:100px;
}
.list_menu{
background-color: #FFCC99;
margin: 0px;
width: auto;
padding: 0px;
}
.list_menu li{
float:left;
display:block;
list-style-type: none;
border-right-width:1px;
border-right-style:solid;
border-right-color:#999999;
padding:10px;
}
.list_menu li:hover{
background-color: #FFFFFF;
}
.list_menu li a{
text-decoration: none;
}
.list_menu li a:hover{
font-weight:bold;
color:red;
}
table{
border-collapse:collapse;
}

Save, kemudian jalankan dibrowser. Maka hasilnya akan tampak seperti ini :

teman-teman bisa kerkreasi sesuai dengan keinginan kalian, dengan mengubah design yang saya buat diatas. Selamat bercoding ria :)