html表格

1.表格的基本格式

基本格式：

<table>

<tr>

<th>...</th>

<th>...</th>

<th>...</th>

</tr>

<tr>

<td>...</td>

<td>...</td>

<td>...</td>

</tr>

</table>

功能：<table>...</table>用来声明表格开始与结束

            <tr>...</tr>用来设置表格的行

            <th>...</th>用来设置标题栏位（文字默认加粗 居中）

            <td>...</td>用来设置数据栏位（文字默认居左）

 

2.<table>标签下的常用属性

属性名称	属性值	说明
border	像素	设置表格的边线（默认为0）
cellspacing	像素	绝对设置，存储格框线宽度（默认为2）
	百分比	相对设置，存储格框线宽度
cellpadding	像素	绝对设置，数据与框线的距离
	百分比	相对设置，数据与框线的距离
width	像素	绝对设置，像素表示表格宽度
	百分比	相对设置，百分比表示表格宽度
height	像素	绝对设置，像素表示表格高度
	百分比	相对设置，百分比表示表格高度
align	left	表格往左靠（默认）
	center	表格往中靠
	right	表格往右靠
bgcolor	英文/十六	表格的背景颜色
background	URL	表格的背景图片
summary	字符串	用来描述表格数据说明（相当于注释）
bordercolor	英文/十六	边框的颜色
bordercolorlight	同上	边框的亮色（外面左上，里面右下）
bordercolordark	同上	边框的暗色（外面右下，里面左上）

 

 

 

3.<table>标签下的边框设置

属性名称	属性值	说明
frame （显示外边线） 该属性必须在border的属性值不为0的状态下使用！	void	不要显现表格的外边线
	above	只要显现出表格的上边线
	below	只要显现出表格的下边线
	hsides	只要显现出表格的上下边线
	vsides	只要显现出表格的左右边线
	lhs	只要显现出表格的左边线
	rhs	只要显现出表格的右边线
	border/box	显现出表格的所有边线
rules （显示内边线）	rows	只显示出横行的格框线
	cols	只显示出直行的格框线
	all	显示全部格框线
	groups	表示列组合水平部分
	none	不显示任何格框线

 

4.<tr><th><td>标签下的常用属性

属性名称	属性值	说明
width（不适用于<tr>）	像素	绝对设置，以像素值设置宽
	百分比	相对设置，以百分比设置宽
Height(适用于<tr>)	像素	绝对设置，以像素值设置高
	百分比	相对设置，以百分比设置高
bgcolor	英文/十六	数据栏的颜色设置
align(水平方向)	left	数据靠左
	center	数据靠中
	right	数据靠右
valign(垂直方向)	top	数据靠上
	middle	数据靠中
	bottom	数据靠下
Nowrap(<tr>中无效果，<td>有效果)	无	在单元格中换行

 

5.拆分与合并单元格

属性名称	属性值	说明
colspan	数字	向两边扩展栏位
rowspan	数字	向下扩展栏位

注意：合并单元格时，先把不需要的单元格删除，然后在需要合并的单元格后面加上需要合并的列数。

例如：1、<td colspan=“2” align=“center”>小明</td>

                  表示将此单元格左右合并两列。（向两边扩展栏位）

            2、<td rowspan=“2” align=“center”>小明</td>

                 表示将此单元格上下合并两列。（向下扩展栏位）

 

6.表格的结构化、直列化、标题

（1）结构化格式：

<table>

<thead>...</thead> ------表头区

<tbody>...</tbody> ------表体区

...................

<tfoot>...</tfoot> ------表尾区

</table>

 

（2）直列式格式：<colgroup>...</colgroup>

属性名称	属性值	说明
align	left	靠左
	center	靠中
	right	靠右
valign	top	靠上
	middle	靠中
	bottom	靠下
span	数字	直列数目
width	像素/百分比	宽度
bgcolor	英文/十六	颜色

个别直列设置    格式：<col>功能完全和<colgroup>一样

（3）表格的标题

<table>

    <caption>...</caption>

</table>

<caption>下的属性值有：

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

 

7.表格的嵌套

注意：不主张使用html来实现表格的嵌套。