HTML标记语法之表格元素

2022-01-29 00:00:30

语法与语义：

　　<table>和</table>定义表格的开始和结束

　　<thead>和</thead>定义表格头部的开始和结束

　　<tbody>和</tbody>定义表格主体开始和结束

　　<tfoot>和</tfoot>定义表格脚注的开始和结束

　　<tr>和</tr>定义表行的开始和结束

　　<td>和</td>定义表列（单元格）的开始和结束

　　<th></th>定义标题栏，和<td>级别相同（文字加粗、居中）。

1.table的属性集

属性	作用
bgcolor	设置表格背景色
background	设置表格背景图片
border	设置边框宽度，默认为0
cellpadding	设置单元格与内容之间的距离，默认值为2
cellspacing	设置单元格之间的距离，默认值为2
bodercolor	设置边框颜色
bodercolorlight	置边框亮部分的颜色（boder大于等于1时有效）
bodercolordark	设置边框暗部分的颜色（boder大于等于1时才有效）
align	设置表格对齐格式（left、center、right）
width	设置表格宽度，单位用绝对像素和百分比
height	设置表格高度，单位用绝对像素和百分比

2.tr的属性集

属性	作用
width	设置行宽度
height	设置行高度
bgcolor	设置行的背景颜色
align	设置水平对齐方式(left/right/center)
valign	设置行垂直对齐方式（top、middle、bottom）

3.td的属性集

属性	作用
width	设置单元格宽度
height	设置单元格高度
bgcolor	设置单元格的背景颜色
background	background
align	设置水平对齐方式(left/right/center)
valign	设置行垂直对齐方式（top、middle、bottom）
rowspan	设置行合并数目
colspan	设置列合并数目
nowarp	设置在单元格中不换行

4.立体表格实现原理

表格的亮边框和暗边框颜色进行对比。

5.细线表格效果的实现原理

1.将表格的boder设为0.

2.给表格设置背景颜色为细线颜色

3.給表格设置单元格背景为白色

4.給表格设置单元格之间的距离为细线宽度

6.table的边框设置及其效果

属性名称	属性值	说明
frame（border>0）	void	不显现表格的边线
	above	只显现表格上边线
	below	只显现表格下边线
	hsides	只显现表格上下边线
	vsides	只显现表格左右边线
	lhs	只显现表格的左边线
	vhs	只显现表格的右边线
	border/box	显现表格的所有边线
rules	rows	只显示横行的格框线
	cols	只显示直行的格框线
	all	显示所有的格框线
	groups	表示列组合水平部分
	none	不显示任何格框线

7.表格结构化格式

　　<table>

　　　　<thead>表头区</thead>

　　　　<tbody>表体区</tbody>

　　　　<tfoot>表尾区</tfoot>

　　</table>

8.直列化格式：<colgroup><colgroup>（<col>与<colgroup>的功能完全一样）

属性名称	属性值	说明
align	left	靠左
	center	靠中
	right	靠右
valign	top	靠上
	middle	靠中
	bottom	靠下
span	数字	直列数
bgcolor	颜色	背景颜色

　　

　　例如：想把一个表格的第n列的颜色改变，可以这样做：

　　　　<colgroup span=”n-1”></colgroup>

　　　　<colgroup bgcolor=”你想的颜色”></colgroup>

9.表格的标题：

　　<table>

　　　　<caption>标题名</caption>

　　</table>

属性名称	属性值	说明
align	top	标题在表格上方
	bottom	标题在表格下方
	left	标题在表格左方
	right	标题在表格右方