Question

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

Answer 1

您需要在第一行和第三行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;
}

Answer 2

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

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

Answer 3

您需要在第一行和第一行添加 colspan =＆＃34; 3＆＃34; 。最后一行......那就是它。

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>

Answer 4

您需要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

桌子没有正确的样式

4 个答案: