Как удалить Html табличное пространство ячейки в Html5?

Question

У меня есть HTML-скрипт, как показано ниже

            <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>

ниже CSS

table.headertable {
border-spacing: 0;
border-collapse:collapse;}

.headertable td {
padding:0;}

Между элементами td & table(вложенная таблица) на странице добавлен пробел в коде ниже (это я проверил в отладчике Chrome)

<td>
   <table class="headertable">

Как я могу решить эту проблему? Пожалуйста, предложите.

Answer 1

Дополнительный пробел в вашем документе должен игнорироваться браузером. Если у вас возникли проблемы с макетом страницы, это не будет связано с дополнительными пробелами в этой позиции.

Answer 2

Я решил эту проблему, используя вложенные div-ы со свойством float. HTML5 не поощряет вложенные таблицы для дизайна макета. Ссылка на эту ссылку для более подробной информации. Спасибо Дженнифер, ты сделал мой день.

Ниже мои изменения кода

            <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>