表格代码、标签及属性
表格标签属性
表格通用格式: <TABLE属性名="属性值"><TR属性名="属性值"><TD属性名="属性值">文字或图片</TD></TR> </TABLE>
<表格标签名 属性名="属性值"><行标签 属性="属性值"><列标签 属性="属性值">表中元素</列标签></行标签></表格标签名>
表格标签属性: <table属性="属性值"></table>
align="水平对齐": center 中 left 左 right 右
valign="垂直对齐": top 上 middle:中 bottom 下
background="背景图案":图片的地址
bgcolor="背景颜色":各种颜色代码
border="边框宽度":数字
bordercolor="边框颜色":各种颜色代码
cellpadding="单元格内容与单元格边框之间的距离":数字
cellspacing="单元格之间的距离":
height="表格高度":绝对值(数字)相对值(%)
width="表格宽度":绝对值(数字)相对值(%)
bordercolorlight="表格边框向光部分的颜色":各种颜色代码
bordercolordark="表格边框背光部分的颜色":各种颜色代码
使用 bordercolorlight 或 bordercolordark 时,
bordercolor将会失效,即不能同时使用。
frame="边框显示值" 表格外框线的显示方式
box 显示整个表格边框
void 不显示表格边框
hsides 只显示表格的上下边框
vsides 只显示表格的左右边框
alove 只显示表格的上边框
below 只显示表格的下边框
lhs 只显示表格的左边框
rhs 只显示表格的右边框
rules="分隔线值" 分隔线的显示状态
all 显示所有分隔线
groups 只显示组与组的分隔线
rows 只显示行与行的分隔线
cols 只显示列与列的分隔线
none 所有分隔线都不显示
行标签的属性: <tr属性="属性值"></tr>
align 行内容的水平对齐
valign 行内容的垂直对齐
bgcolor 行的背景颜色
bordercolo 行的边框颜色
bordercolorlight 行的亮边框颜色
bordercolordark 行的暗边框颜色
单元格的属性:即表头标签<th></th>和列标签<td></td>的属性,它们都位于<tr></tr>之间。
其格式和属性是:<th属性="属性值"></th> <td属性="属性值"></td>
width/height 单元格的宽和高,接受绝对值(如 80)及相对值(如 80%)。
colspan 单元格向右打通的栏数
rowspan 单元格向下打通的列数
align 单元格内字画等的摆放贴,位置(水平),可选值为: left, center, right。
valign 单元格内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom。
bgcolor 单元格的底色
bordercolor 单元格边框颜色
bordercolorlight 单元格边框向光部分的颜色
bordercolordark 单元格边框背光部分的颜色
background 单元格 背景图片
<TD rowspan="合并行数"></TD>:数字 即,跨多行
<TD colspan="合并列数"></TD>:数字 即,跨多列
行分组有:表头标签 <thead></thead> 属性和<th><td>标签一样。
表格主体标签 <tbody></tbody> 属性和<th><td>标签一样。
尾注标签 <tfoot>
列分组标签: <colgroup 属性="属性值">
span="该组包含的列数":数字
align="对齐": left 左, center 中, right 右。
行列同时分组(见实例)
表格标题标签: <caption属性="属性值">标题文字</caption>
align="水平对齐": left 左, center 中, right右
valign="垂直对齐": top:向上 middle:向中 bottom:向下
<caption>应放在<table>标签后,在表格行标签<tr>标签之前。
<caption>标签的默认属性是标题位于表格的上方中间位置。
在html页面中,使用表格排版是通过嵌套来完成的。由总表格规划整体的结构,由嵌套的表格负责各个子栏目的排版,并插入到表格的相应位置,这样就可以使页面的各个部分有条不紊,互不冲突,看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚,都设置了有边框。
细线表格: 是指高为一像素一行一列的单元格。
<table height=""width="500"border="1"cellspacing="0"cellpadding="0">
<tr><td aling="对齐"></td></tr></table>
表格代码编辑
行数列数:
一行一列: <TABLE BORDER=1><TR><TD>1</TD></TR></TABLE>
1 |
一行三列: <TABLE BORDER=1><TR><TD>1</TD><TD>2</TD><TD>3</TD></TR></TABLE>
1 | 2 | 3 |
1 | 2 | 3 |
4 | 5 | 6 |
合并栏位:
合并一行: <TABLE BORDER=1><TR><TD COLSPAN=3>1</TD></TR>1 | ||
4 | 5 | 6 |
合并一列: <TABLE BORDER=1><TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>5</TD><TD>6</TD></TR></TABLE>
1 | 2 | 3 |
5 | 6 |
栏位对齐:
表格大小: <TABLE WIDTH="100" BORDER="1" HEIGHT="60"><TR><TD>1</TD></TR></TABLE>
1 |
</TR></TABLE>
1 |
靠上方或靠下方:<TABLE WIDTH="100" BORDER="1" HEIGHT="60"><TR><TD ALIGN=CENTER
VALIGN=TOP>1</TD></TR></TABLE>
1 |
背景底色:
表格背景颜色:原始码 | 呈现结果 | ||||
<TABLE BORDER="1" BGCOLOR=#FFCC33> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR></TABLE> |
|
一列背景色: 原始码 呈现结果
<TABLE BORDER="1" ><TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR></TABLE>
1 2 3 4
一栏背景色:原始码 | 呈现结果 | ||||
<TABLE BORDER="1" ><TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR></TABLE> |
|
用图片来作背景,只要将BGCOLOR=#色码换成BACKGROUND="图片地址"就行了。
表格框线:
框线粗细:原始码 | 呈现结果 | |
<TABLE BORDER=5><TR><TD>1</TD></TR></TABLE> |
|
框线颜色:原始码 | 呈现结果 | |
<TABLE BORDER="5" BORDERCOLOR="#0080FF" > <TR><TD>1</TD></TR></TABLE> |
|
框线阴影、亮面颜色:原始码 | 呈现结果 | |
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97"> <TR><TD>1</TD></TR></TABLE> |
|
表格栏距 :
表格栏位格线之间的距离:原始码 | 呈现结果 | ||
<TABLE BORDER="1" CELLSPACING="5"> <TR><TD>1</TD><TD>2</TD></TR></TABLE> |
|
内文距格线距离:一般而言内定值为2,不过我建议设定为4比较漂亮。
表格栏位格线之间的距离:原始码 | 呈现结果 | ||
<TABLE BORDER="1" CELLSPACING="5"> <TR><TD>1</TD><TD>2</TD></TR></TABLE> |
|
栏位之间的距离:一般而言内定值为2,不过我通常习惯设为 0 。
常用表格实例
四行四列表格+边框+行列分组
<TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900FF">
<THEAD bgcolor="#FFFFCC">
<TR><TH>姓名</TH><TH>性别</TH><TH>专业</TH><TH>分数</TH>
<TR>
</THEAD>
<COLGROUP SPAN=2 ALIGN=CENTER> 列分组
<COLGROUP ALIGN=LEFT> 列分组
<COLGROUP ALIGN=RIGHT> 列分组
<TBODY bgcolor="#FFCCFF"> 主体标签
<TR>
<TD>咚 咚</TD><TD>男</TD><TD>计算机</TD><TD>85</TD>
</TR>
<TR>
<TD>喃 喃</TD><TD>女</TD><TD>园 林</TD><TD>94</TD>
</TR>
<TR>
<TD>依 依</TD><TD>女</TD><TD>微波通信</TD><TD>87</TD>
</TR>
</TBODY>
</TABLE>
姓名 | 性别 | 专业 | 分数 |
---|---|---|---|
咚 咚 | 男 | 计算机 | 85 |
喃 喃 | 女 | 园 林 | 94 |
依 依 | 女 | 微波通信 | 87 |
一行两列表格中元素的排版
<table height="高度"width="宽度"border="边框">
<tr>
<td align="居中"><a href="链接的网址"></a><img src= "图片的地址" width="宽度"height=
"高度"></td>
<td align="居中" valign="居下"><img src="图片的地址" width="宽度"height="高度">
</td></tr></table>
第一列中图片加链接居中,第二列中图片居中下。
表格背景图加向上滚动文字
<TABLE align=center background="背景图片地址"border=0 cellPadding=0 cellSpacing=0 borderColor=#ffff00 width="400" height=300>
<TBODY>
<TR>
<TD align="right" valign="top"><br><marquee direction="up" scrollAmount=1 height=25 width=180><FONT face=黑体 color=#ffooff size=4>文字</FONT></MARQUEE>
</TD></TR></TBODY></TABLE>
评论