Inserting a Table

Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page.

A table consists of one or more rows; each row consists of one or more cells. Although columns aren't usually explicitly specified in HTML code, Dreamweaver enables you to manipulate columns as well as rows and cells.

To insert a table:

1. In the Design view of the Document window, place the insertion point where you want the table to appear.

   NOTE: If your document is blank, then the only place you can place the insertion point is at the beginning of the document.

2. Do one of the following:
   • Select Insert > Table.
   • In the Common category of the Insert bar, click the Table button.

   The Insert Table dialog box appears.

   
   
   

3. In the Table Size section, specify the following options:

   Rows determines the number of rows the table has.

   Columns determines the number of columns the table has.

   Table Width specifies the width of the table in pixels, or as a percentage of the browser window's width.

   Border Thickness specifies the width, in pixels, of the table's borders.

   TIP: If you don't explicitly assign a value for the border thickness, most browsers display the table as if the border thickness were set to 1. To ensure that browsers display the table with no border, set the border thickness to 0. To view cell and table boundaries when the border thickness is set to 0, select View > Visual Aids > Table Borders.

   Cell Padding determines the number of pixels between a cell's border and its contents.

   Cell Spacing determines the number of pixels between adjacent table cells.

   TIP: When you don't explicitly assign values for cell spacing and cell padding, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0.

4. In the Header section, select one of the header options:

   None does not enable column or row headings for the table.

   Left makes the first column of the table a column for headings, so that you can enter a heading for each row of the table.

   Top makes the first row of the table a row for headings, so that you can enter a heading for each column of the table.

   Both enables you to enter column and row headings in the table.

   TIP: It's a good idea to use headers in case any of your website visitors use screen readers. Screen readers read table headings and help screen-reader users keep track of table information,

5. In the Accessibility section, specify the following options:

   Caption provides a table title which displays outside of the table.

   Align Caption specifies where the table caption appears in relation to the table.

   Summary provides a table description. Screen readers read the summary text, but the text does not appear in the user's browser.

6. Click OK to create the table.