Dreamweaver: Tables

Tables

Designers can create complex, professional page layouts with the use of tables. Tables offer the ability to position HTML elements as well as present information in an organized manner. Tables, when used creatively, can also enhance the design of a page. For example, the page your viewing now was composed with the use of several tables.

In this section you will learn how to create, modify , and use tables as a design tool within Dreamweaver.

So what is a table anyway? If you've used a spreadsheet or a program such as Microsoft Word, you probably already have an idea. A table is a way of organizing data, or information. This is done by using headers, rows and columns.

Creating a Table

Tables can be created within Dreamweaver from the Insert Menu, by selecting Table, or from the Objects Palette by clicking on the Table Icon. Either option brings up the "Insert Table" Dialog Box.

Several fields must be defined before the table is inserted:

Rows: How many rows in the table
Columns: How many columns in the table
Cell Padding: Specifies the space between the table border and the cell. This number is in pixels.
Cell Spacing: Specifies spacing between table cells. This number is also in pixels.
Width: The width of the table. This is either a percentage or a number in pixels. Use the drop down menu to choose.
Border: The thickness of the table border. This is a number in pixels. A value of 0 will give you a table without a border.

Once you have defined the table, click OK and it will be placed on your page.

Each one of the boxes is a table cell. From there you can enter text by simply clicking once inside the cell and then typing. You can also add images, forms, and just about every other HTML element.

Table Properties

Before you can modify your table, you must select it. This can be done in 4 different ways:

By clicking near the edges of the table with the mouse
By selecting Table | Select Table from the Modify Menu
By selecting Table | Select Table from the context menu. It must be accessed while the cursor is inside the table boundaries
By clicking on the <table> tag in the lower left corner of the screen.

When the table is selected, you'll notice a black box surrounding it. From here you'll be doing a lot of work from the Properties Toolbar.

You can modify the table at any time from the Properties toolbar. Here is an explanation of the fields:

Table Name: This is where you would name the table. This really only comes into effect when you will be using a Javascript to call the table.
Rows: The number of rows. Changing this will change the table. Only do this if there is no data inside the table. You'll learn how to modify the table with data inside in the next section.
Columns. The number of columns. Changing this will change the table. Like rows, only do this if there is no data inside the table.
Width (W): This is the width of the entire table. Use the drop down menu to the right to specify whether the width is in pixels or a percentage.
Height (H): This is the height of the entire table. Only change this if you have a fixed height within the table, such as an image. The height of many HTML elements will vary on many platforms. If you're at 800 x 600, and specify a height for that resolution, there will be empty space at the end for someone at a larger resolution.
Cellpad: Specifies the space between the table border and the cell.
CellSpace: Specifies spacing between table cells.
Align: This is where you set the alignment of the table on the page. The options are left, center and right.
Border: The size of the border in pixels.

Dreamweaver also offers many options on customizing the look and feel of a table. These are found in the expanded Table Properties Toolbar.

V Space: Specifies the vertical space in pixels around the table.
H Space: Specifies the horizontal space in pixels around the table.
Light Brdr: Gives the inside borders a light color. This is only supported in Internet Explorer.
Dark Brdr: Gives the inside borders a dark color. This is also only supported in Internet Explorer.
BG (long): Specifies a file to be used as the table background. A file can be chosen from the hard drive by clicking on the Folder icon.
BG (short): Specifies a table background color in Hexadecimal format.
Brdr: The border color for the table in pixels.

Cells and Rows

You can also modify cells and rows individually. Rows can be modified by selecting the entire row. This can be done by holding down the CTRL (Command on Mac) key and clicking in each individual cell of the row, or by clicking on the <tr> tag in the lower left corner.

Table cells can be selected simply by having the cursor inside the cell. They also can be selected by clicking with the CTRL (Command) key, or by clicking on the <td> tag.

The Properties Toolbar does change. The top part is identical to the default text Properties, with alignment, text formatting, etc. The expanded Properties are similar to the Table Properties, but there are some differences.

Horz: Horizontal alignment. This affects only the elements inside the cell. The options are Left, Center and Right.
Vert: Vertical alignment. This affects the orientation of the elements within the cell relative to other cells.
W: Width of the cell. This can be a number or a percentage. If it is a percentage, the % sign must be added.
H: Height of the cell. This must be a number in pixels.
No Wrap (checkbox): This prevents elements inside the cell from wrapping.
Header (checkbox): This designates that the cell is a Header Cell (TH). This makes any text inside centered and bold.
BG (long): Background image for the cell.
BG (small): Background color for the cell.
Brdr: Border color for the cell.

Modifying your Table

One of the advantages of using Dreamweaver is the simple fact that it is a WYSIWYG program. While designing you can see how changes will look in the browser (to a degree) without having to preview it. This is one of the many ways which Dreamweaver can save the Web Designer plenty of time. This gives you the ability to make slight changes while you are designing. You may decide that you need to add an extra row, or delete an extra column. There are several ways to do this as you go.

The context menu is extremely helpful for making modifications. While you have your cursor inside a cell, you are able to right click (CTRL click for Mac), select Table, and there are several options available for making modifications. We will call this submenu the Table Menu.

Note: This same submenu can be accessed from the Modify Menu by selecting Table.

Adding Rows and Columns

You can add a row or a column by accessing the Table Menu and selecting either Insert Row or Insert Column. This will be added above the selection. This means that a row will be inserted above the row your cursor is currently in, and the column will be inserted to the left of the column your cursor is currently in.

To add Rows or Columns below the selection, you can select Insert Rows or Columns from the Table Menu. This will bring up the "Insert Rows or Columns" dialog box:

When you access this dialog box, it automatically changes the insertion from Above to Below. From here you can add multiple columns or rows. You must use the radio buttons to specify which you would like to insert, and you can use the number box to choose the amount.

Deleting Rows and Columns

You can also delete rows and columns easily by using the Table Menu. Simply place your cursor in the row or column you would like to delete, access the Table Menu, and select Delete Row or Delete Column.

You can delete multiple rows and columns by selecting all the cells within. This can be done by holding down the CTRL (Command for Mac) key and clicking on each cell individually.

Spanning Rows and Columns

Unless you are familiar with HTML, you are probably not familiar with Column and Row Spanning. It can be a difficult concept for some, but is well worth spending the time to learn it.

You can specify that a certain table cell will span multiple columns or rows. In HTML, you must specify the number of cells it will span. In Dreamweaver, you are allowed to simply increase and decrease the span by one.

If you decide to change your mind, you can decrease the span in the same fashion, by selecting Decrease Row Span or Decrease Column Span.

Nesting Tables

Nested tables means placing (nesting) a table within another table. Doing this can give the designer even more control over positioning with a table driven page.

It is done quite easily. Simply insert a table while the cursor is within the cell you would like to place the table.

Before you start going crazy with nested tables, I should warn you that this can slow down your page's load time. Browsers display tables by rendering what is inside before rendering the rest of the table. This means that if you have 5 nested tables within 1 container table, the browser must render everything inside before the container table will displayed. This is especially true with Netscape browsers. It is a good idea to test your designs in both browsers before you publish.

Nesting tables is more of a design tool than anything else.

Using Tables as Layout

Now I will share some techniques on turning your newfound table knowledge into quality page designs.

Before you begin designing your page, you must decide what your target will be. This will determine how your tables are formatted. You must also decide whether you would like the content of your page formatted by pixel width or percentage. If you specify pixel width, the page will not fill the entire screen at larger resolutions (this page is an example) and could cause horizontal scrolling at smaller resolutions..

I will walk you through the process of designing a page and will show you updated samples as we go.

Once you've decided the width of your page, you are ready to get started. Insert a table with the desired width. This will be the container table. Only use 1 row and 1 column with a cellpadding, cellspacing and border of 0.

Now we'll add a table where we can place the site's branding. Go ahead and insert another table nested within the container table. For the example I formatted the nested table at 98% so that the red background of the container table would appear to be a border. I added a three cell table, with the top and bottom cells having a red background. The nested table also had a cellpadding, cellspacing and border of 0, and the align was set to center so that it fit comfortable within the container table.

Now it's time to add navigation and content.Go ahead and select the first nested table. Once it is selected hit the right arrow key once. This will place the cursor within the container table just after the first nested table. Go ahead and add another table with 2 or 3 columns. For the example I added 3 columns and formatted the left and right columns at 20%. This leaves room for some right and left navigation and a content area. I made the background color of the content (middle) cell white.

Now it's time for some navigation. Add some text, graphics, or whatever you desire into one of the sidebars. You will need to set each cell's vertical alignment to Top. Once you have the navigation in place, you can insert your content in the middle cell. This is what I did for the example.

Now we have a working page. It might not be the most creative page in the world, but it's a good start. From here more images, colors and text could be added to spice the page up.

What I just shared with you was a technique. As you experiment with table designs more, you'll come up with your own techniques that will suit the type of pages you like. This is something that can only be established with practice.