HTML+CSS之表格(15个案例+代码+效果图+素材)

目录

1.table标签的border属性

案例:制作一个带边框的表格

1.代码

2.效果

2.table标签的cellspacing属性

案例:制作一个带边距的表格

1.代码

2.效果

3.table标签的cellpadding属性

1.代码

2.效果

4.table标签的width和height属性

案例:指定宽高的表格

1.代码

2.效果

5.table标签的align属性

案例:表格居中

1.代码

2.效果

6.table标签的bgcolor属性

案例:为table添加背景色

1.代码

2.效果

7.table标签的background的属性

案例:为表格添加背景图

1.代码

2.效果

8.tr标签的height属性

案例:设置tr行高为50

1.代码

2.效果

9.tr标签的align属性

案例:使tr标签内容居中

1.代码

2.效果

10.tr标签的valign属性

案例:使表格内容垂居中

1.代码

2.效果

11.tr标签的background的属性

案例：tr标签添加滤镜

1.代码

2.效果

12.tr标签的bgcolor属性

案例:使用bgcolor为tr添加背景色

1.代码

2.效果

13.td标签的width和height属性

案例：鼠标悬浮扩大td宽高

1.代码

2.效果

14.td标签的align属性

案例:控制td文本居中

1.代码

2.效果

15.表结构

案例:编写一个简单的网页

1.代码

2.效果

附录:

1.table标签的border属性

border 属性 - 定义表格边框的宽度。例如：

案例:制作一个带边框的表格

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

2.table标签的cellspacing属性

cellspacing 属性 - 指定单元格之间的间距。例如：

案例:制作一个带边距的表格

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

3.table标签的cellpadding属性

cellpadding 属性 - 指定内容与单元格边框之间的距离。例如：

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

可以看到内容到上下边框都有了相同的内边距

4.table标签的width和height属性

width 和 height 属性 - 分别指定表格的宽度和高度。可以使用像素或百分比。例如：

案例:指定宽高的表格

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

5.table标签的align属性

align 属性 - 控制表格在页面中的水平对齐方式（左、中、右）。例如：

。不过，在现代网页设计中更推荐使用CSS来设置对齐方式

案例:表格居中

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

6.table标签的bgcolor属性

bgcolor 属性 - 设置表格背景颜色。例如：

。同样地，用CSS来设置背景色是更好的做法

案例:为table添加背景色

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

7.table标签的background的属性

background 属性 - 为表格设置背景图片。例如：

。推荐使用CSS的background-image属性.

案例:为表格添加背景图

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

8.tr标签的height属性

height 属性 (对于 ) - 设置行的高度。例如：。

案例:设置tr行高为50

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

9.tr标签的align属性

align 属性 (对于 ) - 控制该行内所有单元格的内容水平对齐方式。例如：。

案例:使tr标签内容居中

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

可以看到行内的元素都居中了,包括文字的显示

10.tr标签的valign属性

valign 属性 (对于 ) - 设置行内所有单元格内容的垂直对齐方式（顶部、中部、底部）。例如：。

案例:使表格内容垂居中

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

11.tr标签的background的属性

background 属性 (对于 ) - 设置行的背景图像。例如：。

案例：tr标签添加滤镜

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

12.tr标签的bgcolor属性

bgcolor 属性 (对于 ) - 设置整行的背景颜色。例如：。

案例:使用bgcolor为tr添加背景色

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

13.td标签的width和height属性

width 和 height 属性 (对于 ) - 分别定义单元格的宽度和高度。例如：。

案例：鼠标悬浮扩大td宽高

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

14.td标签的align属性

align 属性 (对于 ) - 控制单元格内文本的水平对齐方式。例如：。

案例:控制td文本居中

1.代码

科目	教师	年龄
java	张三	18
HTML	李四	22
汇编语言	惜己	23
JavaScript	小久	24

2.效果

可以看到标题居中了

15.表结构

caption标签定义表名thead定义表格的头部tfoot定义页脚tbody定义表格的主题部分

案例:编写一个简单的网页

注:这个是动态的简单的网页

1.代码

网站首页	登录页面	信息页	关于我们
style="background-size: cover;width: 300px;height: 300px;"> style="background-size: cover;width: 300px;height: 300px;">
© 版权惜.己所有

2.效果

附录:

所用素材下载

aMouse.png等2个文件官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘