表格边框代码应用
一、表格的基本代码:
表格由<TABLE><TR><TD>和</TD></TR></TABLE>这六标签以及border这个属性组合而成,可以通过在代码中加入更多属性来实现表格的各种不同样式。
1、最简单的表格:
代码:
<TABLE border=1>
<TR><TD>表格内容</TD></TR>
</TABLE>
效果:
说明:表格内的“表格内容”可以是文字、图片、flash、链接网址等。
2 、多单元表格:
代码:
<TABLE border=1>
<TR><TD>表格内容</TD> <TD>表格内容</TD><TD>表格内容</TD></TR>
</TABLE>
效果:
3 、多行多列表格:
代码:
<TABLE border=1>
<TR><TD>表格内容</TD><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD><TD>表格内容</TD></TR>
</TABLE>
效果:
表格内容 |
表格内容 |
表格内容 |
表格内容 |
表格内容 |
表格内容 |
二、表格栏位合并的代码:
表格栏位合并基本上分为行合并和列合并两种。
1、左右栏位合并的表格:
代码:
<TABLE border=1>
<TR><TD colspan=3>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD><TD>表格内容</TD></TR>
</TABLE>
效果:
说明:首行的<TD>标签中多了一个colspan命令,这是“左右栏位合并”的属性,colspan=3的意思是“首行合并了3个单元格”,因此后面的的两个<TD>都可以省掉,因为那两格被合并了。
底行左右栏位合并的表格:
代码:
<TABLE border=1>
<TR><TD>表格内容</TD><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD colspan=3>表格内容</TD></TR>
</TABLE>
效果:
表格内容 |
表格内容 |
表格内容 |
表格内容 |
表格内容 |
表格内容 |
表格内容 |
说明:底行的<TD>标签中多了一个colspan命令,这也是“左右栏位合并”的属性,colspan=3的意思是“底行合并了3个单元格”,因此后面的的两个<TD>都也可以省掉。
2、上下栏位合并的表格:
代码:
<TABLE border=1>
<TR><TD rowspan=2>表格内容</TD><TD>
表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
</TABLE>
效果:
说明:首列的<TD>标签中则多了个rowspan命令,这是“上下栏位合并”的属性,rowspan=2的意思是“首列合并了2个单元格”。
|
评论