《HTML 语言教程--表格进阶(TABLE ADVANCED)》-傲雪梅香|你好Blog
你好Blog-傲雪梅香

傲雪梅香
http://www.nihaoblog.com/490.html 

05-5-13

HTML 语言教程--表格进阶(TABLE ADVANCED)   (转载)

转载来自:清华大学图书馆
原文出处:http://www.lib.tsinghua.edu.cn/chinese/INTERNET/HTML/Normal/table02.html
梅子 发表于:05-05-13 08:23

+ 表格的色彩

表元的背景色彩和背景图象
<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 bgcolor=white><td>A</td><td>B</td>
</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><td>A</td><td>B</td><td>C</td>      
</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><td>A</td><td>B</td><td>C</td>      
</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>
</thead>
<tbody>
     <tr><td>A</td><td>B</td><td>C</td>
     <tr><td>D</td><td>E</td><td>F</td>
</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>
     </thead>
     <tbody>
          <tr><td>A</td><td>B</td><td>C</td>
          <tr><td>D</td><td>E</td><td>F</td>
     </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>
     </thead>
     <tbody>
          <tr><td>A</td><td>B</td><td>C</td>
          <tr><td>D</td><td>E</td><td>F</td>
     </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>
</thead>
<tbody>
     <tr><td>A</td><td>B</td><td>C</td>
     <tr><td>D</td><td>E</td><td>F</td>
</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>
     </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>

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

版权声明:如本文牵涉版权问题,"你好Blog"不承担相关责任,请版权拥有者直接与文章作者联系解决。谢谢!
引用通告地址(TrackBack Ping Url)
复制引用地址 http://www.nihaoblog.com/trackback.action?itemId=7508
复制引用地址 http://www.nihaoblog.com/trackback.action?itemId=7508

评论1

发表来自:梅子
发表时间:05-05-15 10:55
电子邮件:@
评论内容:
我知道有个CSS来做表格。。
就是还没学会用过呢~
等学会了再整理出来。。。。

评论2

发表来自:web
发表时间:05-05-14 00:36
评论内容:
study

评论3

发表来自:162003
发表时间:05-05-13 16:40
电子邮件:@
评论内容:
很有用的代码谢谢了。

评论4

发表来自:伟东
发表时间:05-05-13 09:11
评论内容:
table是传统页面设计中的关键,掌握是根本,要精通才最好
用Css控制table也会达到异曲同共之妙
*评 论 人 记忆
*电子邮件 公开Email
*评论内容
(少于256字)
新发的评论置于第1页 评论1