表格

表格

1,结构化表格

 1 <body>
 2     <table>
 3         <thead>
 4             <tr>
 5                 <th scope="col">QUARTER</th>
 6                 <th scope="col">1993</th>
 7                 <th scope="col">1994</th>
 8                 <th scope="col">1995</th>
 9             </tr>
10         </thead>
11         <tbody>
12             <tr>
13                 <th scope="row">Q1</th>
14                 <td>22</td>
15                 <td>33</td>
16                 <td>44</td>
17             </tr>
18             <tr>
19                 <th scope="row">Q2</th>
20                 <td>55</td>
21                 <td>66</td>
22                 <td>77</td>
23             </tr>
24         </tbody>
25         <tfoot>
26             <th scope="row">TOTAL</th>
27             <td>77</td>
28             <td>99</td>
29             <td>121</td>
30         </tfoot>
31     </table>
32 </body>

2,让单元格跨多列或多行

 1 <body>
 2     <table>
 3         <thead>
 4             <tr>
 5                 <th scope="rowgroup">QUARTER</th>
 6                 <th scope="col">1993</th>
 7                 <th scope="col">1994</th>
 8                 <th scope="col">1995</th>
 9             </tr>
10         </thead>
11         <tbody>
12             <tr>
13                 <th scope="row">Q1</th>
14                 <td>22</td>
15                 <td colspan="2">44</td>
16             </tr>
17             <tr>
18                 <th scope="row">Q2</th>
19                 <td>55</td>
20                 <td>66</td>
21                 <td>77</td>
22             </tr>
23         </tbody>
24         <tfoot>
25             <th scope="row">TOTAL</th>
26             <td>77</td>
27             <td>110</td>
28             <td>121</td>
29         </tfoot>
30     </table>
31 </body>

 

posted @ 2015-12-27 18:16  liaoali  阅读(162)  评论(0编辑  收藏  举报