Membuat Tata Letak Website Menggunakan Tabel

Pada artikel sebelumnya saya sudah menjelaskan tentang menentukan tata letak website. Pada artikel ini saya akan menjelaskan cara membuat tata letak. Kali ini saya membuat tata letak menggunakan tabel. Tata letak menggunakan tabel merupakan cara yang sederana. Ini adalah cara termudah dalam membuat tata letak sebuah web. Caranya :

1.       Buat tabel pertama dengan baris 3 buah, kolom 1 buah, panjang 800 pixels, cellpad 0, cellspace 0 dan border 0 sesuai keinginan.

2.       Lakukan pengaturan pada tabel properties dengan align Center.

3.       Kemudian lakukan penaturan pada tiap – tiap baris.

Tabel	Properties
Baris 1	Height : 60 px Horz : Left Vert : Middle Bg : #FFFFFF
Baris 2	Height : 19 px Horz : Left Vert : Middle Bg : Sesuai warna navigasi yang anda inginkan
Baris 3	Height : 500 px Horz : center Vert : Middle

Maka tabel yang sudah diatur akan terlihat seperti gambar dibawah.

4.       Setelah itu, pada kolom 3, buat tabel kedua dengan baris 1 buah, kolom 3 buah, panjang 775 pixels, border 0, cellpad 0 dan cellspace 0.

5.       Lakukan pengaturan tambahan seperti langkah kedua.

6.       Lakukan pengaturan pada baris dan kolom – kolom.

Tabel	Properties
Baris	Height : 423 px*
Kolom 1	Width : 500 Horz : Left Vert : Top Bg : #FFFFFF
Kolom 2	Width : 15 px
Kolom 3	Width : 259 px Horz : Right Vert : Top Bg : #FFFFFF

*^{Height dapat diatur pada kolom 1}

Maka tabel yang sudah diatur akan terlihat seperti gambar dibawah.

7.       Untuk membuat tabel footer, kita akan membuat tabel ketiga yang terletak di dalam tabel pertama dibawah tabel kedua. Dengan baris dan kolom 1 buah, panjang 775 pixels, cellpad 0, cellspace 0 dan border 0.

8.       Lakukan pengaturan tambahan seperti langkah kedua.

9.       Kemudian lakukan pengaturan tambahan pada baris atau kolom pada tabel tersebut.

Height : 28 px

Horz : Center

Vert : Middle

Bg : Sesuai warna banner website yang anda inginkan.

Maka tabel yang sudah diatur akan terlihat seperti gambar dibawah.

Dan tata letak sudah selesai. Tinggal dikasih Media sesuai keinginan anda.

Thanks for reading & sharing Dreamweaver Tutorial