《HTML教程》09章 表格(二)

---

表格的背景色
<table bgcolor=#>整个表格的背景
    <tr bgcolor=#>表格行的背景
    <th bgcolor=#>表格行的背景
    <td bgcolor=#>单元格的背景

<table border bgcolor=red> <tr> <th>苏州</th> <th>无锡</th> <th>常州</th> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table>

苏州 无锡 常州 A B C

<table border> <tr bgcolor=pink> <th>苏州</th> <th>无锡</th> <th>常州</th> </tr> <tr> <td bgcolor=red>A</td> <td bgcolor=green>B</td> <td bgcolor=blue>C</td> </tr> </table>

苏州 无锡 常州 A B C

表格背景图像
<table background=url>整个表格的背景
    <th background=url>单元格的背景
    <td background=url>单元格的背景

<table border background="image/i09_01.jpg"> <tr> <th>苏州</th> <th>无锡</th> <th>常州</th> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table>

苏州 无锡 常州 A B C

<table border> <tr> <th background=image/i09_01.jpg>苏州</th> <th>无锡</th> <th>常州</th> </tr> <tr> <td>A</td> <td>B</td> <td background=image/i09_01.jpg>C</td> </tr> </table>

苏州 无锡 常州 A B C

表格框线及色彩
<table bordercolor=#>边框的色彩 <table bordercolorlight=#>边框色彩的亮度 <table bordercolordark=#>边框色彩的暗度

<TABLE border=5 cellspacing=0 bordercolor=#ffaa00>   <TR>     <TH>苏州</TH>     <TH>无锡</TH>     <TH>常州</TH>   </TR>   <TR>     <TD>A</TD>     <TD>B</TD>     <TD>C</TD>   </TR> </TABLE>	苏州 无锡 常州 A B C
<TABLE border=5 cellspacing=5 bordercolor=#ffaa00>   <TR>     <TH>苏州</TH>     <TH>无锡</TH>     <TH>常州</TH>   </TR>   <TR>     <TD>A</TD>     <TD>B</TD>     <TD>C</TD>   </TR> </TABLE>	苏州 无锡 常州 A B C
<TABLE border=5 cellspacing=5 bordercolorlight=#ffaa00     bordercolordark=maroon>   <TR>     <TH>苏州</TH>     <TH>无锡</TH>     <TH>常州</TH>   </TR>   <TR>     <TD>A</TD>     <TD>B</TD>     <TD>C</TD>   </TR> </TABLE>	苏州 无锡 常州 A B C

表格的外框线
    <table border frame=#> #的值如下
    void: 无任何边框      hsides: 上下    vsides:左右
    box : 上下左右边框    above : 上       lhs   : 左
    boder:上下左右边框    below : 下       rhs   : 右

<TABLE border frame=#>   <TR align=left valign=top>     <TH>苏州</TH>     <TH>无锡</TH>     <TH>常州</TH>   </TR>   <TR>     <TD>A</TD>     <TD>B</TD>     <TD>C</TD>   </TR>   <TR>     <TD>D</TD>     <TD>E</TD>     <TD>F</TD>   </TR> </TABLE>

#=void #=hsides #=vsides #=box #=above #=lhs #=border #=below #=rhs 苏州 无锡 常州 A B C D E F 苏州 无锡 常州 A B C D E F 苏州 无锡 常州 A B C D E F 苏州 无锡 常州 A B C D E F 苏州 无锡 常州 A B C D E F 苏州 无锡 常州 A B C D E F 苏州 无锡 常州 A B C D E F 苏州 无锡 常州 A B C D E F 苏州 无锡 常州 A B C D E F

表格的内框线
    <table border rules=#> #的值如下
    none: 无任何内框线      rows: 横向内框线    cols:纵向内框线
    all : 所有内框线         groups: thead、tbody、tfoot、colgroup、col的内框线

<TABLE border rules=#>   <TR align=left valign=top>     <TH>苏州</TH>     <TH>无锡</TH>     <TH>常州</TH>   </TR>   <TR>     <TD>A</TD>     <TD>B</TD>     <TD>C</TD>   </TR>   <TR>     <TD>D</TD>     <TD>E</TD>     <TD>F</TD>   </TR>   <TR>     <TD>X</TD>     <TD>Y</TD>     <TD>Z</TD>   </TR> </TABLE>

#=none #=rows #=cols #=all #=groups 　 苏州 无锡 常州 A B C D E F X Y Z 苏州 无锡 常州 A B C D E F X Y Z 苏州 无锡 常州 A B C D E F X Y Z 苏州 无锡 常州 A B C D E F X Y Z 苏州 无锡 常州 A B C D E F X Y Z

横向分组
    <thead>...</thead>表的头部
    <tbody>...</tbody>表的表体
    <tfoot>...</tfoot>表的尾部
三者的顺序可以颠倒

<TABLE border rules=groups>   <TBODY>     <TR>       <TD>三月</TD>       <TD>A</TD>       <TD>B</TD>       <TD>C</TD>     </TR>     <TR>       <TD>四月</TD>       <TD>D</TD>       <TD>E</TD>       <TD>F</TD>     </TR>   </TBODY>   <TFOOT>     <TR>       <TD>合计</TD>       <TD>X</TD>       <TD>Y</TD>       <TD>Z</TD>     </TR>   </TFOOT>   <THEAD>     <TR>       <TH>月份</TH>       <TH>苏州</TH>       <TH>无锡</TH>       <TH>常州</TH>     </TR>   </THEAD> </TABLE>

月份 苏州 无锡 常州 三月 A B C 四月 D E F 合计 X Y Z

纵向分组一
    <colgroup span=#>...</colgroup>

<TABLE border rules=groups>   <colgroup span=1></colgroup>   <colgroup span=3></colgroup>   <colgroup span=3></colgroup>   <TR>     <TH>月份</TH>     <TH>苏州</TH>     <TH>无锡</TH>     <TH>常州</TH>     <TH>杭州</TH>     <TH>温州</TH>     <TH>舟山</TH>   </TR>   <TR>     <TD>三月</TD>     <TD>A</TD>     <TD>B</TD>     <TD>C</TD>   </TR>   <TR>     <TD>A</TD>     <TD>B</TD>     <TD>C</TD>   </TR>   <TR>     <TD>四月</TD>     <TD>D</TD>     <TD>E</TD>     <TD>F</TD>   </TR>   <TR>     <TD>D</TD>     <TD>E</TD>     <TD>F</TD>   </TR>   <TR>     <TD>合计</TD>     <TD>X</TD>     <TD>Y</TD>     <TD>Z</TD>   </TR>     <TD>X</TD>     <TD>Y</TD>     <TD>Z</TD>   </TR> </TABLE>

月份 苏州 无锡 常州 杭州 温州 舟山 三月 A B C A B C 四月 D E F D E F 合计 X Y Z X Y Z

纵向分组二
    <col span=#>
只有与css部分的内容结合起来使用才有效果。

<TABLE border rules=groups>   <col span=1>   <col span=3>   <col span=3>   <TR>     <TH>月份</TH>     <TH>苏州</TH>     <TH>无锡</TH>     <TH>常州</TH>     <TH>杭州</TH>     <TH>温州</TH>     <TH>舟山</TH>   </TR>   <TR>     <TD>三月</TD>     <TD>A</TD>     <TD>B</TD>     <TD>C</TD>   </TR>     <TD>A</TD>     <TD>B</TD>     <TD>C</TD>   </TR>   <TR>     <TD>四月</TD>     <TD>D</TD>     <TD>E</TD>     <TD>F</TD>   </TR>     <TD>D</TD>     <TD>E</TD>     <TD>F</TD>   </TR>   <TR>     <TD>合计</TD>     <TD>X</TD>     <TD>Y</TD>     <TD>Z</TD>   </TR>     <TD>X</TD>     <TD>Y</TD>     <TD>Z</TD>   </TR> </TABLE>

月份 苏州 无锡 常州 杭州 温州 舟山 三月 A B C A B C 四月 D E F D E F 合计 X Y Z X Y Z