如何处理复杂的行和列间距

Question

我有一张桌子，我无法理解设计，因为我不熟悉行和colspans。我试过看http://www.w3schools.com/html/html_tables.asp但是给出了一个非常简单的例子

您能告诉我如何设计表头以及如何将数据插入其中。感谢

Answer 1

<table border="1"><!-initialize the table-->

<!--make the outer talbe-->
<!--tr means table row-->
<tr><!-- 1st row-->
  <!-- colspan 5 means the total column on your table--> 
  <th colspan="5" >Inner Table</th> 
</tr>

<tr><!-- 2nd row-->    
    <!--th means table header-->
    <th colspan="2">Conner</th><!--span the table header cell for 2 column-->
    <th rowspan="2">Header2 </th><!--span the table header cell for 2 rows-->
    <th colspan="2"> Header3</th><!--span the table header cell for 2 column-->
</tr>

<tr><!-- 3rd row-->
  <th>Header4</th><!--header 4-->
  <th>Header5</th><!--header 5-->
  <th>Header6</th><!--header 6 : this because we already span our header 2 cell for 2 rows-->
  <th>______</th><!--empty cell-->
</tr>

<tr> <!-- 4th row-->
  <th>Header7</th><!--header 7-->
  <!-- td means table data-->
  <td rowspan="2">two tall</td><!-- data on 2nd column : span data cell for 4th and 5th rows--> 
  <td>List can be table data</td><!-- add data into (3+4) column : 4th row-->  
  <td colspan="2">two wide</td><!-- add data into (5+6) columns : 4th row -->
</tr>

<tr>  <!-- 5th row-->
  <td>Html icon</td><!-- add data into 1st column 5th row-->
  <td>a url in a table</td><!-- add data into (3+4) column 5th row-->
  <td>item1</td><!-- add data into 5th column 5th row-->
  <td>item2</td><!-- add data into 6th column 5th row-->
 </tr>
  

</table>

有关单元格和行的更多详细信息 http://www.corelangs.com/html/tables/tables.html