表格样式不正确

我是html新手，我正在尝试创建表格并设置它们的样式，但它们的样式不是我想要的：http://jsfiddle.net/DpLy5/

        <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Tabeller</title>
        <style>
            body{
                padding-top: 20px;
                padding-left: 20px;
            }
        </style>
    </head>
    <body>
        <table style="border: 1px solid black;">
            <tr>
                <td style="width: 700px; height:150px; border: 1px solid black;">
                    <img src="http://placehold.it/700x150">
                </td>
            </tr>
            <tr>
                <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
                <td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
                <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
            </tr>
            <tr>
                <td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
            </tr>
        </table>
    </body>
    </html>

中间行第一列的宽度应该是 150px，但它比它更大。我不知道会是什么。有什么帮助吗？谢谢

您需要

在第一行和第三行tr上添加一个colspan='3'。当您将其设置为 700px 并且它是一列时，它会将其上方/下方的列推到相同：

http://jsfiddle.net/spacebean/DpLy5/1/

<table style="border: 1px solid black;">
    <tr>
        <td style="width: 700px; height:150px; border: 1px solid black;" colspan='3'>
            <img src="http://placehold.it/700x150">
        </td>
    </tr>
    <tr>
        <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
        <td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
        <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
    </tr>
    <tr>
        <td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;" colspan='3'></td>
    </tr>
</table>

此外，我强烈建议使用非内联样式，因为它可以更轻松地查看您正在做什么并将样式与内容分开。

http://jsfiddle.net/spacebean/DpLy5/8/

<table class='myTable'>
    <thead>
        <tr>
            <th colspan='3'>
                <img src="http://placehold.it/700x150" />
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>adad</td>
            <td class='main'>adad</td>
            <td>adad</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan='3'></td>
        </tr>
    </tfoot>    
</table>

.css：

.myTable {
    width: 700px; 
}
.myTable td, .myTable th {
  border: solid 1px black;
}
.myTable thead th {
    height:150px;  
}
.myTable tbody td {
    width: 150px; 
    height:700px; 
    background-color: #808080;
}    
.myTable tbody td.main {
    width: 400px;
    background-color: #fff;
}
.myTable tfoot td {
    height:75px;
    background-color: #808080;
}

使用类似于上tr中的td colspan="3"使第一个tr中的td跨越三列。

<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
    <img src="http://placehold.it/700x150">
</td>

JS小提琴：http://jsfiddle.net/DpLy5/3/

您需要将colspan="3"添加到第一行和最后一行...就是这样。

http://jsfiddle.net/DpLy5/6/

<table style="border: 1px solid black;">
    <tr>
        <td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
            <img src="http://placehold.it/700x150">
        </td>
    </tr>
    <tr>
        <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
        <td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
        <td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
    </tr>
    <tr>
        <td colspan="3" style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</table>

您需要 colspan 属性。colspan 属性实际上表示"让我跨越表中的此列数量"。

这意味着colspan="3"被翻译成"让我跨越表中的 3 列"

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span

但是，根据您的 JSFiddle，您正在尝试为布局创建栅格。通过使用table来实现这一点是不行的，这是一个主要的不良做法。

这是因为表是您放入数据的东西，而整个布局不是数据。

设置和布局的最佳方法是使用 Div。 http://www.w3schools.com/html/html_layout.asp

相关内容

最新更新

热门标签：