| A table is nothing more than a grid to display data, much like a spreadsheet. In fact, tables originally were intended to display spreadsheet type data, but Web designers found them useful to lay out content within HTML. Some basic options are associated with all tables and I'd like to briefly review some of the common elements and terms you'll encounter when working with them. As I talk about these different elements, be sure to refer to Figure 5.1. This figure is the Insert Table dialog box that you can activate by clicking the Insert Table button under the Common tab of the Insert panel. This dialog box asks you to define the different parameters associated with a table. Figure 5.1. Set up the initial parameters of the table by filling out the criteria in the Insert Table dialog box.
WARNING If the table object under the Common tab is grayed out, you're in layout view. Click the Layout tab in the Insert panel and choose Standard View. This activates the table object under the Common tab.
Following is a breakdown of the different elements in the Insert Table dialog box. Rows A row is the horizontal divider in a table. Type in a number value for how many rows you want to appear in your table. Columns A column is the vertical divider in a table. When columns and rows intersect, a cell is formed. Type in a number for how many columns you want in your table. Width This option determines how wide the table will be. Use the drop-down menu to choose between a pixel value and a percentage. Border Here you can determine at what pixel size your table border should appear. If you prefer not to have a border, type in 0 for the value. Keep in mind that borders are displayed differently in different Web browsers, so perform adequate testing when creating tables with borders. Cell Padding Cell padding is much like a cushion around the interior wall of the cell. Enter in a pixel value for how much space you want between the cell wall and the cell's contents. Cell Spacing Type in a value to determine how many pixels each cell will be spaced. You'll be using this dialog box later in this chapter when you begin inserting tables into your documents. How the HTML Works Yes, I know the beauty of Dreamweaver is not having to know how the HTML works. However, when it comes to debugging strange behavior, or undesired effects, the best way to fix it is to look at and adjust the HTML code. Now you don't have to master HTML; you just need to know what tags to look for if you are debugging the code. When tables are created, several tags are associated with it. The first and possibly the most obvious is the <table> tag. The table tag lets the browser know that a table needs to be rendered on the screen and can contain attributes such as border and width. Then each component of the table also needs tags. The components I'm talking about are columns, rows, and cells. After the <table> tag has been established, the next thing a table needs is a row. A row is created by the <tr> or table row tag. Attributes exist that can be placed within the table row tag, such as horizontal and vertical alignment as well as background color. After a row has been established, cells can be formed with the use of the <td> table data tag. A table data tag is a bit more abstract; it's not a column tag. A table column is generated based on the number of <td> tags within a set of <tr> table row tags. Look at the following code for a table with three columns and three rows: <table border="1" width =100%> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> NOTE The nonbreaking space code between the <td> table data tags is to prevent browsers from collapsing the column.
The table generated by this code is pictured in Figure 5.2. Figure 5.2. This simple table with three columns and rows was created with the preceding code.
Headings and Captions A few more tags are associated with tables that you should be aware of: the caption and heading tags. Caption tags enable you to create a small caption underneath the table. Dreamweaver doesn't offer a caption option, so if you want to create a table caption, you'll have to manually type the code in code view. The tag should be placed after the initial <table> tag. The <caption> tag can have attributes for horizontal and vertical alignment. A table header is denoted by a special table tag called the <th> table header tag. It is designed to automatically format the cell with bold centered text. | 
