The old way to center tables CSS was easy:
The “align” attribute has been deprecated, however, in favor of CSS (Cascading Style Sheets), and this is a good thing. However, it’s not so obvious how to center a table using CSS.
The obvious way might appear to use the CSS “text-align: center;” somewhere, maybe like one of these:
or, if you get really desperate,
None of these will work. The table itself will be left-aligned, but all the content in the table cells will be centered.
Why? Because “text-align” applies to inline content, not to a block-level element like “table”.
Center tables CSS Method 1
To center a table, you need to set the margins, like this:
And then do this:
At this point, Mozilla and Opera will center your table. Internet Explorer 5.5 and up, however, needs you to add this to your CSS as well:
Center tables CSS Method 2
If you want your table to be a certain percentage width, you can do this:
And then in your HTML/XHTML, you would do this:
Note that I was using an id to describe the table. You can only use an id once on a page. If you had many tables on a page that you wanted to be the same width and centered, you would do this in your CSS:
And this in your HTML:
Center tables CSS Method 3
If you want your table to be of fixed width, define your CSS like this:
Set “width:100px” to whatever width you need.
“text-align: center” is there for Internet Explorer, which won’t work without it. Unfortunately, “text-align: center” will center all the text inside your table cells, but we counter that by setting “tr” and “td” to align left.
In your HTML, you would then do this:
Once again, I’m using an id. If you need to center several tables the same way, use a class instead of an id.
Center tables CSS
The look of an HTML table can be greatly improved with CSS:
|Alfreds Futterkiste||Maria Anders||Germany|
|Berglunds snabbköp||Christina Berglund||Sweden|
|Centro comercial Moctezuma||Francisco Chang||Mexico|
|Ernst Handel||Roland Mendel||Austria|
|Island Trading||Helen Bennett||UK|
|Königlich Essen||Philip Cramer||Germany|
|Laughing Bacchus Winecellars||Yoshi Tannamuri||Canada|
|Magazzini Alimentari Riuniti||Giovanni Rovelli||Italy|
To specify table borders in CSS, use the
The example below specifies a black border for <table>, <th>, and <td> elements:
Notice that the table in the example above has double borders. This is because both the table and the <th> and <td> elements have separate borders.
Collapse Table Borders
border-collapse property sets whether the table borders should be collapsed into a single border:
If you only want a border around the table, only specify the
border property for <table>:
Table Width and Height
Width and height of a table are defined by the
The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:
text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
The following example left-aligns the text in <th> elements:
vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
To control the space between the border and the content in a table, use the
padding property on <td> and <th> elements:
border-bottom property to <th> and <td> for horizontal dividers:
:hover selector on <tr> to highlight table rows on mouse over:
For zebra-striped tables, use the
nth-child() selector and add a
background-color to all even (or odd) table rows:
The example below specifies the background color and text color of <th> elements:
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.
Add a container element (like <div>) with
overflow-x:auto around the <table> element to make it responsive: