Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to center a table with CSS?
Centering a table with CSS is an important aspect of web design that enhances the visual appeal and readability of your content. This tutorial will show you three effective methods to center a table using CSS.
Syntax
/* Method 1: Using margin auto */
table {
margin-left: auto;
margin-right: auto;
}
/* Method 2: Using CSS Grid */
body {
display: grid;
place-items: center;
}
/* Method 3: Using Flexbox */
body {
display: flex;
justify-content: center;
align-items: center;
}
Method 1: Using Margin Auto
The most common method uses the margin-left and margin-right properties set to auto. This automatically distributes the available space equally on both sides
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 60%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
th, td {
border: 2px solid #4CAF50;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>ID</th>
<th>Salary</th>
</tr>
<tr>
<td>John Doe</td>
<td>12345</td>
<td>$50,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>67890</td>
<td>$55,000</td>
</tr>
</table>
</body>
</html>
A centered table with green borders appears on the page, showing employee data with proper spacing and alignment.
Method 2: Using CSS Grid
CSS Grid provides a powerful way to center tables both horizontally and vertically using the place-items property
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
}
table {
width: 400px;
border-collapse: collapse;
}
th, td {
border: 2px solid #2196F3;
padding: 12px;
text-align: center;
}
th {
background-color: #e3f2fd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
<td>25</td>
</tr>
<tr>
<td>Phone</td>
<td>$599</td>
<td>40</td>
</tr>
</table>
</body>
</html>
A table with blue borders is perfectly centered both horizontally and vertically in the browser window.
Method 3: Using Flexbox
Flexbox offers excellent control for centering tables with justify-content and align-items properties
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
table {
width: 450px;
border-collapse: collapse;
background-color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #ff9800;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Course</th>
<th>Duration</th>
<th>Level</th>
</tr>
<tr>
<td>JavaScript</td>
<td>6 weeks</td>
<td>Beginner</td>
</tr>
<tr>
<td>React</td>
<td>8 weeks</td>
<td>Intermediate</td>
</tr>
</table>
</body>
</html>
A styled table with an orange header and subtle shadow is centered perfectly on the page with a light gray background.
Conclusion
All three methods effectively center tables, but flexbox is often preferred for its simplicity and responsive behavior. Choose the method that best fits your layout requirements and browser support needs.
445 Views
