How to remove Html table Cell spaces in Html5?

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.

toss this into a [jsFiddle](http://jsfiddle.net/) – adamb Mar 18 '13 at 14:34 — adamb, Mar 18 '13 at 14:34

score 0 · Answer 1 · answered Mar 18 '13 at 14:35

0

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.

answered Mar 18 '13 at 14:35

SteveP

18,840
9
47
60

Hi Steve, thanks for your reply, the actual issue I am experiencing with is in different context. I wish I could add a screenshot. My issue is more close to [this link](http://stackoverflow.com/questions/2279396/how-to-remove-unwanted-space-between-rows-and-columns-in-table) – Naga Mar 18 '13 at 15:46
This [blog](http://webdesign.about.com/cs/tables/qt/tiptablespaces.htm) helped me understand where my issue could be at. – Naga Mar 18 '13 at 18:35

score 0 · Answer 2 · answered Mar 19 '13 at 04:04

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>

How to remove Html table Cell spaces in Html5?

2 Answers2