CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS Create a 3D text effect using HTML and CSS How to create blinking text using CSS Hover condition for a:before and a:after in CSS Difference between CSS Grid and CSS Flexbox

How to center a table in CSS

The table is used to store and arrange the data in tabular format. The data here can be of any form like text, image, links, etc. The table is made of rows and columns. We use the table in html for the tabular view of our data, but by default, the table alignment in html is towards the left. So now, if we want our table to be placed in the center, how can we do it using CSS.

We would think that the obvious and easy way might be using the align attribute on the table means <table align =" center"> or we might think that we can text-align: center on the table tag to align the table in the center.

But you're mistaken; this will not display your table in the center; instead, it will only align the text or content inside the table to the center, which we don't want.

We want to display the table in the center means the whole table with its content in the center of the web page. So, to achieve this using CSS, we can use the margin property.

Margin property in CSS can be used to set the left margin, right margin, top margin, and bottom margin.

So, for now, we want the table to be placed in the center, and for doing so, we will use margin-left and margin-right properties, and both of its values will be set to auto. If we set the margin-left and margin-right to auto, the browser on its own will adjust the table and margins and will show the table in the center.

Another way to simplify our work is to use only the margin property and set its value to auto, so now this will adjust all left, right, top, and bottom margins according to the browser and display the table in the center.

Not only this but also if we want to give some percentage width to our margin property that also can be done.

Let us now understand all this with the help of example so that it will get clearer.

Example: -

<html>    
<head>  
<style>    
table, th, td {    
border: 2px solid red;  
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
width: 800px;
text-align: center;  
font-size: 24px;  
}    
</style>    
</head>  
<body>    
<table>    
<tr>  
<th>Employee First Name</th>  
<th>Employee SurName</th>  
<th>Employee Code</th>  
<th>Employee Designation</th>  
</tr>    
<tr>  
<td>Riya</td><td>Vartak</td><td>E02</td><td>Engineer</td>  
</tr>    
<tr>  
<td>Emlon</td><td>Richard</td><td>M78</td><td>Developer</td>  
</tr>    
<tr>  
<td>Sanju</td><td>Jones</td><td>P96</td><td>Tester</td>  
</tr> 
<tr>  
<td>Myra</td><td>Vadnere</td><td>R16</td><td>DBA</td>  
</tr> 
<tr>  
<td>Smith</td><td>Joy</td><td>Y53</td><td>QA Engineer</td>  
</tr>    
</table>    
</body>  
</html> 

Output: -

How to center a table in CSS?

So now let's understand the above example. Here in the above html code, we have created a table that stores employee details like employee first name, surname, employee code, and the employee's resignation. Now we want this table to be shown in the center of the browser, so for that purpose, we have to use margin-left and margin-right, and the value for them is auto so that the browser will be showing the table in the center also for text inside the table is appearing in the center for that purpose we have used text-align: center property. Here we also have the other properties on the table like border-collapse, which will merge or collapse the two borders into one single border if we had written border-collapse: separate then two borders would have appeared one whole outside and one for the content of each cell.

Also, we have used other properties like the table's width in pixel, font size, border size and color, and so on to make our table look more attractive.



ADVERTISEMENT
ADVERTISEMENT