Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

FrontPage

2009100603 Email to Ronx
 

Centering Shared Borders: CSS and <table> tags

How to centre a page using CSS by restricting the width of tables


Note that the method used here will affect EVERY table in the page - other CSS must be used in author or database generated tables (that is all those tables that are not used for laying out the shared borders) to counteract the width setting given to all tables. See other tables below.

It is possible to center a page that uses FrontPage Shared Borders. CSS is required to set the width of the page (including the borders). This method sets the width of the tables used to layout the shared borders.

For a page that uses Top, Left and /or Right, and Bottom shared borders three tables are generated for layout. The CSS described beow applies to all three of these tables to set their width to 760px, and centred.

Open the website and page in FrontPage.

Switch to Split View (FrontPage 2003), Code View (FrontPage 2003 or 2002), or HTML View (other versions).

At the top of the code add a complete and valid !Doctype. This is required to ensure all the CSS works in all browsers. The !doctype takes the browser out of Quirks mode, and places it in Standards mode. An example of the !doctype is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This MUST be added at the very top of the page, before the <HTML> tag.

Scroll down to the </head> tag.

Add the following just before it:

<style type="text/css">
table {width: 760px; margin: 0 auto;}
</style>

The page will now be centred with a fixed width of 760px.  Change this value for wider pages.

The above CSS can be placed in an external style sheet, along with any other CSS rules.

See this example page to see the effect.

Other tables in the page

If the shared borders contain other tables, then these will have to be "adjusted" so they fit in the page - the above CSS has given all tables in the page a width of 760px, the largest space available (the main content area) will be smaller than this if a left or right shared border is used - and the space available will vary in different browsers.

The easiest solution is to give all these nested tables a width of 100% with 0px margins.

The additional CSS will be:

table table {
 width: 100%;
 margin: 0;
}

This sets the width of all nested tables (tables within tables) to 100% of the available width - that is the width of the cell the nested table is in.

The complete CSS is now:

<style type="text/css">
table {width: 760px; margin: 0 auto;}
table table {width: 100%; margin: 0;}
</style>

The order of these CSS rules is important - if they were reversed every table would have a width of 760px, which is not desirable.

A slightly different (though more convoluted) approach is described at Nested Tables