表不正确的风格

我是新来的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，但比它大。我不知道它会是什么。任何帮助？谢谢

来源

2013-10-22 user1924247

第二行中的第一列宽度为700px。所以第一列的宽度为700px –

您需要在第一行和第三行添加一个colspan ='3'。当你把它设置为700像素，这是一个单列它会推动一个高于/低于它一样：

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-22 09:13:53 spacebean

充分利用td使用colspan="3"类似于最后tr的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/

来源

2013-10-22 09:16:10

你需要合并单元格= “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-22 09:24:11 Amol

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

来源

2013-10-22 09:46:03 larssy1

表不正确的风格

回答

相关问题