表格进阶(TABLE ADVANCED)

爱被打了一巴掌 2022-09-20 12:33 9阅读 0赞

#  #

## 表格的色彩 ##

### 表元的背景色彩和背景图象   <th bgcolor=\#>   <th background="URL"> ![Image 1][] ###

\#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：  
Black, Olive, Teal, Red,  Blue, Maroon,  Navy, Gray,  Lime,  
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<table border>
    <tr><th bgcolor=ffaa00>Food</th>
        <th bgcolor=Red>Drink</th>
        <th rowspan=2 background="image.gif">Sweet</th>
    <tr bgcolor=white><td>A</td><td>B</td>
    </table>

<table> 
 <tbody> 
  <tr> 
   <th>Food</th> 
   <th>Drink</th> 
   <th>Sweet</th> 
  </tr> 
  <tr> 
   <td>A</td> 
   <td>B</td> 
  </tr> 
 </tbody> 
</table>

### 表格边框的色彩 ![Image 1][]<table bordercolor=\#> ###

<table cellspacing=5 border=5 bodercolor=#ffaa00>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>      
    </table>

<table> 
 <tbody> 
  <tr> 
   <th>Food</th> 
   <th>Drink</th> 
   <th>Sweet</th> 
  </tr> 
  <tr> 
   <td>A</td> 
   <td>B</td> 
   <td>C</td> 
  </tr> 
 </tbody> 
</table>

### 表格边框色彩的亮度控制 ![Image 1][]   <table bordercolorlight=\#>   <table bordercolordark=\#> ###

<table cellspacing=5 border=5 
         bordercolorlight=White bordercolordark=Maroon>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>      
    </table>

<table> 
 <tbody> 
  <tr> 
   <th>Food</th> 
   <th>Drink</th> 
   <th>Sweet</th> 
  </tr> 
  <tr> 
   <td>A</td> 
   <td>B</td> 
   <td>C</td> 
  </tr> 
 </tbody> 
</table>

## ![\+][Image 1] 表格的分组显示(Structured Table) ![Image 1][] ##

### 按行分组 <thead> ... </thead> - 表的题头(Header) <tbody> ... </tbody> - 表的正文(Body) <tfoot> ... </tfoot> - 表的脚注(Footer) ###

<table border>
    <thead>
         <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    </thead>
    <tbody>
         <tr><td>A</td><td>B</td><td>C</td>
         <tr><td>D</td><td>E</td><td>F</td>
    </tbody>
    </table>

<table>  
 <p></p>  
 <thead> 
  <tr> 
   <th>Food</th> 
   <th>Drink</th> 
   <th>Sweet</th> 
   <td>&nbsp;</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A</td> 
   <td>B</td> 
   <td>C</td> 
  </tr> 
  <tr> 
   <td>D</td> 
   <td>E</td> 
   <td>F</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 按列分组   <colgroup align=\#> \#=left, right, center ###

<table border width=160>
    <colgroup align=left>
    <colgroup align=center>
    <colgroup align=right>
         <thead>
              <tr><th>Food</th><th>Drink</th><th>Sweet</th>
         </thead>
         <tbody>
              <tr><td>A</td><td>B</td><td>C</td>
              <tr><td>D</td><td>E</td><td>F</td>
         </tbody>
    </table>

<table>  
 <p></p>     
 <thead> 
  <tr> 
   <th>Food</th> 
   <th>Drink</th> 
   <th>Sweet</th> 
   <td>&nbsp;</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A</td> 
   <td>B</td> 
   <td>C</td> 
  </tr> 
  <tr> 
   <td>D</td> 
   <td>E</td> 
   <td>F</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 列的属性控制   <col span=\#> \#=从左数起，具有指定属性的列的列数   <col align=\#> \#=left, right, center ###

<table border width=160>
    <colgroup>
         <col align=center span=2>
    <colgroup align=right>
         <thead>
              <tr><th>Food</th><th>Drink</th><th>Sweet</th>
         </thead>
         <tbody>
              <tr><td>A</td><td>B</td><td>C</td>
              <tr><td>D</td><td>E</td><td>F</td>
         </tbody>
    </table>

<table>  
 <p></p>      
 <thead> 
  <tr> 
   <th>Food</th> 
   <th>Drink</th> 
   <th>Sweet</th> 
   <td>&nbsp;</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A</td> 
   <td>B</td> 
   <td>C</td> 
  </tr> 
  <tr> 
   <td>D</td> 
   <td>E</td> 
   <td>F</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## ![\+][Image 1] 表格中边框的显示 ![Image 1][] ##

### 显示所有 4 个边框 <table frame=box> ###

<table border frame=box>
    <thead>
         <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    </thead>
    <tbody>
         <tr><td>A</td><td>B</td><td>C</td>
         <tr><td>D</td><td>E</td><td>F</td>
    </tbody>
    </table>

### 只显示上边框 <table frame=above> ###

### 只显示下边框 <table frame=below> ###

### 只显示上、下边框 <table frame=hsides> ###

### 只显示左、右边框 <table frame=vsides> ###

### 只显示左边框 <table frame=lhs> ###

### 只显示右边框 <table frame=rhs> ###

### 不显示任何边框 <table frame=void> ###

## ![\+][Image 1] 表格中分隔线(Rules)的显示 ![Image 1][] ##

### 显示所有分隔线 <table rules=all> ###

<table border rules=all>
    <colgroup><col align=center span=2>
    <colgroup align=right>
         <thead>
              <tr><th>Food</th><th>Drink</th><th>Sweet</th>
         </thead>
         <tbody>
              <tr><td>A</td><td>B</td><td>C</td>
              <tr><td>D</td><td>E</td><td>F</td>
         </tbody>
         <tbody>
              <tr><td rowspan=3 align=right>Total $-00.0</td>
         </tbody>
    </table>

<table>  
 <p></p>      
 <thead> 
  <tr> 
   <th>Food</th> 
   <th>Drink</th> 
   <th>Sweet</th> 
   <td>&nbsp;</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A</td> 
   <td>B</td> 
   <td>C</td> 
  </tr> 
  <tr> 
   <td>D</td> 
   <td>E</td> 
   <td>F</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td colspan="3" align="right">Total $-00.0</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 只显示组(Groups)与组之间的分隔线 <table rules=groups> ###

<table>  
 <p></p>      
 <thead> 
  <tr> 
   <th>Food</th> 
   <th>Drink</th> 
   <th>Sweet</th> 
   <td>&nbsp;</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A</td> 
   <td>B</td> 
   <td>C</td> 
  </tr> 
  <tr> 
   <td>D</td> 
   <td>E</td> 
   <td>F</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td colspan="3" align="right">Total $-00.0</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 只显示行与行之间的分隔线 <table rules=rows> ###

<table>  
 <p></p>      
 <thead> 
  <tr> 
   <th>Food</th> 
   <th>Drink</th> 
   <th>Sweet</th> 
   <td>&nbsp;</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A</td> 
   <td>B</td> 
   <td>C</td> 
  </tr> 
  <tr> 
   <td>D</td> 
   <td>E</td> 
   <td>F</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td colspan="3" align="right">Total $-00.0</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 只显示列与列之间的分隔线 <table rules=cols> ###

<table>  
 <p></p>      
 <thead> 
  <tr> 
   <th>Food</th> 
   <th>Drink</th> 
   <th>Sweet</th> 
   <td>&nbsp;</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A</td> 
   <td>B</td> 
   <td>C</td> 
  </tr> 
  <tr> 
   <td>D</td> 
   <td>E</td> 
   <td>F</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td colspan="3" align="right">Total $-00.0</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 不显示任何分隔线 <table rules=none> ###

<table>  
 <p></p>      
 <thead> 
  <tr> 
   <th>Food</th> 
   <th>Drink</th> 
   <th>Sweet</th> 
   <td>&nbsp;</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A</td> 
   <td>B</td> 
   <td>C</td> 
  </tr> 
  <tr> 
   <td>D</td> 
   <td>E</td> 
   <td>F</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td colspan="3" align="right">Total $-00.0</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

[Image 1]: