How to center a table with CSS ?
In this article we will learn about how to center a table with the help of CSS, 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 the left and right margins to auto. (The table cannot be centered if the width is set to 100%)
Syntax:
.className {
margin-left: auto;
margin-right: auto;
}Example: In this example, we are using the above-explained method.
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:
Please Login to comment...