Tutorial: Centering a table on a page (Part 2)

by Tim Gallant

Fluid-width table

This table was set to a percentage value. Therefore, rather than staying at 700px wide, as our previous page had, this table will always remain 70% the width of the user's browser. (Up to a point, of course. This is dependent on what you have in the table. For example, our demo code box below is set for 210 px wide. If the user shrinks her browser window to less than 300 pixels wide, something else will happen: either scroll bars will appear, or the margins will shrink to less than 15% per side.)

Here is the CSS:

And in your HTML, as before: <table id=maintable> (etc)

An alternative method would be to set the table width to 100%, but alter the body margins:

And as with the method on the previous page, don't forget to take into account Internet Explorer 5. So add text-align: center; to the above body tag code.