您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>HTML语言>>>9--HTML语言-表格的色彩
9--HTML语言-表格的色彩
发表日期:2007/6/25 16:19:00 出处:未知 作者:未知 发布人:DND0756 已被访问 1195

表格进阶


+ 表格的色彩

表元的背景色彩和背景图象
<th bgcolor=#>
<th background="URL">注;只能用于IE

#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
代码如下
<table border>
<tr><th bgcolor=Yellow>黄色</th>
    <th bgcolor=Red>红色</th>
    <th rowspan=2 background="http://dnd0756.16789.net/domName/dnd0756/20068311624639607.gif">.gif</th>
<tr bgcolor=white><td>A</td><td>B</td>
</table>
例式
黄色 红色 .gif
A B

表格边框的色彩 注;只能用于IE
<table bordercolor=#>

代码如下
<table cellspacing=5 border=5 bodercolor=#ffaa00>
<tr><th>内容</th><th>内容</th><th>内容</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>
例式
内容 内容 内容
A B C

表格边框色彩的亮度控制 注;只能用于IE
<table bordercolorlight=#>
<table bordercolordark=#>

代码如下
<table cellspacing=5 border=5 
     bordercolorlight=White bordercolordark=Maroon>
<tr><th>内容</th><th>内容</th><th>内容</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>
例式
内容 内容 内容
A B C

+表格的分组显示 注;只能用于IE

按行分组
<thead> ... </thead> - 表的题头
<tbody> ... </tbody> - 表的正文
<tfoot> ... </tfoot> - 表的脚注

代码如下
<table border>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
例式
内容内容内容
ABC
DEF

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

代码如下
<table border width=160>
<colgroup align=left>
<colgroup align=center>
<colgroup align=right>
     <thead>
          <tr><th>内容</th><th>内容</th><th>内容</th>
     </thead>
     <tbody>
          <tr><td>左</td><td>中</td><td>右</td>
          <tr><td>左</td><td>中</td><td>右</td>
     </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>内容</th><th>内容</th><th>内容</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>
例式

内容内容内容
ABC
DEF

+ 表格中边框的显示 注;只能用于IE

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

代码如下
<table border frame=box>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
例式
内容内容内容
ABC
DEF

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

代码如下
<table border frame=above>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
例式
内容内容内容
ABC
DEF

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

代码如下
<table border frame=above>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
例式
内容内容内容
ABC
DEF

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

代码如下
<table border frame=hsides>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
例式
内容内容内容
ABC
DEF

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

代码如下
<table border frame=vsides>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
例式
内容内容内容
ABC
DEF

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

代码如下
<table border frame=above>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
例式
内容内容内容
ABC
DEF

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

代码如下
<table border frame=rhs>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
例式
内容内容内容
ABC
DEF

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

代码如下
<table border frame=void>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
例式
内容内容内容
ABC
DEF

+ 表格中分隔线的显示 注;只能用于IE

显示所有分隔线 <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>文字内容</td>
     </tbody>
</table>
例式
内容内容内容
ABC
DEF
文字内容

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

代码如下
<table border frame=groups>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
<tr><td rowspan=3 align=right>文字内容</td>
     </tbody>
</table>
例式
内容内容内容
ABC
DEF
文字内容

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

代码如下
<table border frame=rows>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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><
 <tr><td rowspan=3 align=right>文字内容</td>
     </tbody>
</table>/PRE>
例式 
内容内容内容
ABC
DEF
文字内容

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

代码如下
<table border frame=cols>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
 <tr><td rowspan=3 align=right>文字内容</td>
     </tbody>
</table>
例式
内容内容内容
ABC
DEF
文字内容

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

代码如下
<table border frame=none>
<thead>
     <tr><th>内容</th><th>内容</th><th>内容</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>
 <tr><td rowspan=3 align=right>文字内容</td>
     </tbody>
</table>
例式
内容内容内容
ABC
DEF
文字内容

返回--HTML语言
编辑-- 山  林

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

小憩园 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:山林