Place the insertion point in the document window where you'd like to insert a table.

You can add a table anywhere you can add a paragraph of text. You can even add a table inside another table, by clicking inside a table cell.

Choose Insert → Table.

You can also click the Table button on the Insert panel. It appears under both the Common category and the Layout category. You can also press Ctrl+Alt+T (⌘-Option-T). Either way, the Table dialog box opens (see Figure 7-3).

Using the Rows and Columns fields, specify how many rows and columns you want in your table.

Don't fret too much over your estimate, since you can always add or remove rows or columns later.

Type the amount of cell padding, in pixels, you want for the table.

Cell padding is the margin inside the cell—the space from the edge of a cell to its contents (see Figure 7-2). Unfortunately, this property applies to every cell in a table (it also applies equally to all four sides of the cell). You can't add this space to an individual cell in a table, or have different amounts of padding (for example, 10 pixels of space on the left side of the cell, but only 5 pixels at the top) unless you use the CSS padding property as described on Section 9.4. People often either type 0 or leave this box empty, and then use the CSS padding property to control padding on individual table cells (via the <td> and <th> tags).

Type the amount of cell spacing, in pixels, you want for the table.

Cell spacing specifies how many pixels of space separate one cell from another (see Figure 7-2). Again, this property applies to every cell in a table, but, unlike padding, there's no effective CSS equivalent. So if you do wish to insert space between each cell, then you should add a value here (you can change this later, as described on Section 7.6). Type 0 to remove any space between cells. (Note that leaving these fields empty isn't the same as setting them to zero; see Figure 7-3.)

Using the "Table width" field, specify how wide you want the table to be (in units that you specify using the pop-up menu).

Tables can have either a specified, fixed minimum width, or they can take up a specified percentage of the space available on the page. To set a fixed width, choose Pixels as the unit of measurement, and then, in the "Table width" field, type a pixel amount. Fixed-width tables remain the same size regardless of the browser window's size.

Percentage widths let tables grow or shrink relative to the space available. In other words, if you place a 100% wide table on a blank Web page, the table stretches all the way across your visitor's browser window, no matter how wide or narrow it is. But the percentage isn't always based on the overall browser window width. If you place a table inside another object—either another table cell, or a <div> tag—that has a set width, Dreamweaver calculates the percentage based on that object. Say you have a sidebar on a page, and the sidebar is 300 pixels wide; if you insert an 80% wide table inside the sidebar, then the table takes up 80 percent of 300 pixels, or 240 pixels.

Note:

Sometimes Internet Explorer 6 for Windows treats 100% as a little bigger than 100%. This confounding behavior can cause 100% wide tables in CSS layouts to not fit (usually forcing the table to jump down below most of the page design). Using a slightly smaller percentage like 99% or 98% usually fixes this glitch.

In the "Border thickness" box, type a number, in pixels, for the border.

If you don't want a border, type 0. Dreamweaver uses dotted lines in Design view to help you identify rows, columns, and cells whose border is 0. (The dotted lines won't appear on the finished Web page.) Again, CSS offers a much better method of adding borders (see Section 6.4.2).

Using the buttons in the middle of the dialog box, select a Header option.

The Header property inserts the <th> tag to create the cells in the top row or left-hand column. <th> is a table header tag; it indicates that a cell is a headline for a column or row of data, and identifies the kind of content that appears in the cells below the column headline or to the right of the row headline. A table that displays a company's yearly sales figures, broken down by region, might have a top row of headers for each year ("2005," "2006," "2007"), while the left column would have table headers identifying each region ("Northwest," "West," "South," and so on).

The only visible change you get with a <th> tag is that Web browsers display header cell text in bold type and center aligned. However, this option also makes the table more accessible by telling screen readers (used by the visually impaired) that the cell serves as a header for the information in the column. (You can always change the look of these cells using CSS; just create a style for the <th> tag as described on Section 4.2.)

In the bottom section of the Table dialog box, add any Accessibility settings you wish to use.

In the Caption box, type information identifying the table; it appears centered, above the table. Use the Summary box when you want to explain a particularly complex data table. This information doesn't show up in a browser window; it's intended to clarify the contents of a table to search engines and screen readers. Basic data tables (just simple rows and columns) don't need a summary; search engines and screen readers can understand them just fine. It's only when you create a complex table with merged cells (see Section 7.7.3) and multiple levels of headers that you might want to fill out the summary.

For more information on these options and to get a complete rundown on table accessibility, visit www.w3.org/TR/WCAG10-HTML-TECHS/#tables.

Click OK to insert the table.

Once you've added a table to a page, you can begin filling the table's cells. A cell works like a small document window; you can click inside it and add text, images, and links using the techniques you've already learned. You can even insert a table inside a cell (a common technique in the bad old days of table-based layout).

To move the insertion point from one cell to the next, press Tab. When you reach the last cell in a row, the Tab key moves the insertion point to the first cell in the row below. And if the insertion point is in the last cell of the last row, pressing Tab creates a new row at the bottom of the table.

Shift+Tab moves the cursor in the opposite direction—from the current cell to a cell to the left.