How to put table in the center of the page using CSS?
HtmlCssHtml TableCenterHtml Problem Overview
I am using the following code. How to put 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>
Html Solutions
Solution 1 - Html
html, body {
width: 100%;
}
table {
margin: 0 auto;
}
Example JSFiddle
Vertically aligning block elements is not the most trivial thing to do. Some methods below.
Solution 2 - Html
You can try using the following CSS:
table {
margin: 0 auto;
}
Solution 3 - Html
1) Setting horizontal alignment to auto in CSS
margin-left: auto; margin-right: auto;
2) Get vertical alignment to centre of the page add 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>
Solution 4 - Html
<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>
Solution 5 - Html
If you where asking about the table to complete center, like some thing in total center., you can apply the following code.
margin: 0px auto;
margin-top: 13%;
this code in css will let you put your table like floating. Tell me if it helps you out.
Solution 6 - Html
You can use "display: flex;".
body{
margin: 0;
height: 100vh;
width: 100vw;
display: flex; /* WIDTH and HEIGHT are required*/
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
</head>
<body>
<table border>
<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>
Solution 7 - Html
simply put it in the div then control that div whit css:
<div class="your_position">
<table>
</table>
</div>