Ten Ton Dreamweaver [Electronic resources]

Geoff Blake

نسخه متنی -صفحه : 109/ 44

Getting Started with Tables

Tables were originally used simply to present data, much as they are in a word processor. Tables are still used quite often on web pages for organizing informationstatistics or price lists, for example. But in web design, tables pull double duty.

In web design, tables pull double duty: they are used both to hold data and to control page layout.

Rather than using tables just to hold data, early web designers realized that they could use tablesor more specifically, the grid of rows and columns that make up a table's structureto hold graphics, paragraphs, headings, and so on. Though more sophisticated page layout methodssuch as CSS layersare now available for controlling web pages, tables remain a mainstay of web designplus they're easy for budding web designers to use.

[View full size image]

Here's a table in its more traditional role: displaying data.

Noteworthy

Not too sure about table structure? No worries. Tables are made up of rows, columns, and cells. Rows run horizontally, columns run vertically, and cells occur wherever rows and columns intersect.

But whether you're using tables to present data or to control your page layout, a lot of the table commands and features in Dreamweaver are the same. If you know the commands for tables that hold data, you'll also have 'em down for tables that control layout.

You'll start here by inserting a basic table to hold data on your web page. This will get your feet wet for what comes next: using tables to structure your page layout.

Inserting a Basic Table

So you're ready to start setting up a basic table, right? Before you begin, you should have a fairly good idea of the number of rows and columns you think you'll need. If you're going to be building a complex table, you may want to figure out your table on paper first, before you begin building it in Dreamweaver. That way, you'll know how many rows and columns to create. If you're building a table that will be used to control page layout, think about how many main areas you want on your page. For example, you may want a header across the top, a nav bar on the left, and a main area taking up the rest of the screenwhich means you'll need a table that contains two rows and two columns.

Whether you're using a table to help lay out your page or simply to hold text-based data, the process for inserting a table on your page is the same. Getting your table to look and do what you want is another matter, but we'll discuss that in a bit.

If you're building a table that will be used to control page layout, think about how many main areas you want on your page.

Here's how to insert a table on your page:

Place your cursor where you want to insert the table.

Choose Insert > Table.

In the Table dialog box that appears, set the number of rows and columns that you want in your table.

If you find that you'll need more rows and columns in your table after you've inserted it, you can always add more. You'll see how to do this shortly.

Setting Table Properties" later in this chapter.

If you don't want your table to have a border, set Border Thickness to zero rather than leaving it blank. If you leave this field blank, some web browsers interpret this setting as a border thickness of 1.

Noteworthy

If you leave the Cell Padding or Cell Spacing setting blank, most web browsers will use a cell padding of 1 pixel and a cell spacing of 2 pixels. To ensure that no cell padding or cell spacing is used, set each option to zero.

Set values for your table's cell padding and cell spacing.

Cell padding is the distance from the edge of a cell to the cell's contents. This is sometimes called the cell margin in word processors and desktop publishing programs. Cell spacing is the distance between the cells within a table. When you use a table for page layout, you might want to consider these settings to help space out your page's content.

If you want to use column headers in your table, select an option in the Header area of the Table dialog box.

Choose None, Left, Top, or Both to specify where the header will appear in your table. Of course, if you're using a table for page layout, column headers won't be needed.

If you want to add accessibility features, set the Caption, Align Caption, and Summary options.

Caption displays a line of text, which can serve as a table title, outside your table. Position your caption with the Align Caption menu. In the Summary field, you can provide a brief description of your table, for use by screen readers. These options are not useful when using tables for layout, but they're a good idea for tables that display data.

Noteworthy

If you set your table's border to zero, Dreamweaver will display a dotted line to indicate where the table border falls. These dotted lines are for design purposes only and will not be displayed in your visitor's web browser. If you used a border of zero and don't see dotted lines, choose View > Visual Aids > Table Borders.

When you're done, click OK.

Dreamweaver inserts the table on your page as a grid of rows and columns. You'll notice that the width of each column is scaled proportionally to maintain the overall width of your table. Later in this chapter, in "Setting Row, Column, and Cell Properties," you'll see how to precisely control the column widths to make individual columns wider or narrower in your table.