How to center a table in CSS?

The use of tables in the designing of a website is an exciting task. By default, the alignment of a table is towards the left, but by using the margin property in CSS, we can align it at the center.

If we set the value of margin-left and margin-right to auto, then the browsers show the table centered. We can use the shorthand property margin and set it to auto for aligning the table at the center rather than using the margin-left and margin-right property.

Instead of aligning the table to center, the text-align: center; property only centers the table content, such as the text inside the table.

Let's understand this by using an illustration.

Example

In this example, we are using the text-align: center; property to center the content inside the table and margin-left: auto; and margin-right: auto; to center the table.

<!DOCTYPE>
<html>  
<head>
<style>  
table, th, td {  
border: 1px solid black;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;  
width: 500px;
text-align: center;
font-size: 20px;
}  
</style>  
</head>
<body>  
<table>  
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>  
<tr>
<td>James</td><td>Gosling</td><td>Maths</td><td>92</td>
</tr>  
<tr>
<td>Alan</td><td>Rickman</td><td>Maths</td><td>89</td>
</tr>  
<tr>
<td>Sam</td><td>Mendes</td><td>Maths</td><td>82</td>
</tr>  
</table>  
</body>
</html>   

Test it Now

Output