包含相关父内容的嵌套表

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>元素。