第六章使用表格
目录
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>标记。
