Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to center a table with CSS?
The <table> tag is used to create the traditional component called tables in HTML. For designing web pages, it is essential to understand how to improve the overall visualization of the design. Aligning the table in the center is one such important aspect. This tutorial will teach us how to center the table with CSS.
Use The margin-left and margin-right Properties
This is a popular method to center align the table element in HTML and CSS. CSS's margin-left and margin-right properties are used to set an element's left and right margins, respectively. The margins create space outside the element's border, effectively pushing the element away from other elements on the page.
The values for the properties can be set using length values (e.g., px, em, cm), percentages, or the predefined values auto, inherit, or initial.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table-container,
th,
td {
border: 2px solid rgb(96, 100, 218);
}
.table-container {
width: 70vw;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table class="table-container">
<th>Name</th>
<th>id</th>
<th>Salary</th>
<tr>
<td>Suranjan</td>
<td>12475142</td>
<td>32000</td>
</tr>
</table>
</body>
</html>
Explanation
The code is an HTML file that creates a table with three columns: Name, id, and Salary. The table has a class "table-container" width of 70% of the viewport width and is centered on the page. The table header cells (Name, id, and Salary) and the table cells have a 2px solid border with a color of rgb(96, 100, 218).
The table has one row of data that contains the name "Suranjan", an id of 12475142, and a salary of 32000.
Use The grid Property
Another popular method is to use the grid property to center align the table. Grids are two-dimensional elements of HTML and CSS that we can use to create rows and columns. We can use the place-items property of the grid to center align the table if we first declare the table as a grid element. The place-items property actually center aligns the grid horizontally and vertically.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table-container,
th,
td {
border: 2px solid rgb(96, 100, 218);
}
.table-container {
width: 70vw;
}
body{
display: grid;
place-items: center;
}
</style>
</head>
<body>
<table class="table-container">
<th>Name</th>
<th>country</th>
<th>Occupation</th>
<tr>
<td>Tom Holland</td>
<td>USA</td>
<td>Software Developer</td>
</tr>
</table>
</body>
</html>
Explanation
This is a basic HTML code that creates a table with three columns - Name, country, and Occupation. The table has one row of data with values for Name (Tom Holland), country (USA), and Occupation (Software Developer).
The CSS styles defined in the head section of the HTML set the border of the table, the table cells (th, td), and the table itself (class="table-container") to 2px solid with a color of RGB (96, 100, 218). The width of the table is set to 70vw (70% of the viewport width). The body section is set to display as a grid and center the items on the page.
Use The Flexbox Property
Another very popular method is using CSS's flexbox property to center align the tables. The flexbox is a responsive element of HTML and CSS. The flexbox has certain properties, such as alien-items, justify-content, etc., which we can use to center the table. Programmers usually find this method the most convenient way to center the table.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table-container,
th,
td {
border: 2px solid rgb(96, 100, 218);
}
.table-container {
width: 70vw;
}
body{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<table class="table-container">
<th>Name</th>
<th>class</th>
<th>Subject</th>
<tr>
<td>Suranjan</td>
<td>12</td>
<td>Mathematics</td>
</tr>
</table>
</body>
</html>
Explanation
The code is an HTML file that creates a table with three columns: Name, id, and Salary. The table has a class "table-container" width of 70% of the viewport width. The table header cells (Name, id, and Salary) and the table cells have a 2px solid border with a color of rgb(96, 100, 218). The table has one row of data that contains the name "Suranjan", an id of 12475142, and a salary of 32000.
The body of the HTML document has the CSS style display: flex, which makes the body a flex container. The CSS style flex-direction: row sets the direction of the flex container's items to be in a row. The CSS style align-items and justify-content centers the items vertically and horizontally, respectively.
Conclusion
In this article, we have understood how to center the table with the help of CSS. We saw the usage of margin properties, grid, flexbox, etc., in this tutorial. Among all the methods discussed, one should use the flexbox. This is because flex boxes are more convenient and are responsive to UI elements.
159 Views
