26.09.2015 Views

Bab 9 Menggunakan Tabel

WMP FrontPageXP Bab 09 Menggunakan Tabel

WMP FrontPageXP Bab 09 Menggunakan Tabel

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

<strong>Bab</strong> 9<br />

<strong>Menggunakan</strong> <strong>Tabel</strong>


Webmaster Pro Front Page XP<br />

Daftar Isi <strong>Bab</strong> 9<br />

1 Membuat sebuah tabel .................................................................................284<br />

1.1 Cara pertama membuat tabel......................................................................... 284<br />

1.2 Cara kedua membuat tabel............................................................................. 286<br />

1.3 Cara ketiga membuat tabel............................................................................. 287<br />

2 Mengatur properti .......................................................................................289<br />

2.1 Properti tabel................................................................................................ 289<br />

2.2 Mengatur properti sel................................................................................... 292<br />

3 Mengatur susunan tabel...............................................................................294<br />

3.1 Menyisipkan sel............................................................................................. 294<br />

3.2 Menyisipkan baris dan kolom......................................................................... 294<br />

3.3 Membagi Sel................................................................................................. 295<br />

1.1 Memasang Caption (judul)............................................................................. 296<br />

1.2 Menerapkan AutoFormat............................................................................... 297<br />

2. Mengatur tata letak dengan tabel ...............................................................299<br />

3. <strong>Tabel</strong> di dalam tabel ........................................... Error! Bookmark not defined.<br />

282


<strong>Bab</strong> 9 <strong>Menggunakan</strong> <strong>Tabel</strong><br />

<strong>Tabel</strong> adalah sarana penampung data yang efektif. Dengan tabel, kita bisa<br />

menampung banyak data sekaligus, bahkan menyusunnya secara sistematis dengan<br />

organisasi tertentu. Data dikelompokkan ke dalam dua kategori utama yaitu baris<br />

dan kolom. Baris adalah susunan mendatar dan kolom adalah susunan menurun,<br />

keduanya akan membentuk segi empat dengan unsur persilangan dinamakan sel.<br />

Gambar 9.1 Susunan sebuah tabel<br />

Di dalam satu sel tersimpan sebuah data. Data bisa berupa sebuah teks, sebuah<br />

gambar atau data lainnya termasuk sebuah tabel. Jadi sebuah tabel bisa menjadi data<br />

dari tabel lain yang lebih besar. <strong>Tabel</strong> demikian dinamakan tabel bersarang (nested<br />

table). Lihat Gambar 9.2 yang menunjukkan sebuah tabel sederhana, terdiri dari<br />

sebuah baris dan dua kolom sehingga terbentuk dua sel. Sel pertama mengandung<br />

data gambar dan sel kedua mengandung data tabel.<br />

Gambar 9.2 <strong>Tabel</strong> bersarang<br />

<strong>Tabel</strong> sering dibutuhkan pada dokumen ilmiah, karena fungsinya sebagai penyimpan<br />

data. Untuk membuat tabel dengan FrontPage XP ada tiga macam cara, yaitu dengan<br />

perintah Insert <strong>Tabel</strong> (untuk tabel sederhana), tombol Insert Table dan Draw Table<br />

(untuk tabel kompleks).<br />

Cara kerja tabel HTML sama dengan tabel pada program pengolah kata atau sebuah<br />

program desktop publishing, yaitu sarana. penampung data.<br />

283


Webmaster Pro Front Page XP<br />

Pada halaman web, tabel tidak hanya sarana penampung data, namun juga sebagai<br />

pengatur tata letak. Kalau Anda sempat melongok situs di World Wide Web. Anda<br />

mungkin berpikir "Bagaimana mereka dapat membuatnya seperti itu"? Jawabanya<br />

seringkali menggunakan tabel.<br />

Tanpa tabel, HTML akan membatasi cara menampilkan sesuatu. Tidak ada kolom<br />

dengan teks banyak, tidak ada jenis kolom spread-sheet, tidak ada campuran teks dan<br />

gambar pada halaman dengan konfigurasi tertentu.<br />

Bekerja dengan tabel sangatlah mudah, terutama pada FrontPage XP. <strong>Tabel</strong> bisa<br />

membuat halaman-halaman Anda tampil lebih menarik.<br />

1 Membuat sebuah tabel<br />

Pada FrontPage XP ada tiga metode yang dapat digunakan untuk membuat tabel.<br />

Masing-masing memiliki kelebihan dan kekurangannya sendiri.<br />

Untuk membuat tabel, ketiga metode menggunakan langkah awal yang sama, yaitu<br />

klik lokasi penempatan tabel di dalam dokumen.<br />

Kemudian gunakan salah satu dari tiga cara berikut ini.<br />

1.1 Cara pertama membuat tabel<br />

1. Tampilkan toolbar Tables dengan mengaktifkan View _ Toolbars _ Tables<br />

atau klik kanan bar lalu klik Tables. Gambar 9.3 menampilkan toolbar Tables.<br />

Gambar 9.3 Toolbar Tables<br />

2. Klik tombol Draw Table ( ), kemudian klik pada halaman, titik awal tabel,<br />

lalu geser ke arah kanan bawah. FrontPage XP akan menampilkan bentuk tabel<br />

sebagai garis putus-putus yang merupakan garis bimbingan. Gambar 9.4 kiri.<br />

284


<strong>Bab</strong> 9 <strong>Menggunakan</strong> <strong>Tabel</strong><br />

Gambar 9.4 Garis bimbingan dan hasilnya<br />

3. Setelah mencapai ukuran yang diinginkan lepaskan tombol mouse, maka<br />

terbentuklah bangun persegi panjang. Gambar 9.4 kanan.<br />

4. Untuk menambahkan kolom dan baris, gunakan tombol Draw Table.FrontPage<br />

XP tidak menampilkan bentuk kotak melainkan hanya garis yang akan menjadi<br />

garis batas kolom ataupun baris. Caranya, klik titik awal lalu geser ke arah titik<br />

akhir, untuk membuat garis kolom berarti arah pergeseran adalah vertikal, yaitu<br />

dari atas ke bawah atau sebaliknya. Sedangkan untuk membuat garis baris, arah<br />

pergeserannya horizontal, yaitu dari kiri ke kanan atau sebaliknya. Gambar 9.5<br />

menunjukkan hasil pembuatan garis kolom.<br />

Gambar 9.5 Pembuatan garis kolom<br />

5. Gambar 9.6 menunjukkan hasil akhir, setelah penggambaran garis kolom dan<br />

garis baris sekaligus.<br />

285


Webmaster Pro Front Page XP<br />

Gambar 9.6 Hasil Penggambaran <strong>Tabel</strong><br />

6. Untuk menghapus garis yang telah kita pasangkan, gunakan tombol Eraser ( ).<br />

Dengan cara drag untuk membentuk bidang yang melingkupi garis yang akan<br />

kita hapus. Setelah garis tersebut berubah warna, lepaskan drag, maka garis akan<br />

terhapus.<br />

7. Untuk menyelesaikan penggambaran tabel, klik di area manapun di luar tabel.<br />

Atau tekan ESC, bentuk pointer mouse akan kembali ke bentuk semula.<br />

1.2 Cara kedua membuat tabel<br />

Untuk membuat tabel, selain menggambar langsung pada halaman, kita bisa<br />

menggunakan tombol Insert Table .<br />

1. Klik tombol Insert table pada toolbar Standard, muncul pilihan jumlah kolom<br />

dan baris.<br />

2. Lalu drag pointer mouse untuk memilih sejumlah kolom dan baris yang Anda<br />

inginkan (lihat Gambar 9.7). Drag yang Anda lakukan akan menentukan ukuran<br />

baris dikali kolom, area yang terpilih akan berwarna gelap dan angkanya<br />

ditampilkan pada baris paling bawah<br />

286


<strong>Bab</strong> 9 <strong>Menggunakan</strong> <strong>Tabel</strong><br />

Gambar 9.7 Drag pointer mouse untuk membuat tabel<br />

3. Setelah mendapatkan ukuran yang Anda inginkan, lepaskan drag. Misalnya<br />

Anda memilih 2x3, hasilnya akan seperti Gambar 9.8.<br />

Gambar 9.8 <strong>Tabel</strong> 2X3<br />

1.3 Cara ketiga membuat tabel<br />

Metode ketiga adalah menggunakan kotak dialog, dengan langkah:<br />

1. Aktifkan Table _ Insert Table . Kotak dialog Insert Table akan terbuka<br />

(Gambar 9.9).<br />

Gambar 9.9 Kotak dialog Insert Table<br />

287


Webmaster Pro Front Page XP<br />

2. Isikan jumlah baris (Rows ) dan kolom (Columns ).<br />

3. Lalu tentukan pilihan Anda pada item-item berikut ini:<br />

• Alignment, adalah pilihan penjajaran tabel dengan nilai Default, Left, Right<br />

dan Center.<br />

• Border size, untuk menentukan angka ketebalan garis. Angka 0 berarti tidak<br />

muncul garis. Ukuran 0 inilah yang akan digunakan sebagai sarana tata letak<br />

(lay out).<br />

• Cell padding, untuk menentukan ruang antara isi sel dan garis batas sel.<br />

Ruang ini berada di sekeliling bagian dalam sebuah sel.<br />

• Cell spacing, untuk menentukan ruang antar sel.<br />

• Specify width, untuk menentukan lebar tabel. Lalu tentukan apakah dalam<br />

satuan piksel (pilihan In pixels ) atau sebagai persentase ukuran tabel (In<br />

percent).<br />

Misalnya kita isikan data sebagai berikut:<br />

• Rows = 2<br />

• Columns = 2<br />

• Border size = 2<br />

• Cell padding = 2<br />

• Cell spacing = 2<br />

4. Kemudian klik OK. Hasilnya seperti Gambar 9.10<br />

288


<strong>Bab</strong> 9 <strong>Menggunakan</strong> <strong>Tabel</strong><br />

Gambar 9.10 Hasil pemasangan tabel<br />

Kalau Anda agak bingung tentang pengertian Cell Padding dan Cell Spacing,<br />

perhatikan Gambar 9.11.<br />

Gambar 9.11 Pemakaian Cell Padding dan Cell Spacing<br />

Gambar sebelah kiri adalah tabel dengan Cell Padding = 5 dan Cell Spacing = 10.<br />

Sedangkan gambar sebelah kanan adalah tabel dengan Cell Padding = 10 dan Cell<br />

Spacing = 5.<br />

2 Mengatur properti<br />

Setelah tebal terbentuk, selanjutnya kita bisa mengatur propertinya, termasuk<br />

properti sel, yang merupakan unsur terkecil tabel.<br />

2.1 Properti tabel<br />

Untuk mengatur properti tabel Anda, klik kanan pada tabel lalu aktifkan Table _<br />

Table Properties. Kotak dialog Table Properties akan muncul (Gambar 9.12).<br />

289


Webmaster Pro Front Page XP<br />

Gambar 9.12 Kotak dialog Table Properties<br />

Berikut adalah pengaturan yang dapat Anda lakukan:<br />

• Alignment, di sini Anda dapat menentukan bagaimana tabel tersebut<br />

dijajarkan dalam sebuah halaman. Jika Anda membiarkan pengaturan<br />

Default-nya, maka tabel tersebut akan ditempatkan pada dokumen tersebut<br />

tanpa mengubah posisinya - tabel itu akan ditempatkan di sisi kiri dari<br />

window. Jika Anda menggunakan salah satu pengaturan lainnya, FrontPage<br />

akan menggunakan tag untuk menjajarkan tabel tersebut. Tag<br />

ini relatif baru dan berfungsi mirip dengan tag paragraf , hanya saja tag<br />

tersebut tidak menambahkan sebuah baris kosong sesudahnya. Hal ini<br />

mungkin saja tidak disengaja, karena terdapat atribut penjajaran yang dapat<br />

digunakan di dalam tag ; dan konsekwensinya adalah Anda tidak<br />

dapat mengelilingi tabel itu dengan teks. (Lihat "Membuat Teks<br />

Mengelilingi <strong>Tabel</strong> " pada bagian lain bab ini). Anda dapat menjajarkan<br />

tabel tersebut ke sebelah kanan, di tengah, atau di sebelah kiri dengan<br />

pengaturan-pengaturan ini.<br />

• Float, kotak pilihan untuk menentukan posisi tabel. Tersedia Default, Left<br />

dan Right.<br />

290


<strong>Bab</strong> 9 <strong>Menggunakan</strong> <strong>Tabel</strong><br />

• Specify width, isikan lebar tabel pada kotak isian ini. Lalu tentukan apakah<br />

dalam satuan piksel (pilihan In pixels) atau sebagai persentase ukuran tabel<br />

(In percent).<br />

• Cell Padding Adalah jarak dari isi sel ke garis tepi sel. Lalu tentukan<br />

apakah dalam satuan piksel (pilihan In pixels ) atau sebagai persentase<br />

ukuran tabel (In percent).<br />

• Cell Spacing Ini adalah jarak antara sel dengan sel di sebelahnya di dalam<br />

tabel. Lalu tentukan apakah dalam satuan piksel (pilihan In pixels ) atau<br />

sebagai persentase ukuran tabel (In percent).<br />

Jika Anda menggunakan border, aturlah nilai Cell Spacing menjadi 0 agar garis tabel<br />

antar sel-sel menjadi solid.<br />

Anda dapat menggunakan cara yang sama untuk membuat kotak di sekeliling teks;<br />

buat saja sebuah tabel dengan sel tunggal, lalu terapkan nilai cell-spacing sehingga<br />

Anda bisa menghasilkan border eksternal tanpa border internal.<br />

• Borders - kotak pilihan Size. Biarkan pilihan ini pada nilai 0 maka tabel<br />

tidak akan menampilkan border.<br />

• Borders – kotak cek Show both cells and table borders. Untuk<br />

menampilkan atau menghilangkan garis batas sel dan tabel sekaligus.<br />

• Background Anda dapat menggunakan warna latar (pilihan Color) atau<br />

gambar latar belakang (Use background picture ) dengan kotak dialog<br />

Select background picture.<br />

Gambar 9.13 Kotak dialog Select background picture<br />

291


Webmaster Pro Front Page XP<br />

Setelah melakukan pengaturan pada kotak dialog Table Properties, Anda bisa<br />

mencoba pengaturan tersebut tanpa harus menutup kotak dialog, yaitu dengan<br />

menekan tombol Apply. Kalau hasilnya masih kurang memuaskan Anda bisa<br />

meneruskan pengaturan. Sebaliknya jika Anda telah puas dan ingin menerapkannya,<br />

klik OK. Kotak dialog Table Properties akan ditutup.<br />

2.2 Mengatur properti sel<br />

Anda dapat memodifikasi kolom-kolom tertentu pada sel, caranya dengan<br />

menggunakan kotak dialog Cell Properties. Untuk membuka kotak dialog tersebut<br />

ada dua cara, yaitu:<br />

• Klik kanan di dalam tabel tersebut dan pilih Cell Properties.<br />

• atau klik tabel itu dan pilih perintah Table fi Properties.<br />

Kotak dialog Cell Properties akan muncul (Lihat Gambar 9.14).<br />

Gambar 9.14 Kotak dialog Cell Properties<br />

Berikut ini keterangan ietm-item di dalam kotak dialog:<br />

• Kotak pilihan Horizontal Alignment. Secara default, setiap isi sel akan diratakiri-kan<br />

(Align left). Anda dapat mengubah perataan, menjadi ratatengah<br />

(center) atau ratakanan (Align right). Setelah Anda mengaktifkan kotak cek<br />

Specify width, sebuah kotak isian juga akan aktif, tuliskan lebar tabel yang<br />

Anda inginkan pada kotak isian tersebut. Lalu tentukan satuan yang<br />

digunakan, apakah dalam piksel (In pixels) atau sebagai persentase ukuran<br />

tabel (In percent).<br />

292


<strong>Bab</strong> 9 <strong>Menggunakan</strong> <strong>Tabel</strong><br />

• Kotak pilihan Vertical Alignment. Secara default, isi sel tersebut akan<br />

berada di tengah secara vertikal; Anda dapat mengubahnya ke atas atau ke<br />

bawah. Kalau Anda klik kotak cek Specify width, maka kotak isiannya akan<br />

aktif dan Anda bisa mengisikan lebar tabel pada kotak isian ini. Lalu<br />

tentukan satuan yang digunakan, apakah dalam piksel (In pixels) atau<br />

sebagai persentase ukuran tabel (In percent).<br />

• Kotak pilihan Rows spanned. Untuk memodifikasi rentang baris atau<br />

menggabungkan satu baris ke beberapa baris berikutnya. Kalau Anda klik<br />

kotak cek Specify width, maka kotak isiannya akan aktif dan Anda bisa<br />

mengisikan lebar tabel pada kotak isian ini. Lalu tentukan satuan yang<br />

digunakan, apakah dalam piksel (In pixels) atau sebagai persentase ukuran<br />

tabel (In percent).<br />

• Kotak pilihan Columns spanned. Pada kotak pilihan ini Anda dapat<br />

memodifikasi rentang kolom atau menggabungkan satu kolom ke beberapa<br />

kolom berikutnya. Kalau Anda klik kotak cek Specify width, maka kotak<br />

isiannya akan aktif dan Anda bisa mengisikan lebar tabel pada kotak isian<br />

ini. Lalu tentukan satuan yang digunakan, apakah dalam piksel (In pixels )<br />

atau sebagai persentase ukuran tabel (In percent).<br />

• Kotak cek Header Cell. Jika Anda memilih kotak cek ini, sel tersebut akan<br />

menjadi sebuah header yaitu teks di dalam sel akan ditebalkan. (Sel-sel ini<br />

dihasilkan oleh tag HTML khusus, ).<br />

• Kotak cek No Wrap. Teks pada sel biasanya akan dipenggal jika<br />

ruangannya tidak cukup. Aktifkan kotak cek ini agar tidak dipenggal.<br />

• Kelompok Background. Anda dapat menggunakan warna latar untuk table<br />

dengan menentukan warnanya pada kotak pilihan Color. Kalau Anda ingin<br />

menggunakan gambar sebagai latar belakang, klik kotak cek Use<br />

background picture lalu tuliskan nama file gambar dan teampat<br />

menyimpannya pada kotak isian yang tersedia. Jika Anda tidak yakin, Anda<br />

bisa mencari gambar dengan kotak dialog background picture , yang<br />

muncul ketika Anda klik tombol Browse.<br />

Setelah melakukan pengaturan pada kotak dialog Cell Properties, Anda bisa<br />

mencoba pengaturan tersebut tanpa harus menutup kotak dialog, yaitu dengan<br />

menekan tombol Apply. Kalau hasilnya masih kurang memuaskan, Anda bisa<br />

meneruskan pengaturan. Sebaliknya jika Anda telah puas dan ingin menerapkannya<br />

ke sel, klik tombol OK. Kotak dialog Cell Properties akan ditutup.<br />

293


Webmaster Pro Front Page XP<br />

Anda bisa melakukan pengaturan beberapa sel sekaligus, caranya dengan memilih<br />

beberapa sel tersebut sekaligus lalu membuka kotak dialog Cell Properties ini dan<br />

melakukan pengaturan.<br />

Anda dapat menggabungkan beberapa sel, dengan cara:<br />

1. Pilihlah beberapa sel atau pilihlah sebuah baris (Table è Select Row) atau<br />

pilihlah seluruh kolom (Table è Select Column).<br />

2. Kemudian aktifkan Table è Merge Cells.<br />

Hati-hati pada saat menggunakan pengaturan Cell Span dan Minimum Width.<br />

Kedua pengaturan tersebut seringkali memberikan hasil yang tidak dapat<br />

diperkirakan, jadi Anda harus mencoba-coba dulu hasilnya dengan Apply. Dan<br />

Anda harus lebih berhati-hati untuk tidak memasukkan nilai rentang melebihi jumlah<br />

sel pada baris atau kolom.<br />

Setelah melakukan pengaturan dan menutup kotak dialog Cell Properties, ternyata<br />

pengaturan yang Anda lakukan tidak sesuai dan Anda ingin kembali ke kondisi<br />

semula, bagaimana caranya? Aktifkan Edit è Undo.<br />

3 Mengatur susunan tabel<br />

Pembahasan berikutnya adalah tentang pengaturan susunan sel.<br />

3.1 Menyisipkan sel<br />

Cara meyisipkan sel langsung pada tabel.<br />

1. Tempatkan kursor ke dalam sebuah sel<br />

2. Aktifkan Table _ Insert Cell. Sebuah sel akan disisipkan di sebelah kanan sel<br />

aktif. Dan akan mendorong sel-sel lainnya ke sebelah kanan.<br />

3.2 Menyisipkan baris dan kolom<br />

Berikut ini cara penyisipan baris dan kolom dengan kotak dialog:<br />

1. Tempatkan kursor di lokasi penambahan baris atau kolom baru.<br />

2. Lalu aktifkan perintah Table è Insert Rows or Columns . Kotak dialog seperti<br />

Gambar 9.15 akan terbuka.<br />

294


<strong>Bab</strong> 9 <strong>Menggunakan</strong> <strong>Tabel</strong><br />

Gambar 9.15 Menyisipkan Sebuah Baris atau Kolom<br />

3. Mulailah dengan memilih apakah Anda akan menyisipkan baris (pilihan Rows)<br />

atau kolom (pilihan Colums ).<br />

4. Kemudian tentukan jumlah yang Anda inginkan pada Number of rows .<br />

5. Kemudian tentukan apakah Anda ingin menempatkan kolom baru di sebelah kiri<br />

kolom terpilih (aktifkan pilihan Left of Selection) atau di sebelah kanan kolom<br />

terpilih (Right of Selection).<br />

6. Untuk baris baru tersedia du pilihan penempatan juga , yaitu di atas baris terpilih<br />

(Above Selection) atau di bawah baris terpilih (Below Selection).<br />

7. Klik OK. Kolom atau baris baru akan disisipkan di lokasi yang Anda inginkan.<br />

3.3 Membagi Sel<br />

Cara lain untuk menambah sel yaitu dengan membagi sel-sel yang sudah ada.<br />

1. Klik sel yang ingin Anda bagi.<br />

2. Aktifkan perintah <strong>Tabel</strong> _ Split Cells.<br />

3. Kemudian pada kotak dia log yang muncul (lihat Gambar 9.16), tentukan apakah<br />

Anda ingin membagi sel-sel ke dalam kolom (Split into columns ) atau baris<br />

(Split into rows ).<br />

295


Webmaster Pro Front Page XP<br />

Gambar 9.16 Anda dapat membagi sel-sel horisontal atau vertikal.<br />

4. Lalu tentukan jumlah yang Anda inginkan pada kotak Number of columns .<br />

5. Klik OK.<br />

3.4 Memasang Caption (judul)<br />

Anda dapat memasang caption, yaitu teks sederhana di bagian atas atau bawah tabel.<br />

Caption bukanlah teks biasa yang di tempatkan di atas atau di bawah suatu tabel,<br />

melainkan di buat khusus menggunakan tag HTML, .<br />

Cara teks tersebut ditampilkan bergantung pada browser; pada Internet Explorer teks<br />

dicetak tebal dan ditampilkan dengan warna latar yang sama dengan tabelnya.<br />

Sedangkan pada Netscape Navigator teks itu tidak dicetak tebal dan tidak<br />

ditampilkan dengan warna latar tabel, ditempatkan lebih atas.<br />

Anda dapat menggunakan tools format teks seperti color, bold, italic, size dan lainlain<br />

untuk memodifikasi caption.<br />

Cara membuat Caption adalah:<br />

1. Klik saja pada sembarang tempat pada tabel.<br />

2. Lalu aktifkan Table è Caption. FrontPage akan membuat sebuah ruang kecil<br />

pada bagian atas tabel untuk caption tersebut.<br />

3. Ketikkan caption yang diinginkan.<br />

4. Lakukan pemformatan yang diperlukan.<br />

296


<strong>Bab</strong> 9 <strong>Menggunakan</strong> <strong>Tabel</strong><br />

.<br />

Gambar 9.17 Captin tabel<br />

Untuk memindahkan caption, klik caption itu dan pilih Table è Caption. Sebuah<br />

kotak dialog muncul, berguna untuk menentukan pilihan Top of Table atau Bottom<br />

of Table.<br />

Untuk menghilangkan caption:<br />

1. Hapuslah semua teksnya<br />

2. Lalu dengan kursor pada ruang caption, tekan Backspace.<br />

Untuk menghapus isi sebuah sel, klik pada sel itu lalu tekan Backspace. Sedangkan<br />

untuk menghapus seluruh tabel, pilih perintah Table _ Select Table lalu tekan<br />

Delete.<br />

4 Menerapkan AutoFormat<br />

Meskipun FrontPage XP telah menyediakan sarana untuk mem-format tabel, bisa<br />

jadi Anda tidak punya waktu untuk memperindah tampilan tabel tersebut. Padahal,<br />

Anda tidak ingin menggunakan tabel yang polos seperti itu.<br />

FrontPage XP menyediakan solusi untuk menghadapi hal ini. FrontPage XP<br />

menyediakan tabel dengan berbagai variasi yang disebut Autoformat.<br />

Dengan Autoformat Anda bisa mem-format tabel secara cepat. Langkah yang<br />

diperlukan adalah:<br />

1. Tempatkan kursor pada tabel.<br />

2. Dari menu Table, klik Table AutoFormat. Tampil kotak dialog Table<br />

AutoFormat.<br />

297


Webmaster Pro Front Page XP<br />

Gambar 9.18 Kotak dialog Table AutoFormat<br />

3. Pada daftar Formats to Apply maupun Apply special formats, tentukan item<br />

untuk penerapan AutoFormat. Item tersebut antara lain Border, Font, AutoFit,<br />

Shading, Color, Heading rows, First Column, Last row dan Last Column.<br />

4. Pada daftar Formats, pilihlah salah satu format yang paling Anda sukai, pilihan<br />

Anda akan ditampilkan pada kotak Preview di sampingnya.<br />

5. Klik OK.<br />

6. Setelah AutoFormat Anda terapkan pada tabel, Anda masih bisa mengedit<br />

format sesuai keperluan Anda.<br />

Setelah memasang dan mengatur suatu tabel, Anda bisa mengisi sel dengan teks atau<br />

gambar. Teks bisa menggunakan daftar atau bullet atau perlengkapan teks lainnya.<br />

Gambar 9.19 menunjukkan contoh pemakaian tabel yang berisi berbagai objek.<br />

298


<strong>Bab</strong> 9 <strong>Menggunakan</strong> <strong>Tabel</strong><br />

Gambar 9.19 <strong>Tabel</strong> dengan isi yang beragam dalam jenis dan format<br />

5 Mengatur tata letak dengan tabel<br />

Membuat halaman web tidak sepenuhnya sama dengan membuat dokumen pengolah<br />

kata. Ada beberapa keterbatasan, terutama dalam hal pengaturan tata letak. Anda<br />

tidak akan bisa membuat teks dengan susunan kolom pada halaman web, tidak<br />

seperti pada MS Word misalnya. Hal seperti ini disebabkan oleh minimnya tag<br />

HTML untuk keperluan seperti itu.<br />

Sebagai penggantinya, Anda bisa menggunakan tabel untuk membagi halaman<br />

menjadi beberapa area. Dengan tabel Anda dapat menghasilkan beragam jenis tata<br />

letak, mencampur gambar dan teks dalam berbagai komposisi.<br />

299


Webmaster Pro Front Page XP<br />

Dan untuk menghilangkan kesan kaku, Anda bisa menyembunyikan garis-garis<br />

tabel, dengan cara membuat nilai border tabel menjadi (0) nol. Selanjutya Anda<br />

tinggal menempatkan objek-objek lain di dalam sel yang kini berupa suatu area.<br />

Aturlah sel itu agar Anda dapat menempatkan semua objek, seperti teks, gambar atau<br />

objek lainya pada posisi yang Anda inginkan. Ubahlah perataannya, sesuaikan<br />

ukuran sel, kalau perlu pecahlah sel menjadi beberapa bagian, satukan beberapa sel<br />

menjadi sebuah sel, hapuslah sel yang tidak diperlukan, atau tambahkan sel baru, dan<br />

sebagainya. Anda dapat menempatkan objek- objek tersebut di dalam sel tanpa<br />

membuat pemakai menyadari bahwa dia sedang melihat sebuah tabel.<br />

Perhatikan contoh berikut ini (Gambar 9.20), sebuah halaman yang sedang dibuka<br />

oleh Internet Explorer. Susunan tersebut dihasilkan oleh sebuah tabel dengan nilai<br />

border = 0 sehingga tidak tampak garis tabelnya.<br />

Gambar 9.20 Tata letak dengan tabel tidak tampak<br />

Jika garis tabel dimunculkan, maka hasilnya akan seperti Gambar 9.20.<br />

300


<strong>Bab</strong> 9 <strong>Menggunakan</strong> <strong>Tabel</strong><br />

Gambar 9.21 Tata letak dengan tabel tampak<br />

Untuk memunculkan garis tabel, tentu saja kita harus mengedit halaman tersebut.<br />

Dengan FrontPage XP tentunya. Setelah mengedit simpanlah dan kembali ke<br />

Internet Explorer. Tekan tombol Refresh, ops muncullah Gambar 9.20 di atas.<br />

Anda dapat membuat tabel di dalam tabel lain, dan menyediakan fleksibilitas yang<br />

lebih tinggi dalam pengaturan tataletak halaman. Contohnya perhatikan Gambar<br />

9.20, garis terluar yang mengelilingi tabel adalah juga sebuah tabel.<br />

Untuk membuat tabel di dalam sebuah tabel, caranya klik saja area pada sebuah sel,<br />

kemudian buatlah tabel baru dengan tombol Insert Table atau menu Table _<br />

Insert Table . Gambar 9.21 juga menunjukkan contoh tabel di dalam tabel.<br />

Selanjutnya Anda bisa memformat tabel tersebut seperti biasa. Perhatikan, bahwa<br />

pada saat Anda menentukan lebar tabel dengan ukuran persentase, pengaturan ini<br />

juga berlaku pada sel yang ada pada tabel itu. Artinya ukuran sel akan mengikuti<br />

ukuran tabel.<br />

301


Webmaster Pro Front Page XP<br />

Gambar 9.22 <strong>Tabel</strong> di dalam tabel<br />

302

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!