html-表格

表格标签

: 表格框架
: 表格头部
: 表格主体
:表头- - -加粗居中
:行
:列

表格常用属性

border:表格边框的宽度,eg:...表示表格宽度为1
width:设置表格的宽度
height:设置表格的高度
align:表格中内容的排列方式,eg:...表示内容居中显示
cellspacing:单元格和表格外边框之间的宽度,不写改属性时,默认是有间隙的,设置cellspacing="0"后,间隙消除
cellpadding:单元格内的内容和单元格边框之间的宽度

注意:以上这些属性是要写在

标签中

如果要合并单元格,可使用rowspan、colspan两个属性
rowspan:行合并
colspan:列合并
合并方法:
1.首先确定要合并的单元格
2.编写rowspan/colspan="合并单元格数量",行合并在要合并的最上面一个单元格中写rowspan,列合并在要合并的最左边一个单元格中写colspan
3.删除剩下被合并的单元格

注意:这两个属性写在

标签中

小提示 - - -表格其他属性和查阅手册或百度具体查看

代码示例

代码示例1:

姓名 性别 年龄
小红 8
小明 9

代码示例1效果:


示例1效果.png

代码示例2:

姓名 性别 年龄
小红 8
小明 9

代码示例2效果:


示例2效果.png

代码示例3:

姓名 性别 年龄
小红 8
小明 9

示例3效果:


示例3效果.png

代码示例4:

姓名 性别 年龄
小红 8
小明 9

示例4效果:


示例4效果.png

代码示例5:

姓名 性别 年龄
小红 8
小明 9

示例5效果:


示例5效果.png

代码示例6:

姓名 性别 年龄
小红 8
小明 9

示例6效果:


示例6效果.png

代码示例7:

示例7效果:


示例7效果.png

代码示例8:

示例8效果:


示例8效果.png

代码示例9:

示例9效果:


示例9效果.png

你可能感兴趣的:(html-表格)