IDA NOOR RAHMA / A

(1)

IDA NOOR RAHMA

09018017 / A

Aligning Web Page Content Visually with Visible Table Borders

When you use a table to align graphics and text, you create an organized layout to the page, help the visitor’s eyes move through the document, and increase the attractiveness of the page layout.

Suppose, for example, that you want to create a Web page that contains photographs of your employees along with their names, positions in the company, and mailing addresses. To organize the information, create a single column table with four rows, such as that shown next:

Row 1 contains the employee’s name; row 2 holds the employee’s photograph; row three holds their position in the company; and row 4 holds their mailing address. Not only does using a table help to organize the information on the Web page, but using the border attribute helps to further define the outer border of the table and separates the table from other graphics and text on the Web page.

The following code creates the table shown previously:

<td width="175" height = "30" align="center"> James Markin

</td></tr>

</td></tr> <tr>

<td width="175" height = "30" align="center"> Senior Designer

(2)

</td></tr> <tr>

<td width="175" height="93" align="center" valign="middle"> Riven Productions

433 Spaeder Street Hollywood, CA 23435 </td></tr>

</table>

When you turn off the border attribute (border = “0”), the table cells merge, creating a solid look to the separate cells in the table. Using the border attribute visually divides the information into definable blocks of information that are easy to read.

Controlling Gutter Size and Margin Width of Text on a Web Page

When you create documents using programs such as Microsoft Word, the word processor lets you control the outside margins along the sides of each page and the gutter space between columns of text. Unfortunately, HTML does not give you this same type of control over the placement of text on a Web page. However, by placing text content in a table, you can simulate the outside margin and gutter control available in a word processor.

Say, for example, that you want to create a Web page that when displayed by a Web browser resembles a two-column word processor document with appropriate gutter spacing between the columns of text, as shown in Figure 2-23.

In the table shown in Figure 2-23, the first and last columns of the table control the space allocated to the left and right margins. Meanwhile, the third column controls the amount of gutter space the browser will leave between the two columns of text. Finally, the second and fourth columns hold the document text.

The following code will generate the table displayed in Figure 2-23 (notice that the table actually contains five cells):

<table border="0" cellpadding="0" cellspacing="2" width="600"> <! -- Column controlling left margin -- >

<center> Heading Inserted Here </center>

Body Text Inserted Here.

Body Text Inserted Here.</td>

<! -- Column controlling gutter space -- > <td width="15" >

<center>Heading Inserted Here </center>

 Body Text Inserted Here.

(3)

<! -- Column controlling right margin -- > <td width="20">

Placing text into a table lets you organize and control how the text displays inside a Web browser window, and well-organized text is easier to read and understand. In addition, not all browsers display empty table cells correctly. Therefore, to ensure that the table displays as intended, insert a transparent GIF into the margin and gutter table cells and set the width attribute within the <img> tag to the width of the gutter or margin you want.

(4)

Perataan Konten Halaman Web dengan Border (Tabel)

Bila Anda menggunakan sebuah tabel untuk menyelaraskan grafis dan teks, Anda membuat tata letak yang sudah diorganisir untuk suatu halaman, membantu mengalihkan mata pengunjung melalui dokumen, dan meningkatkan daya tarik tata letak halaman web.

Anggaplah, misalnya, bahwa Anda ingin membuat halaman Web yang berisi foto-foto karyawan Anda bersama dengan nama-nama mereka, posisi dalam perusahaan, dan alamat list. Untuk mengatur informasi, membuat kolom tabel tunggal dengan empat baris, seperti yang ditunjukkan berikut:

Misalnya, baris 1 berisi nama karyawan, baris 2 berisi foto karyawan, baris tiga berisi jabatan mereka di perusahaan, dan baris 4 berisi alamat. Tidak hanya menggunakan tabel membantu mengatur informasi pada halaman Web, namun menggunakan atribut perbatasan membantu untuk lebih menentukan batas luar tabel dan memisahkan tabel dari grafis lainnya dan teks pada halaman Web.

Kode berikut membuat tabel yang ditunjukkan sebelumnya:

<td width="175" height = "30" align="center"> James Markin

</td></tr>

</td></tr> <tr>

<td width="175" height = "30" align="center"> Senior Designer

</td></tr> <tr>

<td width="175" height="93" align="center" valign="middle"> Riven Productions

(5)

433 Spaeder Street Hollywood, CA 23435 </td></tr>

</table>

Ketika Anda mematikan atribut perbatasan (border = "0"), sel-sel tabel menggabungkan, menciptakan tampilan yang solid ke sel terpisah di tabel. Menggunakan atribut perbatasan visual membagi informasi ke dalam blok didefinisikan informasi yang mudah dibaca.

Mengontrol Ukuran Gutter dan Lebar Margin Teks pada Halaman Web

Bila Anda membuat dokumen menggunakan program seperti Microsoft Word, pengolah kata memungkinkan Anda mengendalikan margin luar sepanjang sisi setiap halaman dan ruang antara kolom teks. Sayangnya, HTML tidak memberikan jenis yang sama kontrol atas penempatan teks pada halaman Web. Namun, dengan menempatkan konten teks dalam sebuah tabel, Anda dapat mensimulasikan margin luar dan kontrol ruang tersedia dalam pengolah kata.

Katakanlah, misalnya, bahwa Anda ingin membuat halaman Web yang saat ditampilkan oleh browser Web menyerupai dokumen pengolah kata dua kolom dengan ruang kosong sesuai jarak antara kolom teks, seperti yang ditunjukkan pada Gambar 2-23.

Dalam tabel ditunjukkan pada Gambar 2-23, kolom pertama dan terakhir dari kontrol ruang antar tabel dialokasikan untuk margin kiri dan kanan. Sementara itu, kolom ketiga mengontrol jumlah ruang kosong browser yang akan meninggalkan antara dua kolom teks. Akhirnya, kolom kedua dan keempat terus teks dokumen.

Kode berikut akan menghasilkan tabel yang ditampilkan pada Gambar 2-23 (perhatikan bahwa tabel benar-benar berisi lima sel):

<table border="0" cellpadding="0" cellspacing="2" width="600"> <! -- Column controlling left margin -- >

<center> Heading Inserted Here </center>

Body Text Inserted Here.

Body Text Inserted Here.</td>

<! -- Column controlling gutter space -- > <td width="15" >

<center>Heading Inserted Here </center>

 Body Text Inserted Here.

 Body Text Inserted Here.</td>

<! -- Column controlling right margin -- > <td width="20">

(6)

</table>

Menempatkan teks ke dalam tabel memungkinkan Anda mengatur dan mengendalikan bagaimana menampilkan teks dalam jendela browser Web, dan teks yang terorganisasi dengan baik lebih mudah dibaca dan dimengerti. Selain itu, tidak semua browser menampilkan sel tabel kosong dengan benar. Oleh karena itu, untuk memastikan bahwa tabel menampilkan sebagaimana dimaksud, masukkan GIF transparan ke dalam sel tabel margin dan mengatur atribut lebar dalam tag <img> dengan lebar margin yang anda inginkan.