HTML表格（HTML 表格的使用，收藏这一篇就够了）

标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 、 或 元素组成表格结构；其中： 元素定义表格行， 元素定义表头， 元素定义表格单元。 为了让表格更美观，我们会用到：border，colspan，rowspan，align，bgcolor 等来美化表格，具体在本文都有讲解；

在HTML定义表格的时候，有以下标签供我们使用

NO

表格标签

用处

1

定义表格，生成的表格在一对中；

2

定义表格标题，当表格需要标题时，使用表格标题

3

定义表格的页眉

4

定义表格的主体

5

定义表格的页脚

6

定义表格的表头，一般是表头中的内容会被加黑；

7

定义表格的行

8

定义表格单元格

9

定义用于表格列的属性

10

定义表格列的组

表格边框：在使用 的方式来定义，其中：数字表示边框的宽度，单位为像素；以下举三个边框的例子；

上述代码效果：

合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2” （这里的 ‘2’ 表明合并两个单元格），举例如下：

上述代码效果：

上述代码效果：

在对应的标签上增加 align 键值对，生效方式为"就近原则"，如下例中，桃花公主单元格为left生效；

align 值

left

center

right

效果

左对齐

居中

右对齐

上述代码效果（为了看清效果，所以设置了表格宽度 width=“600” ）：

在单元格的标签上增加 bgcolor 或者 background，就可以添加背景色或者背景图片，以背景色为例；

上述代码效果：

在表格的标签上增加bgcolor 或者 background，就可以添加背景色或者背景图片，以背景图片为例；

上述代码效果（由于我挑了一张动态图，所以这里的背景是动态的！）：

在标签使用cellpadding 即可，方法与上面的图片一样，直接举例如下：

上述代码效果：

在标签使用 cellspacing 即可，方法与上面的图片一样，直接举例如下：

上述代码效果：

frame 键值

效果

void

不显示外侧边框

above

显示上部的外侧边框

below

显示下部的外侧边框

hsides

显示上部和下部的外侧边框

vsides

显示左边和右边的外侧边框

lhs

显示左边的外侧边框

rhs

显示右边的外侧边框

box

在所有四个边上显示外侧边框

border

在所有四个边上显示外侧边框

frame 键值

效果

none

没有线条

groups

位于行组和列组之间的线条

rows

位于行之间的线条

cols

位于列之间的线条

all

位于行和列之间的线条

frame 举例如下：

输出效果：

rules举例如下：

输出效果：