0

我是 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 宽，但它比那个大。我不知道它可能是什么。有什么帮助吗？谢谢

4

4 回答 4

2

您需要在第一行和第三行 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;
}
于 2013-10-22T09:13:53.127 回答
1

使用与最后一个类似的方法使td第一个tr跨度三列。colspan="3"tdtr

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

于 2013-10-22T09:16:10.547 回答
1

您需要在第一行和最后一行添加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>
于 2013-10-22T09:24:11.010 回答
0

您需要该colspan属性。该colspan属性实际上是说“让我跨越表格中的这一列”。

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

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

但是，根据您的 JSFiddle，您正在尝试为您的布局制作栅格。使用table's 来实现这一点是行不通的，这是一种严重的不良做法。

这是因为表格是您放入数据的地方，而整个布局不是数据。

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

于 2013-10-22T09:46:03.460 回答