html中的表格

html中的表格

1. 表格

   <table>
       <caption>标题</caption>
       <thead>
           <tr>
               <th>标题一</th>
               <th>标题二</th>
           </tr>
       </thead>
   
       <tbody>
           <tr>
               <td>内容一</td>
               <td>内容二</td>
           </tr>
       </tbody>
   
       <tfoot>
           <tr>
               <td>表脚一</td>
               <td>表脚二</td>
           </tr>
       </tfoot>
   </table>
   

2. 指定列宽

   <table>
       <tr>
           <th>head1</th>
           <th>head2</th>
           <th>head3</th>
       </tr>
   
       <tr>
           <td>11</td>
           <td>12</td>
           <td>13</td>
       </tr>
   
       <tr>
           <td colspan="3">2</td>
       </tr>
   
       <tr>
           <td rowspan="2">3</td>
           <td>311</td>
           <td>312</td>
       </tr>
   
       <tr>
           <td>321</td>
           <td>322</td>
       </tr>
   </table>
   

3. 使用colgroup和col指定列样式

   <table>
       <colgroup>
           <col span="1" style="background-color:red">
           <col span="1" style=" 100px">
           <col style="background-color:yellow">
       </colgroup>
       <tr>
           <th>标题一</th>
           <th>标题二</th>
           <th>标题三</th>
       </tr>
       <tr>
           <td>a</td>
           <td>b</td>
           <td>c</td>
       </tr>
   </table>
   

4. 使用scope暗示th是啥

   <table>
       <thead>
           <tr>
               <td></td>
               <th scope="col">标题一</th>
               <th scope="col">标题二</th>
           </tr>
       </thead>
   
       <tbody>
           <tr>
               <th scope="row">标题三</th>
               <td></td>
               <td></td>
           </tr>
   
           <tr>
               <th scope="row">标题四</th>
               <td></td>
               <td></td>
           </tr>
       </tbody>
   </table>