清华大学图书馆主页 - INTERNET 教室 - HTML 语言教程

# 表格进阶(TABLE ADVANCED)

## 表格的色彩

### 表元的背景色彩和背景图象
<th bgcolor=#>
<th background="URL">

  #=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>
    <tr bgcolor=white><td>A</td><td>B</td></tr>
    </table>

Food | Drink | Sweet
--- | --- | ---
A | B

### 表格边框的色彩
<table bordercolor=#>

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

Food | Drink | Sweet
--- | --- | ---
A | B | C

### 表格边框色彩的亮度控制
<table bordercolorlight=#>
<table bordercolordark=#>

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

Food | Drink | Sweet
--- | --- | ---
A | B | C

## 表格的分组显示(Structured Table)

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

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

Food | Drink | Sweet |
A | B | C
D | E | F |

### 按列分组
<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></tr>
         </thead>
         <tbody>
              <tr><td>A</td><td>B</td><td>C</td></tr>
              <tr><td>D</td><td>E</td><td>F</td></tr>
         </tbody>
    </table>

Food | Drink | Sweet |
A | B | C
D | E | F |

### 列的属性控制
<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></tr>
         </thead>
         <tbody>
              <tr><td>A</td><td>B</td><td>C</td></tr>
              <tr><td>D</td><td>E</td><td>F</td></tr>
         </tbody>
    </table>

Food | Drink | Sweet |
A | B | C
D | E | F |

## 表格中边框的显示

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

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

Food | Drink | Sweet |
A | B | C
D | E | F |

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

Food | Drink | Sweet |
A | B | C
D | E | F |

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

Food | Drink | Sweet |
A | B | C
D | E | F |

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

Food | Drink | Sweet |
A | B | C
D | E | F |

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

Food | Drink | Sweet |
A | B | C
D | E | F |

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

Food | Drink | Sweet |
A | B | C
D | E | F |

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

Food | Drink | Sweet |
A | B | C
D | E | F |

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

Food | Drink | Sweet |
A | B | C
D | E | F |

## 表格中分隔线(Rules)的显示

### 显示所有分隔线 <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></tr>
         </thead>
         <tbody>
              <tr><td>A</td><td>B</td><td>C</td></tr>
              <tr><td>D</td><td>E</td><td>F</td></tr>
         </tbody>
         <tbody>
              <tr><td rowspan=3 align=right>Total $-00.0</td></tr>
         </tbody>
    </table>

Food | Drink | Sweet |
A | B | C
D | E | F |
Total $-00.0 |

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

Food | Drink | Sweet |
A | B | C
D | E | F |
Total $-00.0 |

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

Food | Drink | Sweet |
A | B | C
D | E | F |
Total $-00.0 |

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

Food | Drink | Sweet |
A | B | C
D | E | F |
Total $-00.0 |

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

Food | Drink | Sweet |
A | B | C
D | E | F |
Total $-00.0 |

HTML Design Guide Main Page
Contents || Page || Font || Text Style || Image || Form || Table || Table Advanced
|| Frames || Marquee || Alternative Inline Elements
Tag Index || What's New

Network Communication Design
http://www.newasp.net/
C&P 1994-2006 Xin Yun newasp.net@gmail.com