How to place the table in the center of the page using CSS?

Question

How to place the table in the center of the page using CSS?

I am using the following code. How to place this table in the center of the page using CSS?

<html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>The Main Page</title> </head> <body> <table> <tr> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> </tr> </table> </body> </html>

+46

html css html-table center

CodeBlue Feb 22 2018-12-22T00:

source share

6 answers

Michael Robinson · Answer 1 · 2012-02-22 20:59

 html, body { width: 100%; } table { margin: 0 auto; }

JSFiddle example

Vertical alignment of block elements is not the most trivial thing. Below are some methods.

DarkAjax · Answer 2 · 2012-02-22 20:59

You can try using the following CSS:

 table { margin: 0px auto; }

user2645333 · Answer 3 · 2014-01-21 05:23

 <html> <head> <meta charset="ISO-8859-1"> <style type="text/css"> table.center { margin-left: auto; margin-right: auto; } </style> <title>Table with css</title> </head> <body> <table class="center"> <tr> <th>SNO</th> <th>Address</th> </tr> <tr> <td>1</td> <td>yazali</td> </tr> </table> </body> </html>

Gopal00005 · Answer 4 · 2015-04-15 06:19

1) Setting horizontal alignment to auto in CSS

margin-left: auto; margin-right: auto;

2) Get vertical alignment to the center of the page add the following to css

html, body { width: 100%; }

For example:

 <html> <head> <meta charset="ISO-8859-1"> <style type="text/css"> table.center { margin-left: auto; margin-right: auto; } html, body { width: 100%; } </style> <title>Table with css</title> </head> <body> <table class="center"> <tr> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> </tr> </table> </body> </html>

Alok Rajasukumaran · Answer 5 · 2015-03-16 09:30

If you ask the table to fill the center, like something in a common center, you can apply the following code.

 margin: 0px auto; margin-top: 13%;

this code in css will allow you to place your table as floating. Tell me if this helps you.

mohsen solhnia · Answer 6 · 2015-04-07 11:48

just put it in a div, then run the div command whit css:

 <div class="your_position"> <table> </table> </div>

How to place the table in the center of the page using CSS?

More articles: