表格table

 

一、表格标记

 

1、表格的定义

    在HTML语法中，表格主要通过三个标记构成：<table>、<tr>和<td>。

×基本语法

    <table>

        <tr>

            <td> … </td>

            ……

            <td> … </td>

 

        </tr>

        ……

        <tr>

            <td> … </td>

            ……

            <td> … </td>

        </tr>

    </table>

×语法说明

(1)<table>标记表格的开始，</table>标记代表表格的结束。

(2)<tr>标记表行的开始，</tr>标记代表表行的结束。

(3)<td>标记之间是单元格的内容，可以说文字，也可以是其他标记，如一个按钮等。

(4)在一个表格中，<tr>的个数代表表格的行数，每对<tr> … </tr>之间<td>的个数代表该行的单元格。

 

2、表格标题

    表格标题一般放在表格的外部上面，是对表格内容的简单说明，用<caption>标记实现。

×基本语法

    <caption> … </caption>

×语法说明

<caption>标记之间就是标题的内容。

 

3、表格表头

    表头是指表格的第一行或第一列等对表格内容的说明，文字样式为居中、加粗显示，通过<th>标记实现。

×基本语法

    <tr>

        <th> … </th>

        ……

        <th> … </th>

    </tr>

×语法说明

(1)<th>：表头标记，包含在<tr>标记中。

(2)在表格里，只要把标记<td>改为<th>就可以实现表格的表头。

 

二、表格属性修饰

 

    表格是网页布局中的重要元素，有丰富的属性，可以对其进行相关设置。表格常用的属性如下表所示：

属性	描述
border	设置边框粗细(默认值为0)
bordercolor	设置边框颜色
bordercolorlight	设置亮边框颜色(左上边框颜色)
bordercolordark	设置暗边框颜色(右下边框颜色)
width	设置表格宽度
height	设置表格高度
bgcolor	设置背景颜色
background	设置背景图片
frame	设置边框样式
rules	设置内部边框样式
cellspacing	设置单元格间距
cellpadding	设置单元格边距
align	设置表格水平对齐方式，默认居左

×属性说明

(1)border属性用于设置边框的宽度，单位为像素；定义边框颜色的时候可以使用颜色的英文单词或6位16进制颜色值。

(2)width和height的属性值可以是像素或百分比。用百分比(对于非嵌套表格，百分比表示的是表格应该占据的浏览器窗口的百分比；对于嵌套表格，百分比表示的是相对嵌套表格所在单元格宽度)设置大小的表格会随着浏览器窗口或嵌套表格所在的单元格的大小变化而调整，而用像素设置大小的表格上绝对大小。默认情况下，表格的宽度和高度会根据内容自动调整。

(3)表格的背景默认为无填充色，根据网页设计要求，设置bgcolor属性可以设定表格背景颜色，以增加视觉效果。Bgcolor属性的值可以是6位十六进制数或该颜色的英文单词。

(4)表格还可以通过background属性设置背景图像，其属性值为背景图片文件的相对路径或完整路径。表格背景图像可以是GIF、JPEG或PNG等图像格式。

(5)在HTML文件中，根据设计的需要，可以利用<table>标记的frame属性控制可以只显示部分表格边框。其常见属性设置如下表所示：

属性值	描述
above	显示上边框
below	显示下边框
hsides	显示上下边框
lhs	显示左边框
rhs	显示右边框
vsides	显示左右边框
border	显示上下左右边框
void	不显示边框

 

(6)在HTML文件中，根据设计的需要，可以利用<table>标记的rules属性控制只显示部分内部边框。其常见属性设置如下表所示：

属性值	描述
all	显示所有内部边框
none	不显示内部边框
cols	仅显示列边框
rows	仅显示行边框
groups	显示介于行列间的边框

 

(7)通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。单元格的间剧以像素为单位，默认为2。

(8)通过cellpadding设置表格单元格边距，以像素为单位。表格单元格边距是指单元格中的内容与单元格边框的距离。

 

三、设置行的属性

 

    表格行标记<tr>的属性用于设定表格中某一行的属性，其常见属性如下表所示：

属性	描述
align	行内容的水平对齐，默认值是left
valign	行内容的垂直对齐，默认值是middle
bgcolor	行的背景颜色
bordercolor	行的边框颜色
bordercolorlight	行的亮边框颜色
bordercolordark	行的暗边框颜色

 

四、设置单元格的属性

 

    表格列标记<td>的属性用于设定表格中某一单元格的属性，常见属性设置如下表所示：

属性	描述
align	单元格内容的水平对齐
valign	单元格内容的垂直对齐
bgcolor	单元格的背景颜色
background	单元格的背景图片
bordercolor	单元格的边框颜色
bordercolorlight	单元格的亮边框颜色
bordercolordark	单元格的暗边框颜色
width	单元格的宽度
height	单元格的高度
rowspan	单元格跨行
colspan	单元格跨列

×属性说明

(1)单元格的rowspan属性可以实现单元格的跨行合并(纵向合并)。rowspan的属性值为单元格跨越的行数，跨行之后，被跨的相应几行行就不用定义该单元格。

(2)单元格的colspan属性可以实现单元格的跨列合并(横向合并)。colspan的属性值为单元格跨越的列数，跨列之后，该行就可以少定义相应数量的单元格。

 

五、表格嵌套

 

    表格嵌套就是根据插入元素的需要，在一个表格的某个单元格里再插入一个若干行和列的表格。对嵌套表格，可以像对任何其他表格一样进行格式设置，但是其宽度受所在单元格的限制。而且，需要注意，嵌套层次越多，网页的载入速度就会越慢。