为什么表格单元格中的元素之间存在空格

时间:2017-08-15 21:54:14

标签: css html5 html-table html-email

我是html的新手,事实上今天只是想出制作表格并将单元格和列组合在一起以正确放置事物的概念。

有点背景故事,我正在创建一个通讯标题,从我们的新闻通讯系统发送到电子邮件。这是为了在电子邮件中查看,从我所说的电子邮件通讯系统不支持div,所以我必须使用表。其次,我们的通讯系统不接受我所谓的(可能是错误的)" Global Css Styles"所以一切都必须排成一行。例如,当修复此问题时,无论出于何种原因,我都必须将每个元素单独对齐。

现在我的问题是,公司徽标一直向左,其他元素一直向右。除此之外,facebook,twitter和linkedin徽标之间的空间非常小。现在我尝试并试图寻找解决方案。

  • "表格单元格HTML"
  • 中元素之间的空格
  • "表格单元格html"
  • 中元素之间的空格
  • "删除html元素之间的空格" (打开了结果,但无法让它为我工作)
  • 和其他许多人......

请帮助我,我根本不明白这一点......



<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
-->
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

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

  1. 在此区域中消除HTML本身的空格和换行符。您仍然可以使用HTML注释(<!-- -->)为元素分隔元素,并在其中添加换行符。

  2. style="font-size: 0;"内嵌在保留这些图片的<td>上,看它是否消除了间隙的大小。

  3. 通过在每个链接上添加float,使用CSS style="float: left;"让链接/图像相互冲洗。

  4. 此处的解决方案#2已在社交媒体按钮部分实施(font-size: 0)以进行演示:

    &#13;
    &#13;
    <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
    -->
    &#13;
    &#13;
    &#13;