• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Outlining a Table

You can create borders for your tables by entering a number value into the border text field on the Property inspector as you did at the beginning of this lesson. However, table borders created using the border attribute will display inconsistently in different browsers, particularly across different platforms. To get around this, you can nest tables to create a border or outline that will be consistent and compatible with the various browsers and platforms. This technique will provide you with a greater degree of control over how the outline of the table will appear.

In the lighthouse.html document, click at the bottom of the document and press Return (Macintosh) or Enter (Windows) several times. Create a new table with 1 row and 1 column. Make it 558 pixels wide. Cell padding should be set to 1, Cell Spacing should be set to 0, and the Border should be set to 0.

This is the first, outer table. The cell padding defines the width of table outline that you are creating.


You can set a higher value for cell padding to increase the width of the table outline.

Place the insertion point into the single cell. Use the Property inspector to set the background color of the cell to black (#000000).

The background color of this cell will be the color of the table outline.

With the insertion point still in the same cell, click the Table icon on the Common tab of the Insert bar. Set the options as follows: 1 row, 1 column, 100 percent width, Cell Padding of 6 , Cell Spacing of 0, and a Border of 0.

A table is now nested inside the first table. The nested table will expand to 100 percent of the available space for content in the cell—556 pixels. The first table is 558 pixels, but since it has a cell-padding value of 1, a single pixel space is created on all sides of the cell (top, bottom, left, and right). Therefore, the available space inside that cell is 2 pixels less that the total width of the table. The single pixel of space around the cell will create the outline effect.


Although you could set the size of the inside table to a fixed width, using 100 percent will do the same thing while giving you the advantage of increased flexibility. For example, if you use a fixed width for the nested table and decide to change the size of the outside table, you will also have to change the size of the nested table. However, if you use 100 percent for the width of the nested table, it will always be displayed at the correct size—regardless of any changes you make to the outside table.

Click to place the insertion point into the single cell of the nested table you just created. Use the Property inspector to set the background color of the cell to white (#FFFFFF).

The background of the nested table is now white, and you can see the outline effect created by the 1-pixel cell padding of the outer table.

Select and copy the outside table. Place the insertion point in the right cell of the bottom row of the table at the top of the page, select Top from the Vert menu on the Property inspector and paste the copied table into the cell.

By selecting and copying the outside table, you copied everything within that table; that includes the nested table. The outlined table is now nested inside the first table and creates the effect of a page dropping down from the top bar. At this point, you have three levels of nested tables.

The original outlined table at the bottom of the page is no longer necessary so you should delete it.

Your page should now look similar to the example shown here.

Choose Modify > Page Properties, select bkg_inside_tan.gif for the background image, set all four margin options (Left Margin, Margin Width, Top Margin, Margin Height) to 0 and click OK. Save the file and preview it in the browser.

Inserting the background image shows you how the outlined table works with other elements on the page to create a unified look in the design. Setting the margins of the page to zero makes the table line up flush with the top and left sides of the browser, as well as with the background image, which was created for a page with zero margins. The outlined table will expand downward as you insert content into it.

Experiment with tables on your own pages to create effects that work with your designs.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint