Tables


Tables are the method used for organizing rows and columns in your webpage. You can now utilize the TABLE tag to give your webpage a certain format of alignment. Ever wonder how they get those links to line up on the left hand column of the webpage? Tables.

To create a Table using the Table Wizard, start by clicking on the Table Wizard Button.

 Table Wizard Button

This button will show the Table Dialog. In this dialog you can design your table with a built in preview of the actual HTML table as you change and modify it.

Table Properties

This section effects how the entire table looks. Change the values of width, height, padding, spacing, and color.

Cell Properties

Select a cell by clicking on the 'X' image in the cell in the Preview area.

This is where you can change the individual attributes for each cell in the table. Place whatever will be displayed (whether it is text or an image) in the Cell Contents box.

Technical Notes on Tables

The ALIGN attribute controls the alignment of the table itself, but not of the individual cells. This can be set either in the TR element for an entire row, or in the TD and TH elements for individual cells.

The WIDTH attribute can be a pixel width or a percentage. It indicates the suggested width of the table, although the browser can ignore this if it is not possible. A "100%" value means the table will span across the entire browser window.

The BORDER attribute will display a border around the table with a corresponding border width="number". BORDER without a value, defaults to a width of one. The lines between table cells or rows cannot be resized.

The white space inside a table can be increased by using the CELL SPACING attribute to indicate how many pixels there should be between a cell's contents and the border. CELL PADDING indicates how much white space (in pixels) there should be between individual cells.

Note:
Avoid using pixel widths for a table. The browser window may not be able to display the entire table, which is not always desirable.