Table has some tr with bigger height - html

Question

As you can see in this fiddle
Fiddle
The table starts with all the rows having the same height but later they have bigger heights, why is that?
This is just some portion of the table, please check the fiddle
<table border="2" cellpadding="0" cellspacing="0"
height="190">
<tbody>
<tr bgcolor="#ffffcc">
<td class="Normal" style="width: 116px;"
height="16" valign="top">
<p style="" align="center"><strong><font
face="Arial, Helvetica, sans-serif" size="2">
<span
style="font-size: 10pt; font-family: Arial; color: blue"> <font
color="#000066"> FECHA</font></span></font></strong></p>
</td>
<td class="Normal" height="16" valign="top"
width="90">
<p style="" align="center"><strong><font
face="Arial, Helvetica, sans-serif" size="2">
<span
style="font-size: 10pt; font-family: Arial;"> <font
color="#000066">Número</font></span></font></strong></p>
</td>
<td colspan="3" class="Normal" height="16"
valign="top" width="357">
<p style="" align="center"><strong><font
color="#990000" face="Arial, Helvetica, sans-serif"
size="2"><span
style="font-size: 10pt; font-family: Arial; color: blue"> <font
color="#000066">Variaciones</font></span></font></strong></p>
</td>
</tr>
<tr>
<td class="Normal" style="width: 116px;"
height="22" valign="top">
<div align="center"></div>
</td>
<td class="Normal" bgcolor="#ffffcc"
height="22" valign="top" width="90">
<p style="" align="center"><strong><font
color="#000066" face="Arial, Helvetica, sans-serif"
size="2"><span
style="font-size: 10pt; font-family: Arial; color: blue">Indice</span></font></strong></p>
</td>
<td class="Normal" bgcolor="#ffffcc"
height="22" valign="top" width="357">
<p style="" align="center"><strong><font
color="#000066" face="Arial, Helvetica, sans-serif"
size="2"><span
style="font-size: 10pt; font-family: Arial; color: blue">Mensual</span></font></strong></p>
</td>
<td class="Normal" bgcolor="#ffffcc"
height="22" valign="top" width="357">
<p style="" align="center"><strong><font
face="Arial, Helvetica, sans-serif" size="2">
<span
style="font-size: 10pt; font-family: Arial; color: blue">Acum.
del Año</span></font></strong></p>
</td>

Answer 1

This happens because some TD tags have P tags inside them. Use span instead.
Do this:
<tr>
<td class="Normal" style="width: 116px;" height="13" valign="top">
<span style="" align="center"><strong style="font-weight: 400;"><font face="Arial, Helvetica, sans-serif" size="2">
<span style="font-family: Arial;">31/01/<a name="2009">2009</a></span></font></strong></span>
</tr>
Instead of:
<tr>
<td class="Normal" style="width: 116px;" height="13" valign="top">
<p style="" align="center"><strong style="font-weight: 400;"><font face="Arial, Helvetica, sans-serif" size="2">
<span style="font-family: Arial;">31/01/<a name="2009">2009</a></span></font></strong></p>
</td>
</tr>

Answer 2

The reason why the row with 28/02/2009 and the rows below that are higher is very simple:
in the rows above 28/02/2009, the first table cell has no <p> element;
in the row with 28/02/2009 and those below it, the first table cell has a <p> element.
I assume that the HTML code was created in a WYSIWYG editor; that would explain why it is so bloated. The code can be made much smaller by removing all direct formatting from the HTML code and replacing it with CSS style rules. By direct formatting, I mean things like
align="center" height="1" valign="top" width="90" on the <td> elements,
style="font-weight: 400;" on the <strong> elements inside the <td> elements,
the entire <span style="font-size: 8.5pt; font-family: Tahoma;">...</span> elements,
the entire <font face="Arial" size="2">...</font> elements (except for their content, obviously).
You would then end up with something like the following:
<tr>
<th>28/02/2009</th>
<td>113,59</td>
<td>0,57</td>
<td>6,81</td>
<td>14,56</td>
</tr>
Then, you need to make up your mind about the font face, the font size, etc., because some of the direct formatting was contradictory (Tahoma on the span elements, Arial on font elements, ...) and create CSS rules for the table.

Answer 3

I would just use css to set the height of the tr elements:
tr {
height: 40px; /* or whatever else */
}
EDIT: you can also try setting the height of td:
td {
height: 40px;
}