TABLES
Tables are used to present information in tabular form—they can be used to present data like letter grades grades to points conversions, for listing products and prices based on amounts, for presenting locations and mileage between points of interest, and so on.
Click on the table icon in the common Insert panel, and specify the number of rows and columns you want. You may want to specify enough columns so that every other one is a "gutter" separating columns that contain content. For instance, if you want a 3 column table, specify a 5 column table and use columns 2 and 4 as spacers. Then again, you can set up cell padding and margins to do that as well.
Specify a border thickness if you want a border. You can assign border color(s) and styles by creating a CSS rule (use the Border category).
Cellpadding refers to the distance cell contents will be bounced into the cell (rather than jamming up to the cell edges). If you don't put a "0" here, most browsers will automatically insert 2 pixels.
Cellspacing refers to the space between cells; this is similar to a gutter. If you don't put a "0" here, most browsers will automatically insert 2 pixels.
If you want a header—a first row and/or column with special formatting, select the style from the Header section. This is very useful if you're creating a chart and very helpful for people with accessibility issues.
The accessibility portion of this panel allows you to type a description that will be read out loud for people with visual impairments.
Insert a table using the Insert panel, then determine the number of rows and columns you need. Note in this illustration that the table is set to 100%, which means the width will adjust with the size of the browser window.
Once there is a table in the document, make adjustments to it by creating and applying CSS styles. You can add styles by redefining the <table>, <tr> (row) and <td> (cell contents) tags, or create classes to apply to specific areas, rather than elements across the board.
To resize a table, select it by clicking outside the table and then clicking and dragging your cursor across it. You can tell it's selected by the visible control points.
Select a table to adjust its size, or assign a CSS rule by clicking and dragging across it (top), or by placing your cursor in one of the cells and clicking on the the tag you want to affect at the bottom left of the document window.
Adjust a table's size by clicking and dragging any of the three control points. You can also change the table's size by selecting it and changing its dimensions using the Properties pane.
If you have trouble selecting a table, click within a cell, and then click on the word <table> at the bottom of your document window - nice shortcut! This also works if you want to select a specific row or cell.
You can move between cells in a table using the Tab key or your arrow keys. Or just click in the cell you want to work in.
Select multiple cells by holding the Command key and clicking in the ones you want to select.
Merge cells by selecting them, then pressing the Merge Cells icon in the Properties panel.
Merging cells is a great way to create the blocks in a grid for positioning elements. Select the cells you want to merge (they must be adjacent to one another) by holding the Command key and clicking in each one, or clicking and dragging through them.
Use the Properties pane or the Modify > Table menu to merge selected cells into a single cell. (Dreamweaver inserts the "collspan" or "rowspan" HTML to make it happen.)
The Modify > Table menu has a variety of ways to adjust a table. If you want to insert a row or column in a specific place, rather than to the right or bottom of the existing table, click a cell in the row or column to the right or below the new one you want to add. The new row or column will include any properties (like background color) that exist in the one to the right or below the one you're adding.
Create CSS styles to redefine table tags, or create classes, to set them apart from the rest of the page content.
Speaking of which, any CSS properties that you can apply to a block element (a <div> or <p> for instance) can also be applied to rows, columns, or individual cells in a table.
Use Modify > Table to adjust a table in a variety of ways. Or, use Insert > Table Objects to add rows or columns.
CREATING STABLE TABLES
Tables widths are defined as either a percentage that will flex with the size of the browser window, or fixed by using a specific measurement system. Tables created using a percentage are not only flexible in terms of how the browser displays them, but also in terms of what you can do with them.
One of the best ways to keep a column in a flexible (percentage-based) table from collapsing too much is to create a control row using a spacer GIF. Create a blank document in Photoshop or Fireworks that's about 5 pixels X 5 pixels and save it as a GIF.
Create a small gif (white, or a specific color, depending on the background of your HTML file) and size it to prevent table columns or rows from collapsing more than you want them to.
Add a new row to the bottom of a table and insert the GIF in the bottom row in each column you want to control.
Use the Properties pane to change the width of the GIF to the minimum width desired for that column.
This works not only for columns that will contain data, but for any columns you may have created as gutters or spacers between other columns.
You can also control the height of rows using this technique, as well as paragraph indents (although creating a style with CSS and specifying a first line indent in the Block pane is best practice).
YOUR TURN
You've already created a table using HTML code (good for you!) so this time, use the Insert panel to make one. Use your imagination for content, and then define CSS rules to control the look.
See if you can recreate these examples:
