Inserting and Using Tables

Why use tables?
Tables help you divide the space on your page. They are similar to tables in Word or Excel but can be used in much more flexible ways. Tables give you the option of making your page a fixed size or making it fit to the user’s window the best it can. Tables also guarantee that the location of your text and images does not change when seen on screen with different resolutions or in different Web browsers.

Tables are useful if you want to show relationships between different types of data. They allow you to group related data in rows and link them to other data in different columns. While they are often not needed on many sites, there are certain situations where you may want to present your data in tabular form.

Steps to Creating a Table

1. Start up Dreamweaver and open the page where you want the table.
2. Move your text cursor to the location on the page where you wish to insert the table. One way to do this is to simply click the spot where you want the table to appear. This will cause your text cursor to move to that place.
3. Click the "Insert" menu and then the "Table" item on the menu that appears. In the interest of brevity, I shall refer to such a sequence of clicking menu items as "Insert | Table".
4. A dialog box entitled "Table" will pop up. Enter the number of (horizontal) rows and (vertical) columns you want the table to have in the spaces for "Rows" and "Columns" respectively.
5. "Table width" refers to how broad you want the table to appear. This width can be specified in percentage of the enclosing column of your multi-column site or in pixels. For example, if you want the table to span the entire width, type 100 into the box for "Table width", click the down arrow of the adjacent drop down box and select "Percent". It's also possible to create an auto-resizing table by deleting the number in your table width box. Your table will then be resized by the web browser and Dreamweaver according to how much content it has.
6. Tables can be borderless or have borders. Borders are just the lines that demarcate the boundaries of each table cell. In general, for data tables, most people want borders since they make the table easier to read. The thickness of the borders are specified in the "Border thickness" box. It defaults to 1 pixel. It's up to you whether to change it or leave it at the default. If you do not want a border, enter "0" (zero, without the quotation marks) into the box.
7. Cell padding is the amount of space you want between each cell's content and its border. Cell spacing is the amount of space you want between adjacent cells. You can leave it blank or set it to any value you wish. If you're not sure what number is appropriate, you can always enter some random value (like "2") to start with and adjust it later. I'll mention how you can change the settings you make here below, without having to recreate everything. Note that "0" (zero) is a valid value for these fields as well.
8. The "Header" section allows you to indicate that leftmost column or topmost row of your table is going to contain a description for that column or row. The content of the column or row that you designate as a "header" will be displayed in a bold font and centred. The default is to create a table with no headers, that is, all rows and columns look the same, and nothing is internally marked in the HTML code as being a title for that row or column.
9. In the "Summary" box, enter a brief description of what your table contains. For example, if the table contains the examination scores for each student in your class, you may want to put "student examination results" in the summary box. This box is optional, and its contents will not be displayed. It is primarily intended to improve the accessibility of your table and may be used by specialized software like screen readers.
10. When you're done, click the "OK" button. The table should appear on your web page. Note that when the table is first created, Dreamweaver selects the entire table although it may not be immediately obvious that it has done so. Therefore do not type anything yet or you'll accidentally replace the whole table with what you type. Instead, click a cell in the table before starting on your content.

How to Configure/Customize a Table After It Has Been Created
If you are dissatisfied with the table you created above for some reason, you do not have to delete everything and start over.

1. Adding More Rows or Columns to Your Table in Dreamweaver

To add new rows or columns to your existing table, click "Insert | Table Objects". A menu will appear allowing you to insert a new row above or below your current cell (where your text cursor is currently shown) as well as a new column to its left or right. If your cursor is not within any cell in the table, first click somewhere within one of the cells before using this menu.

2. Changing Your Mind about the Headers

If you have set or not set a particular cell as a header, and now have a change of heart, click the cell that you want to change. Look at the bottom of your Dreamweaver window to locate the Properties pane. Somewhere in that pane, you should be able to see the word "Header" with a checkbox beside it. If you had previously designated the cell as a header and now changed your mind, uncheck that box. If you have previously not made that cell a header and now want it to be one, check it.

3. Changing the Table's Width

Look at your table. There should be a fine green line above the table with the width of the table displayed in the centre. Click that line. This should select the entire table.
(If you don't see any green line, it means that your text cursor is not in the table itself. Click anywhere in the table and the green line will appear. Don't worry about that green line: it's just a visual cue used by Dreamweaver to allow you to select the entire table easily. It is not actually displayed in a real browser.)
The Properties pane at the bottom of your Dreamweaver window should now show the table width in the box beside the "W" character. Change it to the new value. You can also switch between specifying the width in pixels and percentage by clicking the down arrow in the adjacent drop down box.

4. Changing the Cell Padding and Cell Spacing

To change the cell padding and spacing of the table, click the green line above your table to select the entire table. The Properties pane at the bottom of the Dreamweaver window should now display the "Cellpad" and "CellSpace" fields, allowing you to set or change them.

5. Changing the Colours of the Background and Border or Adding a Background Image

In the same way, you can change the background or border colours of your table. Click the green line above your table to select the entire table. In the Properties pane at the bottom of the Dreamweaver window, you should now be able to see the fields "Bg color" (that is, background colour), "Brdr color" (for "border colour") and "Bg Image" (for "background image"). Clicking the box beside any of the colour fields will cause a colour picker to appear, allowing you to choose a colour.

If you're setting a background image, you should first copy the background image into a folder or subfolder of your website directory. By "website directory", I mean the directory that appears in the rightmost column (the "Files" pane) of your Dreamweaver window. Either copy the image into that folder itself, or a subfolder within it. This will allow Dreamweaver to manage that file with its site manager and upload it automatically when you publish your web page. Once you've done this, return to the Properties pane for the table and click the folder icon on the "Bg image" line and select the image file accordingly.

6. How to Change the Background Colour of a Row or Column

If you wish to change the background colour of an entire row or column, for example to make your table zebra-striped or have alternate shades of colour (for easier reading), drag your mouse across that row or column. That should select that particular row or column. Then change the background colour for that row through the Properties pane at the bottom of the Dreamweaver window. Specifically, click the box beside the word "Bg" (for "background") to display the colour selector.