How to remove Html table Cell spaces in Html5? - html

Question

I have html script as below
<header>
<div id="header">
<table class="headertable">
<tr>
<td>
<table class="headertable">
<tr>
<td colspan="2">
<div id="site-title" class="site-title">
<img src="~/Images/site-title.gif" alt="site-title", title="site-title" id="img-site-title" style="display:block" />
</div>
</td>
</tr>
<tr>
<td>
<div id="fullbannerad" class="fullbannerad">
<img src="~/Images/fullbanner.gif" alt="fullbannerad", title="fullbannerad" id="img-fullbannerad" />
</div>
</td>
<td>
<div id="halfbannerad" class="halfbannerad">
<img src="~/Images/halfbanner.gif" alt="halfbannerad", title="halfbannerad" id="img-halfbannerad" />
</div>
</td>
</tr>
</table>
</td>
<td>
<div class="site-logo">
<img src="~/Images/site-logo.gif" alt="site-logo", title="site-logo" id="img-site-logo" />
</div>
</td>
</tr>
</table>
</div>
</header>
below is the css
table.headertable {
border-spacing: 0;
border-collapse:collapse;}
.headertable td {
padding:0;}
There is a space added between td & table(nested table) elements to the page in the code below (this I checked in chrome debugger)
<td>
<table class="headertable">
How can I resolve this issue? Please suggest.

Answer 1

Extra whitepsace in your document should be ignored by the browser. If you having problems with your page layout, it won't be due to extra spaces in that position.

Answer 2

I resolved this issue by making use of nested divs with float property. HTML5 does not encourage nested tables for layout design. Ref to this link for more details. Thanks Jennifer, you made my day.
Below is my code changes
<div id="header" class="clearfix">
<div id="sitetitle" style="float:left">
<a href="/Publication/Config/title">
<img src="/images/site-title.gif" alt="site-title" , title="site-title" id="img-site-title" />
</a>
</div>
<div id="logo" style="float:right">
<a href="/Publication/Config/logo">
<img src="/images/site-logo.gif" alt="site-logo" , title="site-logo" id="img-site-logo" />
</a>
</div>
<div id="bannerad" style="float:left">
<a href="/Publication/Config/fullbanner">
<img src="/images/fullbanner.gif" alt="fullbannerad" , title="fullbannerad" id="img-fullbannerad" />
</a>
</div>
<div id="halfbannerad" style="float:right">
<a href="/Publication/Config/halfbanner">
<img src="/images/halfbanner.gif" alt="halfbannerad" , title="halfbannerad" id="img-halfbannerad" />
</a>
</div>
</div>