表格单元格不适合正确排列

前言：表格布局/旧的html是由于将此用于电子邮件通讯。表格单元格不适合正确排列

我正在用桌子建立一个简单的导航过程。我正在寻找的是一张650px宽的表格，其中有一个横幅的标题行，然后是六个单元格，它们的位置等同于导航链接的下方。现在，第二行有一个带有“ABOUT”链接的非常长的单元格，然后以下五个单元格位于表格右侧。它只有当我在第一行中有图像时才会这样做。

代码：

<!DOCTYPE html> 
<head> 
    <title></title> 
    <style> 
     #container { 
      background-color: #efefef; 
      width: 650px; 
     } 

     #row_nav { 
      width: 650px; 
     } 

     .nav_link { 
      width: 108px; 
      background-color: #AB2328; 
     } 


    </style> 
</head> 

<body> 

    <table id = "container" align="center"> 
     <tr> 
      <td> 
       <a href="#"><img src="banner.jpg"/></a> 
      </td> 
     </tr> 


     <tr id = "row_nav"> 
      <td class = "nav_link"> 
       <a href="">ABOUT</a> 
      </td> 
      <td class = "nav_link"> 
       <a href="">AGENDA</a> 
      </td> 
      <td class = "nav_link"> 
       <a href="">SPEAKERS</a> 
      </td> 
      <td class = "nav_link"> 
       <a href="">SPONSORS</a> 
      </td> 
      <td class = "nav_link"> 
       <a href="">TRAVEL</a> 
      </td> 
      <td class = "nav_link"> 
       <a href="">REGISTER</a> 
      </td> 
     </tr> 
    </table> 

</body> 
</html>

任何帮助将非常感激。

来源

2013-08-21 tim

您需要使用合并单元格像这样：

<tr> 
    <td colspan="6"> 
     <a href="#"><img src="banner.jpg"/></a> 
    </td> 
</tr>

其中6等于列其下的行数。

来源

2013-08-21 21:33:07 Dragony

更具体地说，解释发生了什么事情，该表有6个表格数据段定义，所以它试图将顶部的图像堵塞到一个表数据部分，因此一切都不正确地扭曲。使用colspan可以使用所有六个表格数据段。 – user2366842

是的，谢谢你的补充。我发现了一张图片，可以直观地解释发生了什么：http://a-pellegrini.developpez.com/tutoriels/xhtml-css/tableaux/images/colspan.png – Dragony

谢谢！我完全忘记了colspan。 – tim

另一个解决方法是定义两个单独的表，就像这样：

<table id = "header" align="center"> 
    <tr> 
     <td> 
      <a href="#"><img src="banner.jpg"/></a> 
     </td> 
    </tr> 
</table> 

<table id = "container" align="center"> 
<tr id = "row_nav"> 
     <td class = "nav_link"> 
      <a href="">ABOUT</a> 
     </td> 
     <td class = "nav_link"> 
      <a href="">AGENDA</a> 
     </td> 
     <td class = "nav_link"> 
      <a href="">SPEAKERS</a> 
     </td> 
     <td class = "nav_link"> 
      <a href="">SPONSORS</a> 
     </td> 
     <td class = "nav_link"> 
      <a href="">TRAVEL</a> 
     </td> 
     <td class = "nav_link"> 
      <a href="">REGISTER</a> 
     </td> 
    </tr> 
</table>

尽管这似乎是更多的工作，如果你决定要添加更多的CSS的表，也不会影响标题表。

来源

2013-08-21 21:44:50 user2366842

表格单元格不适合正确排列

回答

相关问题