html表格菜鸟教程

大家好，又见面了，我是你们的朋友全栈君。

HTML 表格文章目录HTML 表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cellspacing)5.5 显示部分边框（frame & rules）1. 表格的定义

标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 、 元素定义表格行，

3

定义表格的页眉

4

定义表格的主体

5

定义表格的页脚

6

定义表格的行

8

定义用于表格列的属性

10

定义表格列的组

3. 单元格边框(border)表格边框：在使用

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

表格标题

或	元素组成表格结构；其中：
元素定义表头，	元素定义表格单元。 为了让表格更美观，我们会用到：border，colspan，rowspan，align，bgcolor 等来美化表格，具体在本文都有讲解； 2. 表格的标签在HTML定义表格的时候，有以下标签供我们使用 NO 表格标签 用处 1 定义表格，生成的表格在一对 中； 2
定义表格的表头，一般是表头中的内容会被加黑； 7
定义表格单元格 9

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

代码语言：javascript复制

编号	姓名	性别
1	马里奥	男
2	桃花公主	女

编号	姓名	性别
1	马里奥	男
2	桃花公主	女

编号	姓名	性别
1	马里奥	男
2	桃花公主	女

上述代码效果：

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

4.1 合并行单元格(colspan)代码语言：javascript复制

合并行单元格：

通讯录

姓名	邮箱
zhang kai	123456@qq.com	123456@163.com

上述代码效果：

4.2 合并列单元格(rowspan)代码语言：javascript复制

合并列单元格：

姓名	Bill Gates
邮箱	123456@qq.com
	123456@163.com
	123456@sina.com

上述代码效果：

5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）在对应的标签上增加 align 键值对，生效方式为”就近原则”，如下例中，桃花公主单元格为left生效；

align 值

left

center

right

效果

左对齐

居中

右对齐

代码语言：javascript复制

编号	姓名	性别
1	马里奥	男
2	桃花公主	女

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

5.2. 背景色&图片（bgcolor & background）添加背景色使用：bgcolor添加背景图片使用：background5.2.1 单元格背景色&图片在单元格的标签上增加 bgcolor 或者 background，就可以添加背景色或者背景图片，以背景色为例；

代码语言：javascript复制

编号	姓名	性别
1	马里奥	男
2	桃花公主	女

上述代码效果：

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

代码语言：javascript复制

编号	姓名	性别
1	马里奥	男
2	桃花公主	女

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

5.3 单元格的边距（cellpadding）在

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

代码语言：javascript复制

编号	姓名	性别
1	马里奥	男
2	桃花公主	女

上述代码效果：

5.4 单元格间的距离(cellspacing)在

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

代码语言：javascript复制

编号	姓名	性别
1	马里奥	男
2	桃花公主	女

上述代码效果：

5.5 显示部分边框（frame & rules）可以在

标签内，增加 frame 键值对，控制表格外边框；键值对对应关系如下：frame 键值

效果

void

不显示外侧边框

above

显示上部的外侧边框

below

显示下部的外侧边框

hsides

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

vsides

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

lhs

显示左边的外侧边框

rhs

显示右边的外侧边框

box

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

border

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

可以在

标签内，增加 rules 键值对，控制表格外边框；键值对对应关系如下：frame 键值

效果

none

没有线条

groups

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

rows

位于行之间的线条

cols

位于列之间的线条

all

位于行和列之间的线条

frame 举例如下：代码语言：javascript复制

编号	姓名	性别
1	马里奥	男
2	桃花公主	女

输出效果：

rules举例如下：代码语言：javascript复制

编号	姓名	性别
1	马里奥	男
2	桃花公主	女

输出效果：

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/169639.html原文链接：https://javaforall.cn