1

前言：表格布局/旧 html 是由于将其用于电子邮件通讯。

我正在使用表格构建简单的导航。我正在寻找的是一个 650 像素宽的表格，其中有一个标题行作为横幅，然后六个单元格等距分布在导航链接下方。现在，第二行有一个非常长的带有“关于”链接的单元格，然后下面的五个单元格在表格的右侧。只有当我在第一行有图像时才会这样做。

代码：

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

任何帮助将非常感激。

4

2 回答 2

3

您需要像这样使用 colspan：

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

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

于 2013-08-21T21:33:07.370 回答
0

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

<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-21T21:44:50.653 回答