The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

CSS - Centering Tables / Fieldsets

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

Centering Tables ...

Using CSS to center HTML Tables and Fieldsets can be an absolute nightmare and many 'solutions' found on the Web will break under one circumstance or another. This really simple and elegant solution works with both the W3C '4.01 Strict' and W3C '4.01 Transitional' directives or without any DOCTYPE directive at all. It validates and works in all browsers we have tested including Microsoft, Mozilla, Opera and Netscape. We have not found a browser or browser version (v5 and later) that breaks it and it even leaves the contents of the Table cells left aligned.

first, create the following styles ...

<style type="text/css">
<!--

.centerTable {
text-align:center;
}

.centerTable table {
margin-left:auto;
margin-right:auto;
/* INHERITED ALIGNMENT IS CENTER. ONLY INCLUDE THIS IF YOU WANT */
/* TO CHANGE THE ALIGNMENT OF THE CONTENTS OF THE TABLE */
text-align:left;
}

-->
</style>

then wrap your table in a DIV in the following manner ...

<div class="centerTable">
<table>
</table>
</div>
 

Centering Fieldsets ...

Fieldsets and their contents are notorious for rendering both incorrectly and independently, particularly when you are trying to center them on the page. This solution is very similar to the Centering Tables solution but we have not tested it as extensively. However it works perfectly in all the browsers we have tested it in and has cured a lot of problems for us.

first, create the following styles ...

<style type="text/css">
<!--

.centerFieldset {
text-align:center;
}

.centerFieldset fieldset {
display:inline;
margin-left:auto;
margin-right:auto;
/* INHERITED ALIGNMENT IS CENTER. ONLY INCLUDE THIS IF YOU WANT */
/* TO CHANGE THE ALIGNMENT OF THE CONTENTS OF THE FIELDSET */
text-align:left;
}

-->
</style>

then wrap your fieldset in a DIV in the following manner ...

<div class="centerFieldset">
<fieldset>
</fieldset>
</div>
 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Centering Tables With CSS Centering HTML Tables and Fieldsets can be a nightmare and many 'solutions' found on the Web will break in one way or another. This really simple and elegant solution works well in all our tests.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
CSS Positioning Links
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England