html border center of the page - html

Question

I am trying to make an HTML page which has a table center aligned.
Now I want to have a border to the entire page but on the center.
table {
min-width: 900px;
}
html,
body {
height: 100%;
min-width: 900px;
margin: 0;
padding: 0;
}
body {
background: white;
border-style: double;
}
<table class="table" align="center">
<tr>
<td colspan="2"> <img src="logo.png" class="logo" /> </td>
<td colspan="2" align="right">
<h3>Heading</h3>
</td>
</tr>
<tr>
<td colspan="4">
<hr>
</td>
</tr>
<tr>
<td> <input type="number" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
</tr>
<tr>
<td>Student ID Number</td>
<td>Last Name</td>
<td>First Name</td>
<td>Middle Name</td>
</tr>
</table>
I am looking for something like this. http://ibb.co/gyqTY6
My content is displayed in the entire page and I like to have a border to the center of the entire page.
The above styling gives me border on the entire page but I want to have a border on the center of the entire page.

Answer 1

It is not quite clear what you want, but perhaps applying a border only to the table is what you meant.
In that case, style the table accordingly.
Edit: especially, avoid applying border to the body, this won't get you the desired result.
Minimal suggestion:
table {
min-width: 900px;
border: 1px solid #000;
}
html,
body {
height: 100%;
min-width: 900px;
margin: 0;
padding: 0;
}
<table class="table" align="center">
<tr>
<td colspan="2"> <img src="logo.png" class="logo" /> </td>
<td colspan="2" align="right">
<h3>Heading</h3>
</td>
</tr>
<tr>
<td colspan="4">
<hr>
</td>
</tr>
<tr>
<td> <input type="number" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
</tr>
<tr>
<td>Student ID Number</td>
<td>Last Name</td>
<td>First Name</td>
<td>Middle Name</td>
</tr>
</table>

Answer 2

Tables should not be used for layout. They cause the rendering of the page to be slowed down and are not semantically correct. They should only be used to render tabular data.
Also, don't use h1, h2, etc. because of the way they make the text look, use them because they are the logical start of a new section of a particular importance. Any text can be styled to look like any other text.
So, the above two points really are talking about "semantics". The HTML tags you use should describe the data they convey, not the look of the data on the page. This allows for the data to be consumed anywhere, by any device and that device should understand what the data is. CSS is meant to make that data look how you'd like it to look. Don't confuse the two.
Now, you can "style" content to be displayed as a table using the CSS display property, which allows you to avoid using the <table> element and the related elements as well. But, your layout looks like simple columns, so you could approach this in a number of ways, but here's one:
html, body {
margin:0;
padding:0;
}
body {
background: white;
border: double;
}
.header h1 {
font-size:1.3em;
}
.wrapper {
border: 1px double black;
margin:25% 5px; /* Adding the same margin to top and bottom creates vertical alignment */
padding:10px;
}
.column {
display:inline-block;
}
<!-- By placing everything in a wrapper element, you can move it and style it easily -->
<div class="wrapper">
<div class="header">
<img src="logo.png" class="logo">
<h1>Heading</h1>
</div>
<div>
<hr>
</div>
<div class="column">
<input type="number" class="input"><br>
<span>Student ID Number</span>
</div>
<div class="column">
<input type="text" class="input"><br>
<span>Last Name</span>
</div>
<div class="column">
<input type="text" class="input"><br>
<span>First Name</span>
</div>
<div class="column">
<input type="text" class="input"><br>
<span>Middle Name</span>
</div>
</div>

Answer 3

Are you looking for something like this
.container{
border: 1px solid;
margin: 3%;
padding: 3%;
margin-right: 18%;
margin-left: 18%;
}
table{
margin:0 auto;
}
table th{
min-width:20%;
}
body{
background:red;
}
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" border="1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>