使用html和css设计复杂的表格布局

Question

我正在尝试使用html和css设计下表，如何继续使用它。提前谢谢。

Answer 1

此解决方案将使您不必使用嵌套表。诀窍是你真的有四个行，而不是三个，并且使用colspan和rowspan。

请注意，您需要为height设置td，以确保它们均匀。

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  height: 30px;
}

<table>
  <tr>
    <td colspan="2"></td>
    <td rowspan="2"></td>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td rowspan="2"></td>
  </tr>
  <tr>
    <td rowspan="2"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 2

你可以尝试这个：

<强> HTML

<table>
<tr>

   <td>
   <table>

   <tr>
        <td colspan="2">Th</td>
    </tr>
   <tr>
        <td>Th</td>
        <td>Th</td>
    </tr>   
  <tr>
        <td>Th</td>
        <td>Th</td>
    </tr>   
   </table>
   </td>

        <td>Th</td>
</tr>
</table>

<强> CSS

table 
{
width:100%;
height:100px;
text-align:center;
 border:2px solid gray;
 border-collapse: collapse;
}
td
{
border:2px solid gray;
}

.container
{
  width:100%;
}
.container .header
{
  width:100%;
  height:200px;
  background:#5076BB;
}
.container .slider
{
  width:100%;
  height:500px;
  background:#5076BB;
}

DEMO HERE

UPDATED DEMO HERE

Answer 3

阅读教程：http://www.w3schools.com/html/html_tables.asp

特别阅读有关属性rowspan =“”和colspan =“”

的部分

示例：

Class myClass = Class.forName(field); Constructor constructor = myClass.getConstructor() Object o = constructor.newInstance()

<td colspan="2">This table data will span two columns</td>