包含相關父內容的嵌套表

Question

存在語義問題。我有一個標準頁眉和頁腳的基本表。每行都包含一個訂單，每行下面我需要顯示另一個表，其中包含與該訂單相關的成本分解。此外，這些內部表將有一個jQuery的手風琴隱藏和顯示在需要時顯示（但我只是集中在HTML現在）

我怎樣才能在語義HTML方法呢？

<table> 
    <thead> 
     <th>Package number</th> 
     <th>Date placed</th> 
     <th>Placed by</th> 
     <th>Total cost</th> 
    </thead> 
    <tr> 
     <td>1</td> 
     <td>Weds</td> 
     <td>Jonno</td> 
     <td>£15</td> 
    </tr> 
    <tr> 
     <td colspan="4"> 
      <table> 
       <thead> 
        <th>Part number</th> 
        <th>Description</th> 
        <th>Qty shipped</th> 
        <th>Weight</th> 
       </thead> 
       <tbody> 
        <td>18293</td> 
        <td>Blah blah blah</td> 
        <td>72</td> 
        <td>20Kg</td> 
       </tbody> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Thurs</td> 
     <td>Jonno</td> 
     <td>£1</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Fri</td> 
     <td>Jonno</td> 
     <td>£7</td> 
    </tr> 
</table> 

這裏有一個小提琴：http://jsfiddle.net/yuW7f/ - 這裏的問題是，包含內部表中的行，是完全無關的順序排

Answer 1

如果您正在尋找您可以使用相關的組父元素行，您可以使用<tbody>元素。一個表可以有多個<tbody>元素：

<table> 
    <thead> 
     <tr> 
      <th>Package number</th> 
      <th>Date placed</th> 
      <th>Placed by</th> 
      <th>Total cost</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Weds</td> 
      <td>Jonno</td> 
      <td>£15</td> 
     </tr> 
     <tr> 
      <td colspan="4"> 
       <table> 
        <thead> 
         <tr> 
          <th>Part number</th> 
          <th>Description</th> 
          <th>Qty shipped</th> 
          <th>Weight</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>18293</td> 
          <td>Blah blah blah</td> 
          <td>72</td> 
          <td>20Kg</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
    <tr> 
     <td>2</td> 
     <td>Thurs</td> 
     <td>Jonno</td> 
     <td>£1</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Fri</td> 
     <td>Jonno</td> 
     <td>£7</td> 
    </tr> 
</table> 

無論這是否使你的代碼更語義正確是值得商榷的。您還可以爲您的行類指示行是摘要行還是詳細行，或者指示與其他行的關係的屬性。從語義上來說，它對我來說似乎很好。

順便說一句，你錯過了一些<tr>元素。 A <tbody>,<thead>或<tfoot>元素不替代<tr>元素。