第六章使用表格
目录
1、创建表格
表格是网页排版布局不可缺少的一款工具,能否熟练的运用表格将直接影响到网页设计的好坏。
1.1表格的基本构成
表格由行、列和单元格3部分组成,一般通过3个标记来创建,分别是表格标记table、行标记tr和单元格标记td。表格的各种属性都要在表格的开始标记<table>和结束标记</table>之间才有效。
- 行:表格中的水平间隔。
- 列:表格中的垂直间隔。
- 单元格:表格中行与列相交所产生的区域。
语法:
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
</table>
<table>和</table>分别表示表格的开始和结束。而<tr>和</tr>则分别表示行的开始和结束,在表格中包含几组<tr>......</tr>就表示该表格为几行。<td>和</td>表示单元格的起始和结束
1.2设置表格的标题caption
可以使用<caption>来设置标题单元格,表格的标题一般位于整个表格的第一行。一个<table>表格只能含有一个表格标题。
语法:
<caption>表格的标题</caption>
1.3表头th
表格的标头<th>是<td>单元格的一种变体,实质上仍是一种单元格。它一般位于第一行和第一列,用来表明这一行或列的内容类别。在一般情况下,浏览器会以粗体和居中样式显示<th>元素中的内容。
语法:
<table>
<tr>
<th>80</th>
......
</tr>
<tr>
<td>单元格的内容</td>
<td>单元格的内容</td>
</tr>
</table>
<th>元素的起始标记必须有,但是结尾标记是可选的。
2、表格的基本属性
2.1表格的宽度width
可以使用表格的width属性来设置表格的宽度。如果不指定表格宽度,浏览器就会根据表格内容的多少自动调整宽度。
语法:
<table width="表格宽度">
表格宽度的值可以是像素值,也可以为百分比。
2.2表格高度height
可以使用表格的height属性来设置表格的高度。
语法:
<table height="表格的高度">
表格的高度既可以是像素值,也可以是百分比。
2.3表格对齐方式align
可以使用表格的align属性来设置表格的对齐方式。
语法:
<table align="对齐方式">
3、表格的边框
表格的边框可以很粗,也可以很细,可以使用border属性来设置表格的边框效果,包括边框的宽度、边框的颜色等。
3.1表格边框宽度border
默认情况下如果不指定border属性,则浏览器将不显示表格边框。
语法:
<table border="边框宽度">
3.2表格边框颜色bordercolor
语法:
<table border="边框宽度" bordrcolor="边框颜色">
边框宽度不能为0,边框颜色为十六进制的颜色值
3.3内框宽度cellspacing
表格的内框宽度属性cellspacing用于设置表格内部每个单元格之间的间距。
语法:
<table cellspacing="内框宽度">
内框宽度的单位是像素。
3.4表格内文字与边框间距cellpadding
语法:
<table cellpadding="文字与边框距离值">
4、表格背景
还可以为表格设置不同的背景来美化表格,包括表格的背景颜色和背景图像的设置。
4.1表格背景颜色bgcolor
表格的背景颜色属性bgcolor是针对整个表格,bgcolor定义的颜色可以被行、列或单元格定义的背景颜色所覆盖。
语法:
<table bgcolor="背景颜色">
4.2表格背景图像
语法:
<table background="背景图像地址">
5、表格的行属性
5.1高度控制height
语法:
<tr height="行的高度">
5.2边框颜色bordercolor
语法:
<tr bordercolor="边框的颜色">
5.3行背景bgcolor、background
行的bgcolor或background属性仅作用于当前行。这里设置的bgcolor颜色可以覆盖<table>的bgcolor或background属性,不过会被单元格定义的背景颜色所覆盖。
语法:
<tr bgcolor="行的背景颜色">
5.4行文字的水平对齐方式align
<tr>的align属性用来控制表格当前行的水平对齐方式。它不受表格整体对齐方式的影响,却能够被单元格的对齐方式定义所覆盖。
语法:
<tr align="水平对齐方式">
5.5行文字的垂直对齐方式valign
<tr>的valign属性用来控制表格当前行的垂直对齐方式。垂直对齐方式有3种,分别是top、middle和bottom。
语法:
<tr valign="垂直对齐方式">
6、单元格属性
可以自定义设置单元格的各项属性,这些样式将覆盖<table>和<tr>已经定义的样式。
6.1单元格大小width、height
语法:
<td width="单元格宽度" height="单元格高度">
单元格的高度和宽度的单位是像素。
6.2水平跨度colspan
在设计表格时,有时需要将两个或更多的相邻单元格组合成一个单元格。
语法:
<td colspan="跨度的列数">
6.3垂直跨度rowspan
语法:
<td rowspan="跨度的行数">
6.4对齐方式align、valign
语法:
<td align="水平对齐方式" valign="垂直对齐方式">
在该语法中,水平对齐方式的取值可以是left、center或right,垂直对齐方式的取值可以是top、middle或bottom。
6.5单元格的背景颜色
语法:
<td bgcolor="背景颜色">
6.6单元格的边框颜色bordercolor
语法:
<td bordercolor="边框颜色">
6.7单元格的亮边框bordercolorlight
语法:
<td bordercolorlight="亮边框颜色">
6.8单元格的暗边框bordercolordark
语法:
<td bordercolordark="暗边框颜色">
6.9单元格的背景图像background
语法:
<td background="背景图像的地址">
7、表格的结构
还有一些标记是用来表示表格结构的,包括表首标记<thead>、表主体标记<tbody>以及表尾标记<tfoot>。这些成对出现的标记设置应用到表格里,用于整体规划表格的行列属性。使用这些标记能对表格的一行或多行单元格属性进行统一的修改,从而省去了逐一修改单元格属性的麻烦。
7.1表格的表首标记<thead>
语法:
<thead bgcolor="背景颜色" align="对齐方式">
......
</thead>
在该语法中,bgcolor、align、valign的取值范围与单元格中的设置方法相同。在<thead>标记内还可以包含<td>、<th>和<tr>标记,而一个表元素中只能有一个<thead>标记。
7.2表格的表主体标记tbody
与表首样式的标记功能类似,表主体样式用于统一设计表主体部分的样式,标记为<tbody>。
语法:
<tbody bgcolor="背景颜色" align="对齐方式">
......
</tbody>
在该语法中,bgcolor、align、valign的取值范围与<thead>标记中的相同。一个表元素中只能有一个<tbody>标记。
7.3表格的表尾标记tfoot
<tfoot bgcolor="背景颜色" align="对齐方式">
......
</tfoot>
在该语法中,bgcolor、align、valign的取值范围与<thead>标记中的相同。一个表元素中只能有一个<tfoot>标记。