In HTML, tables are used to display data in a structured format. They are commonly used to display data that would be difficult to read in a simple list or paragraph format.
When you add a table to your HTML page, it is by default aligned to the left side of the page or its containing element. But many times we need to change its default alignment to meet the design requirements of the application.
In old days, we used to add the align="center" attribute to the <table> itself to align it to the center. But, the align attribute is now deprecated and we shouldn’t use it. Instead, we should use CSS for aligning and styling purposes.
In CSS there are a number of ways that you can use to center align a table. Some of the commonly used methods are as follows:
- Center table using the margin auto
- Center table using flexbox
- Center table using the position property
Let’s discuss each method in detail.
Center Table Using the Margin Auto
The <table> is a block-level HTML element. Therefore if you set the left and right margins of the table to the same value auto, it will be automatically aligned to the center of its containing element.
Setting the margin to the value auto means that the browser will itself calculate the left and right margins of the element.
The browser actually checks how much space is available after placing the element on the layout and divides the available space equally between the left and right margins. Therefore, the element gets centered horizontally.
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>21</td>
</tr>
<tr>
<td>Will</td>
<td>Smith</td>
<td>24</td>
</tr>
<tr>
<td>Jack</td>
<td>Sparrow</td>
<td>30</td>
</tr>
</table>
Add the CSS:
table{
margin-left: auto;
margin-right: auto;
}
table, th, td{
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
Output:
In the above example, we didn’t specify the width of the table.
But if you specify the width of the table and set the margin-left and margin-right to auto, still the table will be center aligned horizontally.
That’s because when you set the width to some fixed value say 60%, and set the left and right margins to auto, the remaining 40% of space is equally divided between the left and right margins and therefore the table gets centered horizontally.
table{
width: 60%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
table, th, td{
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
Output:
Center Table using CSS Flexbox(The Modern Way)
The flexbox module in CSS is a modern way to create responsive and flexible layouts. You can also use it to align items horizontally as well as vertically.
To align a table to the center of the page or its container with the flexbox module, you have to wrap it with a block-level element such as a div and then make this div a flex container by setting its display property to flex.
Now, to center align the table horizontally, you can set the justify-content property to center and to center align vertically, you can set the align-items property to center.
<div>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>21</td>
</tr>
<tr>
<td>Will</td>
<td>Smith</td>
<td>24</td>
</tr>
<tr>
<td>Jack</td>
<td>Sparrow</td>
<td>30</td>
</tr>
</table>
</div>
Add the CSS:
div {
display: flex; /* Make flex container */
justify-content: center; /* Center horizontally */
}
table {
width: 60%;
text-align: center; /* center text */
}
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
Output:
Center Table using Position Property
The position property in CSS is used to control the positioning of an element on the webpage. You can easily use this property to center align a table horizontally and vertcally both.
To center align a table with the position property, you have to first wrap it with a block-level element such as a div and then set the position of this div to relative.
Setting the position of the div to relative makes sure that all of its child elements will be positioned relative to itself not to the viewport.
Now, set the position of the table to absolute and apply left: 50%; on it. This will put only the left side of the table in the center of its container. Therefore, we have to pull the whole table by -50% using the transform property so that it sits in the exact center of the div.
<div>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>21</td>
</tr>
<tr>
<td>Will</td>
<td>Smith</td>
<td>24</td>
</tr>
<tr>
<td>Jack</td>
<td>Sparrow</td>
<td>30</td>
</tr>
</table>
</div>
Add the CSS:
div {
position: relative;
}
table {
position: absolute;
left: 50%; /* Put table's left side in center */
transform: translateX(-50%); /* Pull whole table by -50% */
width: 50%;
text-align: center; /* center text */
}
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
Output:
Conclusion
In this article, we learned different ways of centering a table with CSS.
In summary, to center align a table in CSS, you can set the left and right margins of the table to auto.
When you set the left and right margins of the table to auto, the browser automatically calculates the margins for the table and divides the available space equally between them. Therefore, the table automatically gets aligned to the center of the page or its container.
You can also use other methods such as the flexbox module or the position property to align the table to the center horizontally.
Thanks for reading.
