现在的位置: 首页 >> 网页设计 >> HTML >> HTML语言教程之七:表格进阶
添加时间:2005-11-11 来源:网教中国 作者: 未知
HTML语言教程之七:表格进阶


表格的色彩

表元的背景色彩和背景图象
<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>

[page]
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



[1] [2]  下一页


上一篇:HTML语言教程之八:多窗口页面 下一篇:HTML语言教程之六:表格(TABLE)标记
大部分文章摘自网上,如有侵犯您的权益请与我们联系,我们会第一时间进行处理,谢谢! [ 打印文章 ] [ 关闭窗口 ]
推荐文章
·模仿QQ和MSN消息提示的效果
·动态HTML教程(五)
·表格(Table)
·用好活动字幕标记—marquee
·HTML语言的语法基础及规则
·中文网页制作中段落缩进的方法
·HTML彻底剖析(2)标记一览
·快速精通掌握框架的使用
·感受Web标准,第一次DIV+CSS
·网页制作,使用HTML常范的五个错
相关文章
·HTML语言教程之八:多窗口页面
·HTML语言教程之九:会移动的文字
·HTML语言教程之十:多媒体页面
·HTML语言教程之六:表格(TABLE)
·HTML语言教程之五:表单(FORM)标
·HTML语言教程之四:图像(IMAGE)
·HTML语言教程之三:文字布局(TEX
·HTML语言教程之二:字体(FONT)标
·HTML语言教程之一:页面(PAGE)标
最新文章
·让自己的网站也拥有权威IT报价系
·在网页中实现细线边框的两种方法
·ASP脚本循环语句
·小偷程序原理和简单示例
·精彩:用Asp实现QQ在线查询
·“mailto”的六则应用技巧
·meta标签之详解
·为你的网页链接加上快捷键
·如何在网页中制作虚线表格
·连动下拉菜单
Google