My tables initially appear like this
https://i.sstatic.net/Fm4jc.png
However, when I enter information into them, they end up looking messy like this
https://i.sstatic.net/ZAPPX.png
I currently try to center my tables using relative positioning and pixel values from the top and left, as shown below
#damagetablemario {
display:none;
position:absolute;
top:700px;
left:80px;
border-collapse:collapse;
}
#damagetablemario2 {
display:none;
position:relative;
top:400px;
left:110px;
border-collapse:collapse;
}
#damagetablemario3 {
display:none;
position:relative;
top:450px;
left:540px;
border-collapse:collapse;
margin-bottom:200px;
}
<table id = "damagetablemario">
<tr>
<th>Neutral</th>
<th>Forward Tilt</th>
<th>Up Tilt</th>
<th>Down-Tilt</th>
<th>Forward-Smash</th>
<th>Up-Smash</th>
<th>Down-Smash</th>
<th>Neutral-Air</th>
<th>Forward-Air</th>
<th>Back-Air</th>
<th>Up-Air</th>
<th>Down-Air</th>
</tr>
<tr>
<td class = "Neutral">2.2% (punch)<br>1.7% (punch)<br> 4% (kick)</td>
<td class = "Forward-Tilt">7%</td>
<td class = "Up-Tilt">5.5%</td>
<td class = "Down-Tilt">5% (foot) <br> 7% (body)</td>
<td class = "Forward-Smash">17.8% (fire)<br> 14.7% (arm)</td>
<td class = "Up-Smash">14%</td>
<td class = "Down-Smash">10% (front)<br> 12% (back)</td>
<td class = "Neutral-Air">8% (clean)<br> 5% (late)</td>
<td class = "Forward-Air">12% (early)<br> 14% (clean)<br> 10%(late)</td>
<td class = "Back-Air">10.5% (clean)<br> 7% (late)</td>
<td class = "Up-Air">7%</td>
<td class = "Down-Air">1.4% (1-5 hits) <br>
5.5% (hit 6) <br>
2% (landing)
</td>
</tr>
</table>
I'm struggling to get them centered properly. Does anyone have a solution?