Why are my table rows not aligned?

I have 开发者_运维技巧an html table

For some reason, in the second row, the two cells are not horizontally aligned. What is the cause of this?

<input type="checkbox" id="3" onClick="change(this)" checked="">
<label for="2"><font color="800080"> Ice Cover (Days)</font></label></p>

In this cell you have label for input with id="2" but in cell is input id="3" change with <label for="3">

this should fix it. you had an extra td tag and an extra br tag in there, and I also gave the title of the table its own row.

<div id="menu" STYLE="position:absolute; left:25px">
    <!--toggles visibility of graph lines-->
    <table>
        <tr>
            <td>
                <p><b>Display: </b>
                </td>
        </tr>
        <tr>
            <td><input type="checkbox" id="0"
                onClick="change(this)" checked="">
                    <label for="0"> <font color="556b2f">Freeze up (Julian Days)</font></label>
            </td>
            <td><input type="checkbox" id="1"
                onClick="change(this)" checked="">
                    <label for="1"> <font color="000080">Break up (Julian Days)</font></label>
            </td>
       </tr>
       <tr>
            <td><input type="checkbox" id="2" 
                onClick="change(this)" checked="">
                    <label for="2"><font color="2e8b57"> Max Ice Thickness (cm)</font></label>
            </td>
            <td><input type="checkbox" id="3" 
                onClick="change(this)" checked="">
                    <label for="2"><font color="800080"> Ice Cover (Days)</font></label></p>
            </td>
        </tr>
    </table>
 </div>