MEMBUAT LAYOUT DENGAN TABLE UNTUK HALAMAN WEB

1
628

Assalamualaikum.. hai teman-teman..

Pada kesempatan kali ini kita akan membahas bagaimana cara membuat layout dengan table pada sebuah halaman web, berikut merupakan scriptnya :

  1. Pertama untuk bagian headernya, saya menampilkan table untuk logo dan banner dan dibawahnya terdapat table menu. berikut merupakan scriptnya :
<html>
<head>
<title>Layout table untuk halaman website</title>
</head>
<body bgcolor="#000000">
<table cellpadding="5" cellspacing="0" width="1250px" align="center">
<tr>
       <td width="200px" height="220px"  bgcolor="#f32f82"><center>LOGO</center></td>
       <td colspan="2" width="760px" height="220px" bgcolor="#fcd2e4"><center>BANNER</center></td>
</tr>
<tr bgcolor="#d0f266">
       <td colspan="3" height="40px"><center>MENU</center></td>
</tr>
</table>
</body>
</html>

Oh iya, code html disimpan dengan layout.html ya, agar bisa dijalankan di web browser.2. Yang kedua adalah saya menampilkan bagian table untuk left content, main content dan right content, berikut merupakan lanjutan script dari table menu :

<tr>
       <td width="200px" height="300px" bgcolor="#b4defc"><center>LEFT CONTENT</center></td>
       <td height="300px" bgcolor="#FFFFFF"><center>MAIN CONTENT</center></td>
       <td width="200px" height="300px" bgcolor="#b4defc"><center>RIGHT CONTENT</center></td>
</tr>

Jangan lupa code htmlnya untuk di save lagi ya, supaya tampilannya nanti berbeda dari sebelumnya.

3. Yang ketiga ini saya menampilkan bagian table untuk bottom menu dan footer, berikut merupakan lanjutan script dari table right content :

<tr bgcolor="#d0f266">
       <td colspan="3" height="50px"><center>BOTTOM MENU</center></td>
</tr> 
<tr bgcolor="#94db0a">
       <td colspan="3" height="35px"><center>FOOTER</center></td>   
</tr>

Jangan lupa save code htmlnya ya 🙂

Setelah menambahkan script terakhir tadi, hasil tampilannya menjadi seperti ini :

Ini adalah tampilan layout sederhana menggunakan table pada halaman web, masih banyak lagi tips-tips yang lebih menarik untuk mempercantik tampilan halaman pada web, terimakasih atas kunjungannya 🙂
Selamat mencoba ya..
Assalamualaikum..

 

 

1 KOMENTAR

Tinggalkan Balasan

This site uses Akismet to reduce spam. Learn how your comment data is processed.