dreamweaver

Tables for Page Layout

You can change the layout of your Web page by dividing it into vertical or horizontal sections. This allows you to display your text in one section, navigational links to other pages in another section, and pictures, video or audio clips in another section.

Note: Many pages on the Internet are laid out via tables. Although tables are the easiest way to do this, they're no longer considered the best way. Modern Web design principles reserve tables for tabular data but prefer a technology called Cascading Style Sheets for page layout. However, CSS is a complex topic. We'll stick to good old tables for the sake of this tutorial.

You can add a table in the middle of a page, or you can display your entire page as a table, which would break the entire page up into columns and rows.

To add a table, position your mouse cursor in a blank area where you want the table to be inserted. Then in the menu at the top select Insert...Table.

You'll get a panel that looks like this:

Here you can set the various properties for the table, including the number of rows and columns, the width of the table (how much of the screen it will fill up) and the thickness of the borders between the columns and rows.

Setting Table Properties

The basic settings are:

  • Rows - to set the number of horizontal sections into which you want to divide your page
  • Columns - to set the number of vertical sections into which you want to divide your page
  • Width - to determine how much of your Web page should be taken up by the table. This is defined either as a percentage of the screen or as a set number of pixels.
  • Border - to add a black line defining the borders between the segments of your table. You also can set the thickness of the border. You do this by typing in a number, with 0 being no border, 1 being the thinnest border and so on.
  • Cell Padding - to determine how much blank area or padding you want around the inside edge within each segment of a table (called a cell) This creates blank space around the text or other elements that are inside each segment or cell of the table. You do this by typing in a number, with 0 being no padding, 1 being a very small amount of padding, and so on.
  • Cell Spacing - to determine how much blank space you want to insert between each segment or cell. You do this by typing in a number, with 0 being no space, 1 being a very small amount of space, and so on.

Note: Cell padding and cell spacing sound a bit similar, but their difference becomes more apparent once you start experimenting with them. Try creating a table with the border set to 1 and put some dummy text in each cell, then experiment with altering the cell padding and cell spacing attributes. And be sure to preview the table in a browser to see the full effect of changing cell spacing and padding.

For example, if you want a table that will:

  • Split your screen into four sections
  • Fill up about 4/5 of the entire screen
  • Not have any lines defining the borders between the four segments
  • Create a some blank space around the edges of each segment to space out the text or other elements in one segment from what you enter into another segment

You would enter these values:

  • Rows: 2
  • Columns: 2
  • Width: 80 Percent
  • Border: 0
  • Cell Padding: 5
  • Cell Spacing: 5

Then click on OK and a table will be added to your Web page.

Now you can type text or insert pictures or other elements into each of the table segments or cells to fill in your basic page layout. You add these elements to a table cell or segment just as you would if you were entering them on a blank HTML page.