The use of tables in web design has an interesting history. Before the adoption of CSS, tables weren’t just used to display tabular data exercise lists in a conventional manner but were instead more commonly used to control complete page layouts.
Back then, HTML tables were used to define both the structure and the visual appearance of web pages, where the positioning of the table could be specified in HTML directly. For example, to set the alignment of a table to the center, one could simply write:
<table align="center"> … </table>
However, aligning your tables in this manner is no longer correct, and has been deprecated in HTML5. That’s because modern Web standards dictate the separation of structure (HTML) and style (CSS), and the above method violates that principle.
HTML should never be used to set the way an element appears; that’s now the job of CSS. So what’s the correct way to center a table in CSS? In this article by our team at wpDataTables, we tackle this question and show you a few tips on how to align your tables properly.
We know a thing or two about tables, considering we have created an awesome WordPress table plugin, so let’s dive in.
How can I use CSS to center a table?
CSS sets the look of the page, enabling you to control the appearance and positioning of every element, including the table element and all its sub-elements such as th, tr, and td.
First things first, let’s go over the ‘right’ way of centering a table with CSS. If your right and left margins are of equal value, modern browsers should show the table centered. An easy way to achieve this is having both margins set to auto.
An example of how to write this in CSS is below:
table
{
margin-right: auto;
margin-left: auto;
}
Note that you cannot just center the table the same as you would with text — .e.g. by using “text-align: center”.This is because the table element is a block-level element, as opposed to an inline element. “text-align: center” will only center inline content, such as the text within the table, rather than the table itself.
However, for older versions of Internet Explorer, there is a bug in which block-level elements are treated as inline elements. Thus, the only way to center a table to work with some versions of IE is to explicitly set “text-align: center” on the parent element of the table (e.g. the body element as shown below):
body {
text-align: center;
}
You can test how different browsers will behave with different styles, either by using “margin-left: auto; margin-right: auto” or “text-align: center”.
We’ll go over how to center a table in both modern and older browsers so that it looks right.
Examples will have the following general format:
<div> <table> </table> </div>
Styles get applied to either <div>, <table> or sometimes both.
The style sheet section that we’ll play around with to set the margins is:
.center1
{
margin-right: auto;
margin-left: auto;
}
.center2
{
text-align: center;
}
This example will work well on newer browsers. It will also work on most older browsers. Once you’ve used this method, open it in different browsers to check how it looks.
CSS for older browsers and newer browsers together:
.centertbl
{
text-align: center;
}
.centertbl table
{
margin-left: auto;
margin-right: auto;
text-align: left;
}
How does it work?The first part gets put into the <div> containing the <table>. This will center a table in Internet Explorer 5 and Netscape 4. The second part gets applied to the<table> within a <div>.
The settings for the margins will let you center a table in browsers that work well with CSS. Then, the inline text will be put back to the default left alignment, overriding the initial “text-align: center” for older browser support.
How to center with a margin
One of the most common ways to center a table is to set both the bottom and top margins to 0, and the left and right margins to auto.
Here’s a commonly used method:
table {
margin: 0 auto;
}
Or you can do it this way:
table {
margin-left: auto;
margin-right: auto;
}
If you’re after a table that’s an exact width, you may do this as you usually would and the automatic margin will divide the space left over.
table {
width: 500px;
margin: 0 auto;
}
Another way to do it is to use percentages to define the width:
table {
width: 50%;
margin: 0 auto; /* same as margin: 0 25%; */
}
Cell alignment: text-align vs. vertical-align
If you want to know how to center text in CSS, there are two parts to aligning text in a cell; horizontally and vertically. Horizontally is whether the text will align center, left, or right of that cell. This is controlled by the text-align property.
Vertically is whether it’s in the middle, top, or bottom of the cell. This is controlled by the vertical-align property.
You apply the below properties to the TH or TD element to have your text vertically and horizontally align however you desire. For example:
td {
text-align: center;
vertical-align: top;
}
Justifying the text refers to adding spaces between all the words until they perfectly fit the space available on the line. The final line does not justify.
Table styling tips
Before concluding, we thought it may be useful to have a list of quick tips for your reference. These will help when you make a table in CSS.
- Line up your <td> and <th> text by using text-align. This will make it look tidier and easier to read.
- To break your table into parts that make sense, you can use <tfoot>, <tbody>, and <thead>. This also gives you more parts where you can apply CSS. This makes it simpler to layer multiple styles.
- Using table-layout enables you to set your column widths more easily. When you set the heading width, the column width will be the same.
- Use alternating colors to make the table simpler to read. At a quick scan, you can see what information is in the same row.
- Keep your table simple. You can use percentages, so you don’t have to change the size every time.
- You can utilize border-collapse to make a cleaner and neater looking table.
Ending thoughts on how to center a table
Now you know how to center a table using CSS. As discussed, the ‘right’ way to do this is by setting both right and left margins to auto. This method works for almost all new browsers that work well with CSS.
For some less modern browsers, this won’t work. If this is the case, you can style the table using the text-align method and surround it with <div>. If you want to center the table by using text-align on the outward <div>, you can do it by using text-align.
You can also style the cells of the table with a text-align or vertical-align value whenever you want to position the inline text in a specific way.
If you enjoyed reading this article on How to center a table with CSS, you should check out this one about Bootstrap tables.
We also wrote about a few related subjects like table background color, HTML tables, responsive tables with CSS, CSS tables and jQuery table plugins.
