A question about CustomLayout that not comply with HTML

Application:

public class TestLayoutsApplication extends Application {
	private static final long serialVersionUID = 2255770134219573908L;
	@Override
	public void init(){
		setTheme("mythemes");
		final Window mainWindow=new Window("Myproject Application");
		CustomLayout custom = new CustomLayout("Login");
		custom.setSizeFull();
		mainWindow.setContent(custom);
		setMainWindow(mainWindow);
	}
}

Login.html:

<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#e5f6cf">&nbsp;</td>
  </tr>
  <tr>
    <td height="508" bgcolor="red" align="center" valign="top" >
    </td>
  </tr>
  <tr>
    <td  bgcolor="#a2d962">&nbsp;</td>
  </tr>
</table>

Results not what I wanted.The middle red area is higher than 508.I want the middle is 508 and the rest to fill the remaining area.