2012-02-16 11 views
20

テーブルの行をセクションに分割する有効な方法はありますか?そのセクションを識別するラベルが付いていますか?例えばHTMLテーブルの行をラベル付きセクションに分割します

、以下のコードのようなものが、それぞれTBODYの開始時にヘッダまたはキャプション付き(ヘッダ/字幕のみテーブルの上部に許可されているように見える)

<THEAD> 
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> </TR> 
</THEAD> 

<TBODY> 
<TR> <TD>Monday</TD> <TD>09/11/2000</TD> <TD>Kelsey</TD> </TR> 
<TR> <TD>Tuesday</TD> <TD>09/12/2000</TD> <TD>Lindsey</TD> </TR> 
<TR> <TD>Wednesday</TD> <TD>09/13/2000</TD> <TD>Randy</TD> </TR> 
<TR> <TD>Thursday</TD> <TD>09/14/2000</TD> <TD>Susan</TD> </TR> 
<TR> <TD>Friday</TD> <TD>09/15/2000</TD> <TD>Randy</TD> </TR> 
<TR> <TD>Saturday</TD> <TD>09/16/2000</TD> <TD>Lindsey</TD> </TR> 
<TR> <TD>Sunday</TD> <TD>09/17/2000</TD> <TD>Susan</TD> </TR> 
</TBODY> 

<TBODY> 
<TR> <TD>Monday</TD> <TD>09/18/2000</TD> <TD>Melody</TD>  </TR> 
<TR> <TD>Tuesday</TD> <TD>09/19/2000</TD> <TD>Christiane</TD> </TR> 
<TR> <TD>Wednesday</TD> <TD>09/20/2000</TD> <TD>Symphony</TD> </TR> 
<TR> <TD>Thursday</TD> <TD>09/21/2000</TD> <TD>Starflower</TD> </TR> 
<TR> <TD>Friday</TD> <TD>09/22/2000</TD> <TD>Miko</TD>  </TR> 
<TR> <TD>Saturday</TD> <TD>09/23/2000</TD> <TD>Cleo</TD>  </TR> 
<TR> <TD>Sunday</TD> <TD>09/24/2000</TD> <TD>Alyx</TD>  </TR> 
</TBODY> 

<TBODY> 
<TR> <TD>Monday</TD> <TD>09/25/2000</TD> <TD>Dancing Star</TD> </TR> 
<TR> <TD>Tuesday</TD> <TD>09/26/2000</TD> <TD>Dawn</TD>   </TR> 
<TR> <TD>Wednesday</TD> <TD>09/27/2000</TD> <TD>Josh</TD>   </TR> 
<TR> <TD>Thursday</TD> <TD>09/28/2000</TD> <TD>Ryan</TD>   </TR> 
<TR> <TD>Friday</TD> <TD>09/29/2000</TD> <TD>Mary Kay</TD>  </TR> 
<TR> <TD>Saturday</TD> <TD>09/30/2000</TD> <TD>Hallie</TD>  </TR> 
<TR> <TD>Sunday</TD> <TD>10/01/2000</TD> <TD>Paul</TD>   </TR> 
</TBODY> 

</TABLE> 

答えて

4

私の好ましい方法は、完全な行全体を<TH>そのスパン(colspan)を使用することです。

2

一般の人々追加の行を使用し、colspanを使用してすべての列にまたがることができます。あなたのケースでは

:そのような何かをすることの<tr><td colspan = "7">...</td></tr>

57

HTML5 specificationは、<TBODY>セクションが1つしかないと言っているわけではありません。あなたのコードはOKです。もう一つの例:

<table> 
     <thead> 
       <tr> 
         <th>Fruits</th> 
         <th>Vitamin A</th> 
         <th>Vitamin C</th> 
       </tr> 
     </thead> 

     <tbody id="section1"> 
       <tr> 
         <th>Apples</th> 
         <td>98 ui</td> 
         <td>8.4 mg</td> 
       </tr> 
     </tbody> 

     <tbody id="section2"> 
       <tr> 
         <th>Oranges</th> 
         <td>295 ui</td> 
         <td>69.7 mg</td> 
       </tr> 
       <tr> 
         <th>Bananas</th> 
         <td>76 ui</td> 
         <td>10.3 mg</td> 
       </tr> 
     </tbody> 
</table> 
+3

これは、現在の答えとしてマークされているものよりも良い答えです - –

+0

をは、複数の列にまたがっているか否かか...つ以上の '' - とは見なされませんこの。ありがとうございました。これは間違いなく顕著な答えになるはずです。 – cheshireoctopus

+1

OPは "そのセクションを識別するラベルを持つ"と言った。私はあなたのコードを覗いて、最後の2つの行が一緒に属していることを視覚的に示していません。何か不足していますか? –

関連する問題