为什么我的 table 单元格中的元素之间有 space

Why is there space between elements within my table cell

我是 html 的新手,实际上就在今天才弄明白制作表格以及组合单元格和列以正确放置事物背后的概念。

一点背景故事,我正在创建一份时事通讯 header 从我们的时事通讯系统发送到电子邮件。这是为了在电子邮件中查看,据我所知,我们的电子邮件通讯系统不支持 div,因此我必须使用 Table。其次,我们的时事通讯系统不接受我所说的(可能是错误的)"Global Css Styles",所以一切都必须符合要求。例如,当这是固定的时,无论出于何种原因,我都必须将每个元素分别对齐到中心。

现在对于我的问题,公司标志一直在左边,其他元素一直在右边。除了 facebook、twitter 和 linkedin 徽标之间都有一个非常小的 space。现在我试了又试,一直在寻找解决办法。

请帮帮我,我完全不明白....

<table id="Header" width="700" height="75" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
  <td rowspan="2">
    <a href="https://www.linktechs.net/productcart/pc/home.asp" target="_blank">
      <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderLTILogoWeb.png" height="75" width="250">
    </a>
  </td>
  
  <td valign="top" align="right" width="" height="36">
    <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_01.png" width="135" height="36">
      <a href="https://www.facebook.com/linktechnologiesinc/" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_02.png" width="42" height="36">
      </a>
      <a href="https://twitter.com/linktechsdotnet" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_03.png" width="38" height="36">
      </a>
      <a href="https://www.linkedin.com/company-beta/9211300/" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_04.png" width="41" height="36">
      </a> 
    </td>
  </tr>
 
  <tr align="right">
    <td colspan="3" align="right" valign="top">
      <a href="tel:314-7350270" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_05.png" width="113" height="39">
      </a>
      <a href="mailto:sales@linktechs.net" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_06.png" width="143" height="39">
      </a>
    </td>
  </tr>
</table>


<!--LINKS TO HEADER FILES IN ORDER
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderLTILogoWeb.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_01.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_02.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_03.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_04.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_05.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_06.png
-->

HTML 代码中 <img><a> 元素之间的实际 spaces 正在成为每个图标之间的可见间隙。有几种方法可以解决此问题:

  1. 消除space和HTML本身的换行符。您仍然可以 space 使用 HTML 注释 (<!-- -->) 组织元素,并在其中放置换行符。

  2. style="font-size: 0;" 内联到包含这些图像的 <td> 上,看看它是否消除了间隙的大小。

  3. 使用 CSS float 让 links/images 相互齐平,将 style="float: left;" 放在每个 link 上。

这是在社交媒体按钮部分实施(font-size: 0)的解决方案 #2 以供演示:

<table id="Header" width="700" height="75" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td rowspan="2">
      <a href="https://www.linktechs.net/productcart/pc/home.asp" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderLTILogoWeb.png" height="75" width="250">
      </a>
    </td>

    <td valign="top" align="right" width="" height="36" style="font-size: 0;">
      <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_01.png" width="135" height="36">
      <a href="https://www.facebook.com/linktechnologiesinc/" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_02.png" width="42" height="36">
      </a>
      <a href="https://twitter.com/linktechsdotnet" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_03.png" width="38" height="36">
      </a>
      <a href="https://www.linkedin.com/company-beta/9211300/" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_04.png" width="41" height="36">
      </a>
    </td>
  </tr>

  <tr align="right">
    <td colspan="3" align="right" valign="top">
      <a href="tel:314-7350270" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_05.png" width="113" height="39">
      </a>
      <a href="mailto:sales@linktechs.net" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_06.png" width="143" height="39">
      </a>
    </td>
  </tr>
</table>


<!--LINKS TO HEADER FILES IN ORDER
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderLTILogoWeb.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_01.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_02.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_03.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_04.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_05.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_06.png
-->