Skip to content
Related Articles

Related Articles

Improve Article
How to center a table with CSS ?
  • Last Updated : 17 Mar, 2021

Sometimes we face problems with centering tables on a web page. With the help of the CSS center element, we can center the table on our web page.

To center a table, set left and right margin to auto. (The table cannot be centered if the width is set to 100%)

Syntax:

.className {
 margin-left: auto;
 margin-right: auto;
}

HTML




<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
  
table.center {
  margin-left: auto; 
  margin-right: auto;
}
</style>
</head>
<body>
  
<h2>Center a Table</h2>
  
<p>To center a table, set left and right margin to auto:</p>
  
  
<table class="center">
   <thead>
      <tr>
          <th>Col 1</th>
          <th>Col 2</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>1.1</td>
          <td>2.1</td>
        </tr>
        <tr>
          <td>1.2</td>
          <td>2.2</td>
        </tr>
        <tr>
          <td>1.3</td>
          <td>2.3</td>
        </tr>
        <tr>
          <td>1.4</td>
          <td>2.4</td>
        </tr>
        <tr>
          <td>1.5</td>
          <td>2.5</td>
        </tr>
    </tbody>
</table>
  
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :