Question

前言：表格布局/旧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>

非常感谢任何帮助。

Answer 1

你需要像这样使用colspan：

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

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

Answer 2

另一种解决方法是定义两个单独的表，如：

<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，则不会影响标题表。

表格单元格排列不正确

2 个答案: