How to align one text with other in HTML Tables - html

Question

Please run the code snippet below and explain why the "Hey There" Text is not aligned with the "Sign Up!" text?
That is the code I used to create the table.
<div style="width: 800px; margin: 0px auto 0px auto;">
<table>
<tr>
<td width="60%" vallign="top">
<h2>Hey There</h2>
</td>
<td width="40%" vallign="top">
<br />
<br />
<h2>Sign up!</h2>
<br />
<br />
<form action="#" method="POST">
<input type="text" name="fname" size="25" placeholder="First Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Last Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="E-mail" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Password" />
<br />
<br />
<input type="submit" name="submit" value="Submit">
</form>
</td>
</tr>
</table>
</div>

Answer 1

They are not aligned for two reasons:
the vallign is not an attribute. Change it to valign
you have two line breaks <br /> above your "Sign Up!" text. Either
remove them, or add them above your <H2>Hey There</H2> text.
See my example below:
<div style="width: 800px; margin: 0px auto 0px auto;">
<table>
<tr>
<td width="60%" valign="top">
<h2>Hey There</h2>
</td>
<td width="40%" valign="top">
<h2>Sign up!</h2>
<br />
<br />
<form action="#" method="POST">
<input type="text" name="fname" size="25" placeholder="First Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Last Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="E-mail" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Password" />
<br />
<br />
<input type="submit" name="submit" value="Submit">
</form>
</td>
</tr>
</table>
</div>

Answer 2

It's because the way you have your table structured, you have one row and two columns.
Text is automatically centered vertically, so it's not lining up correctly. You have 2 options:
Either have a table that is 2x2 with the top row containing your h2's "Hey There" and "Sign Up". Try this:
<div style="width: 800px; margin: 0px auto 0px auto;">
<table>
<tr> <!--top row -->
<td width="60%">
<h2>Hey There</h2>
</td>
<td width="40%">
<br />
<br />
<h2>Sign up!</h2>
<br />
<br />
</td>
</tr>
<tr> <!-- Bottom row with form -->
<td>
<!-- Empty to make a 2x2 table -->
</td>
<td>
<form action="#" method="POST">
<input type="text" name="fname" size="25" placeholder="First Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Last Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="E-mail" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Password" />
<br />
<br />
<input type="submit" name="submit" value="Submit">
</form>
</td>
</tr>
</table>
</div>
Get rid of your <br /> tags in the cell where you have "Sign Up!" and give your <td> tags an additional styling of vertical-align: top. This will change the vertical alignment from being centered to aligning to the top so your headers will line up.

Answer 3

A table by defaults aligns vertically at the middle, the solution to that problem is to align at the top so that both the signup and hey there text can be on the same level using css instead of html
add this code in the header section to affect all tables
<style>
table, th, td {
vertical-align: top;
}
</style>

Answer 4

Please try This.
<div style="width: 800px; margin: 0px auto 0px auto;">
<table>
<tr>
<td width="60%" vallign="top">
<h2>Hey There</h2>
</td>
</tr>
<tr>
<td width="40%" vallign="top">
<br />
<br />
<h2>Sign up!</h2>
<br />
<br />
<form action="#" method="POST">
<input type="text" name="fname" size="25" placeholder="First Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Last Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="E-mail" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Password" />
<br />
<br />
<input type="submit" name="submit" value="Submit">
</form>
</td>
</tr>
</table>
</div>
Reason: You actually forgot the ending of </tr>.

Answer 5

That's because it is basic html. You will need to work on CSS. I would recommend to use bootstrap.
<div class="row">
<div class="col-md-3">
<h2> Hey There</h2>
</div>
<div class="col-md-3">
<table>
<tr>
<h2>Sign up!</h2><br /><br />
<form action= "#" method="POST">
<input type="text" name="fname" size="25" placeholder="First Name" /><br /><br />
<input type="text" name="fname" size="25" placeholder="Last Name" /><br /><br />
<input type="text" name="fname" size="25" placeholder="E-mail" /><br /><br />
<input type="text" name="fname" size="25" placeholder="Password" /><br /><br />
<input type="submit" name="submit" value="Submit">
</form>
</td>
</tr>
</table>
</div>
</div>
Hope this works for you!