How to Center a Table with CSS ? Last Updated : 21 Nov, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Here are different ways to center table in CSS.1. Center a Table using margin auto propertyThe CSS margin is used to set the space around the element. The margin auto enables dynamic and equal margins from both sides and center the element. Syntaxtable { margin: auto;}By setting the margin auto the table automatically adjusts from the left and right side rendering it horizontally center on the web page. HTML <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } table { margin: auto; } </style> </head> <body> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>1.1</td> <td>2.1</td> <td>2.1</td> </tr> <tr> <td>1.2</td> <td>2.2</td> <td>2.1</td> </tr> </tbody> </table> </body> </html> Output Explanation: The margin: left and margin: right property set to auto, and that utilize the remaining spaces and keep the table in the center. 2. Centering HTML table by using Flexbox PropertyCSS flexbox Property provides a flexible way to align and distribute space among items within a container. It offers properties like display: flex for creating a flex container and justify-content, and flex to control item positioning, alignment, and sizing. The align-items property can make the table data aligned to the center.Syntax.table-container { /* Apply CSS Flexbox */ display: flex; /* Center items horizontally */ justify-content: center; /* Center items vertically */ align-items - center;} HTML <!DOCTYPE html> <html> <head> <style> .table-container { /* Apply Flexbox*/ display: flex; /* Horizontally center the Table*/ justify-content: center; /* Verticalyy center the Table*/ align-items: center; /* TO display the container box*/ height: 300px; width: 500px; border: 1px solid black; } table, th, td { border: 1px solid black; } </style> </head> <body> <!-- This is the container for Table --> <div class="table-container"> <!-- Code for Table --> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>1.1</td> <td>2.1</td> <td>2.1</td> </tr> <tr> <td>1.2</td> <td>2.2</td> <td>2.1</td> </tr> </tbody> </table> </div> </body> </html> Output Explanation: CSS flwxbox property is an advance topic of CSS, it helps us to render any HTML element in formatted way. CSS display: flex property provides a flexible way to align and distribute space among items within a container. Comment More infoAdvertise with us Next Article How to Center Text in CSS? K knockpit Follow Improve Article Tags : Web Technologies CSS Web technologies CSS-Properties CSS-Questions +1 More Similar Reads How To Style a Table with CSS? A table organizes data in rows and columns, making information easy to read and compare, like a spreadsheet or chart. To style a table with CSS, use properties like border for cell borders, padding for spacing, text-align for alignment, and background-color to color rows or headers for clarity.Appro 2 min read How to Create a Full-Width Table using CSS? Creating a full-width table using CSS involves setting the table's width to 100% and adjusting other relevant properties to ensure that it stretches across the entire width of its parent container. In this article, we will explain the approach to creating a full-width table using CSS. ApproachCreate 2 min read How to Center an Image in CSS? To center an image in CSS, we will align the image to the container horizontally and vertically as the layout requires.Center Images Horizontally1. Using text-align PropertyThe simplest way to center an image horizontally within a block-level container is to use the text-align property. This method 3 min read How to Center a Table in Google Docs Ever wish your tables in Google Docs could be the center of attention? Well, good news! Imagine your info standing tall, right in the middle, no more hiding on the sides. Google Docs tends to keep things to the left, but we're here to break the norm. In this guide, we're not just talking about cente 6 min read How to Center Text in CSS? Text Centering ensures that the text appears in the middle of a container or the entire page, which can create a balanced and visually appealing layout. CSS can provide multiple ways to achieve text centering, depending on the context, such as horizontally or vertically centering within the containe 4 min read How to Create Equal Width Table Cell Using CSS ? Creating equal-width table cells using CSS refers to adjusting the table's layout so that all columns maintain the same width. This technique ensures a consistent and organized appearance, making the table content easier to read and visually balanced.Here we are following some common approaches:Tabl 3 min read Like