Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Working with Tables

Tables are created i227 by means of one optional and three required tags. The required <table> tag encloses all the rows and cells within the table. Each row is created with the <tr> (table row) tag, and can contain one or more cells. Each table cell is marked with the <td> tag. The optional <th> (table header) tag can replace a <td> tag to create a header row or column. The following code is an example of a simpl218 table.

<table border="1">
<tr>
<td><p>Row 1, Column 1</p></td>
<td><p>Row 1, Column 2</p></td>
</tr>
<tr>
<td><p>Row 2, Column 1</p></td>
<td><p>Row 2, Column 2</p></td>
</tr>
</table>

This code produces the following table, as displayed in a browser.

After you've compared the code with the rendered table, notice two other things about the code. First, no tags exist to specify table columns. Rather, columns are built out of the <td> cells in each row; if each row has three <td> cells, then the table has three columns. In addition, notice that the only tag that has any output content is the <td> tag. The <table> and <tr> tags do not have any paragraphs or images.

Now that you understand th218 code for tables, you can return to the Jade Valley Web site. In this task, you will create a table to better organize Jade Valley's contact information, so it will be easier to read. This figure shows the final table you'll be creating:

[View full size image]

The new table will be placed where the insertion point is positioned on the document.

[View full size image]

Alternatively, you can insert a table using the Insert > Table command from the main menu.

Most of the settings are self-explanatory, such as the number of rows and columns. A few might need further explanation.

The Table width can be measured in pixels (fixed width) or percentage (flexible width). If you know exactly how wide you want the table, choose fixed width. If you want the table to stretch to accommodate the screen, use a flexible width. You're specifying a flexible width in this case, but it won't really stretch to fill the screen, because this table is nested inside the layout table for this page, and the layout table uses fixed width.

The table's Border thickness is measured in pixels. The setting you're using, 1 pixel, creates a thin border around each of the cells.

Tip

To make the table appear without borders, set the thickness to 0. At the other extreme, if you increase the width of the border to a larger amount, say 6 or 12, the border is thicker and displays a 3-D bevel effect.

Cell padding defines, in pixels, the amount of space between the content of the cell (such as text and images) and the edges of the cell. Designating a cell padding of 3 pixels prevents the contents of the cell from bumping up against the cell borders.

Cell spacing defines, in pixels, the amount of space that separates each cell from neighboring cells. A Cell spacing setting of 0 places the cells right next to one another. Any higher setting creates a gutter between the cells.

The table Header creates the optional (but recommended) <th> tags discussed earlier. The information placed in table headers helps visitors with all types of browsers, including screen readers, identify the content within the table. You can specify four types of table headers: None, Left, Top, or Both.

The table Summary lets you add an accessibility feature for your table. You can also use a Caption to enhance table accessibility. Unlike the Summary, the Caption appears in the document as a separate paragraph-like element before the table. Because you don't want a caption to appear in the document, leave the Caption blank.

Because these two text blocks are table headers, as soon as you move them into the header cells their formatting changes (they will be centered and bold) to make them stand out as header text in the table.

The content is now in the appropriate cells, but at this point still needs some formatting. Notice the extra line space between each line in the address. Each line is considered its own paragraph (<p>), which i227 is considered a block-level element. Most browsers render block-level elements with some white space above and below them.

To resolve this problem, you need to strip the paragraph tags from all the lines after the first one. Then, you'll move the contents into the first line and separate them with a line break (<br />) character, which is not a block-level element.

Shift+Enter/Return creates a line break (<br />) character, moving the phone number to the line just below the email address.

You're finished with the table.

Remember, if you want to preview the file in a browser, just press F12 (Windows) or Option+F12 (Macintosh).