How do I center forms inside a table? - html

Question

The below code works for what I need (three horizontal buttons), except it is not centered. It sits on the left side of the screen. I did some research and couldn't fix it, and also tried a tableless design using "float" and "display:inline" and just can't get it centered. Help please!
<table>
<td>
<tr>
<form method="get" action="index.php"><button type="submit">Home</button></form>
<form method="get" action="signup"><button type="submit">Create Account</button></form>
<form method="get" action="login"><button type="submit">Login to Account</button></form>
</tr>
</td>
</table>

Answer 1

As other people mentioned <td> should be inside <tr>. By default <form> is displayed as block element. Change it to inline-block.
table {
border: 1px solid red;
width: 100%;
}
td {
border: 1px solid green;
text-align: center;
}
form {
display: inline-block;
}
<table>
<tr>
<td>
<form method="get" action="index.php">
<button type="submit">Home</button>
</form>
<form method="get" action="signup">
<button type="submit">Create Account</button>
</form>
<form method="get" action="login">
<button type="submit">Login to Account</button>
</form>
</td>
</tr>
</table>

Answer 2

The <tr> (rows) should be on the outside
<table>
<tr>
<td>
<form method="get" action="index.php"><button type="submit">Home</button></form>
</td>
<td>
<form method="get" action="signup"><button type="submit">Create Account</button></form>
</td>
<td>
<form method="get" action="login"><button type="submit">Login to Account</button></form>
</td>
</tr>
</table>
jsFiddle Demo

Answer 3

Inverse the tr and td in the html.
<table>
<tr>
<td>
<form method="get" action="index.php"><button type="submit">Home</button></form>
</td>
<td>
<form method="get" action="signup"><button type="submit">Create Account</button></form>
</td>
<td>
<form method="get" action="login"><button type="submit">Login to Account</button></form>
</td>
</tr>
</table>
And try adding this to css
td {
text-align: center;
}
And don't forget to set the width of your table ! (100% for all the window)