JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Centering a Table

You can draw attention to a table by centering it in the browser window.

To center a table with (X)HTML:

In the table tag, type align="center" (Figure 16.20).

Figure 16.20. The simplest way to center a table is to add the deprecated (but still well supported) center value to the align attribute.


To center a table with CSS:

1.
Make sure you've specified the width of the table (see page 232).

2.
Add margin-right: auto and margin-left: auto to the style rule for the table (Figure 16.21).

Figure 16.21. Setting the right and left margins to auto makes them equalwhich is the essence of centering.


Tips

  • You can also use the CSS text-align property in a surrounding div to center tables, but it seems a bit of a hack to me (see page 165).

  • The center value for the align attribute has been deprecated by the W3C, though it continues to enjoy broad support.

  • You could also center the table by enclosing the entire table in opening and closing center tags, although they've also been deprecated.

  • You could conceivably center one table within another. For more information, consult Combining Tables on page 236.

  • You can also wrap text to the right or left of a table (see page 235).

  • You can't align a table to the top or middle line of text as you can with images.

  • Centering the table with CSS by setting the right and left margins to auto does not work in very old browsers (like IE 5.5 or earlier).


Figure 16.22. No matter how wide the browser window is, the table is centered right in the middle.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→