Dasar Pembuatan Layout Website Dengan Tabel

PERTEMUAN 4 DASAR PEMBUATAN WEBSITE 2 (LAYOUT TABEL) Andreas Hery Prasetya http://prascakon.co.cc

BEKERJA DENGAN TABEL Tabel selain digunakan untuk menampilkan informasi, tabel juga dapat digunakan untuk membuat layout. Untuk menggunakan tabel sebagai layout perlu pengaturan beberapa properties, properties tabel ditampilkan pada gambar 4.1.

gambar 4.1 Property Tabel

Rows Cols w Align Border Bg color Bg image brdr color

: digunakan untuk megetahui jumlah rows : digunakan untuk mengetahui jumlah kolom : mengetahui lebar tabel : letak tabel : ukuran tabel : warna background tabel : menggunakan image sebagai latar belakang : warna garis baris

K o l o m gambar 4.2 Contoh Tabel

PRAKTEK Membuat tabel sederhana

gambar 4.3 Membuat Tabel Sederhana

Untuk membuat tabel seperti gambar 4.3 adalah sebagai berikut : 1. Buat sebuah dokumen Ctr+n 2. Kemudian pada bagian insert > common > table

gambar 4.4 Buat Tabel

3. Klik pada pagian tabel maka akan muncul pengaturan tabel yang akan dibuat seperti gambar 4.4.

gambar 4.5 Ketetangan Tabel

4. Atur semua tabel sebagai contoh : Rows = 3, Kolom = 3, Tabel width : 200 5. Kemudaian klik OK, maka pada halaman hasilnya seperti gambar 4.3

Membuat layout dengan Tabel Kita akan membuat layout seperti gambar 4.6

gambar 4.6 Layout tabel

Untuk membauat layout seperti diatas adalah sebagai berikut : 1. Buat sebuat dokumen 2. Buat tabel dengan baris = 3 dan kolom =3. Seperti gambar 4.7

Gambar 4.7 Tabel 3 x 3

3. Klik pada pojok kiri tabel sehingga tabel terpilih, Atur pada propersties : Align : center W : 800 pixel Maka hasilnya seperti gambar 4.8

gambar 4.8 Tabel setelah Pengaturan

4. Kemudian pilih baris pertama seperti gambar 4.9

gambar 4.9 Pilih baris pertama

Kemudian pada properties pilih marge cells dan H= 100 pixel, maka hasilnya seperti gambar 4.10 :

Hasil :

gambar 4.10 Hasil baris pertama

5. Pilih baris Kedua kemudian pada properties atura H = 400 pixel maka hasilnya seperti gambar 4.11

Gambar 4.12 Hasil perubahan baris 2

6. Pilih baris ketiga kemudaian atur properties marge sell . kemudian lihat hasil, jika benar maka hasilnya seperti gambar 4.6. Memberi Background warna pada tabel Untuk memberikan background pada tabel adalah sebagai berikut : 1. Buka layout yang telah kita buat sebelumnya, kemudian klik pada baris 1.

2. Atur pada properties bg, terserah pilih warna apa, contoh hasil seperti gambar 4.13

gambar 4.13 Memberikan Background Warna Pada Tabel

Memberi Background gambar pada tabel Untuk memberikan background gambar pada tabel adalah sebagai berikut : 1. Buka layout yang telah kita buat sebelumnya, kemudian klik pada baris 1. 2. Atur pada properties bg image ,kemudaian pilih gambar yang akan kita gunakan, contoh hasil seperti gambar 4.14

gambar 4.14 Hasil setelah menyisipkan gambar

tips : untuk mepercantik tampilkan ubahlah border menjadi 0 dan sellspace 1 maka hasilnya seperto gambar 4.15.

gambar 4.15 Hasil setelah Boder dan cellspan diberi 0

Latihan : Buat halaman sepeti gambar 4.16