使用html和css設計複雜的表格佈局

Question

我想用html和css設計下面的表格，我該如何處理它。先謝謝你。

Answer 1

該解決方案將使您不必使用嵌套表格。訣竅是，你真的有四個行，而不是三個，並利用colspan和rowspan。

請注意，您需要爲td設置height以確保它們均勻。

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 = 「」 和列跨度= 「」

實施例：

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

<td rowspan="2">This table data will span two rows</td>