韩前成html表格详解 学会这些你就是表格高手了Word格式.docx
- 文档编号:17507026
- 上传时间:2022-12-06
- 格式:DOCX
- 页数:14
- 大小:17.58KB
韩前成html表格详解 学会这些你就是表格高手了Word格式.docx
《韩前成html表格详解 学会这些你就是表格高手了Word格式.docx》由会员分享,可在线阅读,更多相关《韩前成html表格详解 学会这些你就是表格高手了Word格式.docx(14页珍藏版)》请在冰豆网上搜索。
在缺省情况下,如果不设置表格的边界,表格是不显示边界的。
要显示表格的边界,可使用border这个属性。
表格的表头
用<
th>
来表示表格的表头,表头的字是粗体显示的。
有表头的表格:
姓名<
/th>
电话<
传真<
BillGates<
55577854<
55577855<
竖直方向的表头:
空的单元格
如果表格的单元格<
之间没有内容,那么这个单元格的边界是不会被显示出来的,尽管整个表格已设置边界值。
要显示这个单元格的边界,可以插入一个&
nbsp;
空格符。
注意:
空格符要用&
bsp;
是一个HTML特别字符,参见HTML特别字符(HTMLCharacterEntities)。
有标题的表格
这个示例演示如何用<
caption>
在一个表格上加上标题。
6"
表格标题<
/caption>
包含多列或多行的单元格
这个示例演示如何用colspan,rowspan设置多列或者多行的单元格。
用colspan属性,设置包含多列的单元格;
用rowspan这个属性,设置包含多行的单元格。
用colspan属性,设置包含多列的单元格:
thcolspan="
2"
联系方式<
用rowspan这个属性,设置包含多行的单元格:
throwspan="
单元格里的内容
单元格<
里面的内容。
单元格的内容可以是文字,图片,超链接,Form,表格等。
单元格内容与单元格边界之间的距离
cellpadding属性值设置为3的表格:
cellpadding="
3"
第一<
行<
第二<
这个示例教你如何用cellpadding这个属性设置单元格内容与单元格边界之间的距离。
单元格之间的距离
Cellspacing属性值设为2的表格:
cellspacing="
这个示例教你如何用cellspacing这个属性设置单元格之间的距离。
如果表格里没有设置cellspacing属性,缺省情况下,cellspacing值为1。
设置表格的背景颜色和背景图片
给表格设置背景颜色:
bgcolor="
red"
给表格加背景图片:
background="
../images/html_tutorials/background.gif"
这个示例演示如何用bgcolor属性设置表格的背景颜色,如何用background属性为表格添加背景图片。
设置单元格的背景颜色和背景图片
单元格背景色:
tdbgcolor="
tdbackground="
这个示例演示如何用bgcolor属性设置单元格的背景颜色,如何用background属性为单元格添加背景图片。
背景颜色常用rrggbb16进制RGB数码,或者是下列预定义色彩名称:
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
单元格内容的对齐方式
tablewidth="
350"
border="
thalign="
center"
分数<
期中考试<
期末考试<
tdalign="
left"
姐姐<
right"
250.10<
50000.20<
菊花<
1000.00<
5000.45<
jack<
2000.40<
500.00<
黄新<
300.50<
800.65<
这个示例教你如何用align属性设置单元格的对齐方式。
对齐方式包括:
左,中,右(left,center,right);
上,中,下,齐(top,middle,bottom,baseline)。
baseline表示文本的基线与表格的中线对齐。
也就是文本出现在表格的中上部而不是正中央。
如果文字不大的话,效果和middle差不多,比middle稍微靠上一点。
高级表格代码
表格边框颜色代码
tablebordercolor=#>
tablecellspacing=5border=5bodercolor=#ffaa00>
Food<
Drink<
Sweet<
A<
B<
C<
FoodDrinkSweet
ABC
表格边框色彩的亮度控制
tablebordercolorlight=#>
tablebordercolordark=#>
tablecellspacing=5border=5bordercolorlight=Whitebordercolordark=Maroon>
表格分组显示代码
按行分组
thead>
...<
/thead>
-表的题头(Header)
tbody>
/tbody>
-表的正文(Body)
tfoot>
/tfoot>
-表的脚注(Footer)
tableborder>
D<
E<
F<
DEF
按列分组
colgroupalign=#>
#=left,right,center
tableborderwidth=160>
colgroupalign=left>
colgroupalign=center>
colgroupalign=right>
列的属性控制
colspan=#>
#=从左数起,具有指定属性的列的列数
colalign=#>
colgroup>
colalign=centerspan=2>
表格边框显示/隐藏代码
显示所有4个边框<
tableframe=box>
tableborderframe=box>
只显示上边框<
tableframe=above>
只显示下边框<
tableframe=below>
只显示上、下边框<
tableframe=hsides>
只显示左、右边框<
tableframe=vsides>
只显示左边框<
tableframe=lhs>
只显示右边框<
tableframe=rhs>
不显示任何边框<
tableframe=void>
表格中分割线的显示
显示所有分隔线<
tablerules=all>
tableborderrules=all>
tdrowspan=3align=right>
Total$-00.0<
FoodDrinkSweetABCDEFTotal$-00.0
只显示组(Groups)与组之间的分隔线<
tablerules=groups>
FoodDrinkSweetABCDEFTotal$-00.0只显示行与行之间的分隔线<
tablerules=rows>
Total$-00.0
只显示列与列之间的分隔线<
tablerules=cols>
不显示任何分隔线<
tablerules=none>
----------------------
设置表格的奇偶行颜色
SCRIPTLANGUAGE="
JavaScript"
window.onload=function(){
doubleBgColor(document.getElementById("
table1"
),"
#cecece"
"
#ececec"
)
}
functiondoubleBgColor(Table,Bg1,Bg2){
for(vari=0;
i<
Table.rows.length;
i++)Table.rows[i].bgColor=i%2?
Bg2:
Bg1;
/SCRIPT>
TABLEborder=0cellpadding=1cellspacing=1id="
width="
500"
TR>
TD>
&
/TD>
/TR>
/TABLE>
head>
title>
奇偶不同色<
/title>
style>
.l1{background:
#cccccc}
.l2{background:
#f4f4f4}
/style>
script>
functioninitUl(){
vara=document.getElementsByTagName('
ul'
);
for(vari=0;
a.length;
i++){
varv=document.getElementsByTagName('
li'
varii=1;
for(varj=0;
j<
v.length;
j++){
if(v[j].parentNode==a[i]){
if(ii++%2==0){
v[j].className="
l2"
;
}
else{
l1"
/script>
/head>
bodyonload="
initUl()"
ul>
li>
1<
/li>
2<
3<
4<
5<
6<
/ul>
---------
styletype="
text/css"
!
--
.l1{background:
#ffffff}
.l2{background:
#ffffcc}
.foot_link{float:
left;
width:
959px;
.foot_linkul{margin:
30px000px;
padding:
0;
.foot_linkli{float:
margin:
1;
5px33px5px33px;
height:
15px;
line-height:
list-style-type:
none;
border:
#E4E0C81pxsolid;
--!
DIVclass="
foot_link"
友情链接<
/DIV>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 韩前成html表格详解 学会这些你就是表格高手了 韩前成 html 表格 详解 学会 这些 就是 高手