Within the initial row, I have incorporated four columns, while rows 2-4 contain two columns each to enhance the formatting. I am seeking a more elegant approach to address this issue and avoid triggering the validation warning. This task pertains to a school project, and while it is not overly complex, I aim to execute it accurately.
<div>
<h2>Personal Information</h2>
<form method="post">
<table class = "center">
<tr>
<td style = "text-align:right;">First Name:</td>
<td>
<input name = "fname" type = "text"
size = "25" maxlength = "20"
required autofocus>
</td>
<td>Last Name:</td>
<td>
<input name = "lname" type = "text"
size = "25" maxlength = "20">
</td>
</tr>
<tr>
<td>Email Address:</td>
<td>
<input name = "email" type = "email"
placeholder = "e.g., <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fdb7929593b99298bd98859c908d9198d39e9290">[email protected]</a>"
size = "25"
required title = "Must be a valid email address">
</td>
</tr>
<tr>
<td style = "text-align:right;">Gender:</td>
<td style = "text-align:left">
<label>Male</label>
<input name = "gender" type = "radio"
value = "Male">
<label>Female</label>
<input name = "gender" type = "radio"
value = "Female">
</td>
</tr>
<tr>
<td style = "text-align:right;">Age Group:</td>
<td style = "text-align:left">
<label>Under 21</label>
<input name = "under" type = "checkbox"
value = "under">
<label>21 - 40</label>
<input name = "to" type = "checkbox"
value = "to">
<label>Over 40</label>
<input name = "over" type = "checkbox"
value = "over">
</td>
</tr>
</table>
</form>
</div>