I have some old HTML code without a CSS framework, so I'm using tables for layout. My current challenge is trying to horizontally center my form, while keeping the form fields left-aligned. Essentially, I want to achieve the following design:
+--------------------------------------------------+
| Welcome |
| Please tell us about yourself |
| |
| first name last name |
| +----------------+ +----------------+ |
| | | | | |
| +----------------+ +----------------+ |
| |
| email address |
| +--------------------------------------+ |
| | | |
| +--------------------------------------+ |
| [Submit] |
| |
+--------------------------------------------------+
This is how my current HTML code look like:
<table style="width:100%;">
<tr>
<td style="width:10%;"></td>
<td style="width:80%; text-align:center;">
<h1>Welcome</h1>
<p>Please tell us about yourself</p>
<div>
<form>
<table style="text-align:left;">
<tr>
<td>first name</td>
<td>last name</td>
</tr>
<tr>
<td><input id="firstName" /></td>
<td><input id="lastName" /></td>
</tr>
<tr><td colspan="2">email address</td></tr>
<tr><td colspan="2"><input id="emailAddress" /></td></tr>
<tr><td colspan="2"><input type="submit" value="Submit" />
</table>
</form>
</div>
</td>
<td style="width:10%;"></td>
</tr>
</table>
Although everything renders on the screen correctly, with "Welcome" and "Please tell us about yourself" centered as expected, the form itself remains aligned to the left edge. How can I centralize the form within the second cell?