Creating Tables in Dreamweaver

Tables are a very useful feature in Web design. Tables divide an area, or whole page into a grid of columns and rows similar to a spreadsheet layout and can be used for all sorts of data, such as timetables, price lists, invoices, bus timetables…

You will have seen tables used on many web pages where tabular data needs to be arranged, you may also have seen pages that use tables as a layout tool to position elements on a web page – these are not always so obvious. What makes tables so versatile is that each cell (box in the table) can contain just about anything you can place on a web page, including text, images, media objects and even smaller tables.

So tables have two applications on the web. First they provide the means for presenting traditional tabular matter in neatly arranged columns and rows. Second and even more important, tables are the leading page layout tool.

Position your curser at the location in the document where you want to position your table.
Click the table button in the common category of the insert bar, or choose Insert/Table.
Enter the appropriate settings in the dialog box to specify the initial table configuration – you can enter the following settings:
• Rows specify a number of rows
• Columns specify the number of columns.
• Width enter the width either in pixels, or a percentage of the page width.
• Border enter the thickness of the table border in pixels (enter 0 if you want no border).
• Cell Padding enter the number of pixels of space between the edge of the cell and its contents.
• Cell Spacing enter the number of pixels of space between adjacent cells.

Click OK to close the dialog box. Your empty table will appear ready to select and edit.

To select the entire table – click on the bottom right corner of the table, or right click within the table and choose Table/Select table. Dreamweaver highlights the selection with a bold line surrounding the table and sizing handles (small black squares) on the bottom and right edges.

To select a row, move the mouse pointer to the left of the row – the pointer will change to a small, solid black arrow pointing to the right. Click to select the row the pointer is on.

To select a column, move the mouse pointer to the top border of the table to activate the column pointer that points down instead of to the right.

To select an individual cell hold down CTRL and click within the cell.
To select multiple cells, click and drag across the cells you want to select, you can also select by selecting the first cell and then CTRL clicking additional cells.

Once you have selected cells, columns or rows you can modify their properties as you would a web page.
Using Tables in Dreamweaver

You can quickly expand or reduce the size of your table by adding or deleting columns or rows.
To add a column, or row, click a column (or row) and choose Modify/Table/Insert Column (or row).
To delete a column (or row) click the column (or row) and choose Modify/Table/Delete row – or hit the delete key.

Tables, columns and rows can be resized in a number of ways.

To adjust the table size visually, select the table and drag the sizing handles to resize the table. Drag the sizing handle on the right border to adjust the table width. Drag the sizing handle on the bottom border to adjust table height. Drag the sizing handle in the lower right hand corner to adjust both height and width simultaneously. Or:

Select the table and adjust the values in the W and H boxes in the property inspector panel. You can set the size to pixels or a percentage of the browser window.

To adjust the width of a column visually, drag the right side of the column left or right. Dreamweaver adjusts the width of all the cells in the column.

Do adjust the height of a row visually, drag the bottom of the row up or down. Dreamweaver adjusts the height of all the cells in the row.

To set a column width, select a column and enter a width in the W box in the property inspector panel. You can set the width in pixels, or percentage of the table width.

To set a row height enter a height in the H box of the property inspector.

This is most useful when using a table for a layout design.
To merge cells together select the cells you want to merge. Click the merge cells button in the property inspector (bottom left) or select Modify/Table/Merge Cells.

To split cells into multiple cells, select the cell you want to split. Click the split cell button in the property inspector (bottom right), or select Modify/Table/Split Cell. The split cell dialog box opens and you can split the cell either horizontally or vertically choose either rows or columns then specify how many rows/columns you wish to insert. Click OK.

Once you have created your table you can insert text/images etc into each cell as you would with a web page. Each cell could have its own background colour or image, or whole rows/columns/tables can be set up with a colour or image.

Index Introduction Setting up Text Preparing images Adding images Tables Design/research More stuff Getting noticed Publishing your site Links