unable to align element in a html form - php

Question

I am not able to place this astrik(*) after the text box in my code.Secondly,My form is displaying towards down.I am not able to figure out the problem.Could you please help me out.Please try to give more explanation as soon as possible.
<style>
.error {color: #FF0000;}
</style>
<?php
$firstnameErr = $lastnameErr = $emailErr = "";
$firstname = $lastname = $email = "";
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
if (empty($_POST["firstname"]))
{$firstnameErr = "Name is required";}
else
{
$firstname = test_input($_POST["firstname"]);
}
if (empty($_POST["lastname"]))
{$lastnameErr = "Name is required";}
else
{
$lastname = test_input($_POST["lastname"]);
}
if (empty($_POST["email"]))
{$emailErr = "Email is required";}
else
{
$email = test_input($_POST["email"]);
}
}
function test_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<div text align =center><h1>Eventous Info</h1></div>
<h3>Fill the Required Form:</h3>
<p><span class="error">*required field</span></p>
<table>
<form action="insert.php" method="post">
<tr>
<td>Firstname</td><td>:</td> <td><input type="text" name="firstname" >
</td>
<span class="error">* <?php echo $firstnameErr;?></span><br><br>
</tr>
<tr>
<td>Lastname</td><td>:</td><td><input type="text" name="lastname" ></td>
<span class="error">* <?php echo $lastnameErr;?></span><br><br>
</tr>
<tr>
<td>Email</td><td>:</td><td><input type="text" name="email"></td>
<span class="error">* <?php echo $emailErr;?></span><br><br>
</tr>
<tr>
<td>Phone</td><td>:</td><td><input type="text" name="number"><td><br><br>
</tr>
</table>
<input type="submit" >
</form>`

Answer 1

The <span> element with the asterisk needs to be inside a table cell (td). If you want it in the next cell over, wrap it in another <td> tag; if you want it in the field with the input, put it immediately after the input and before </td>
The way you are wrapping the colon in it's own cell makes me wonder if you're setting the table up correctly also. I would look at keeping the table to three cells per row:
<tr>
<td>Firstname:</td>
<td><input type="text" name="firstname" /></td>
<td><span class="error">* <?php echo $firstnameErr;?></span></td>
</tr>

Answer 2

You have to put the <span class="error">* <?php echo $firstnameErr;?></span> inside a table cell , like <td>my content</td>. Objects are not allowed outside cells in tables.
Also, table cells are only allowed inside rows. The structure of tables should be like this:
<table>
<tr>
<td>Row 1 Cell A</td>
<td>Row 1 Cell B</td>
<td>Row 1 Cell C</td>
</tr>
<tr>
<td>Row 2 Cell A</td>
<td>Row 2 Cell B</td>
<td>Row 2 Cell C</td>
</tr>
</table>
If you place objects anywhere else inside a table, the browsers don't know where to put them. Usually the objects are just put right above or below the table.