CSS-设置表格样式

1、设置表格的边框
Border:设置表格边框;
Border-collapse:设置边框分离,合并 默认是 separate(分离) collapse 合并;
Border-spacing :设置单元格的间距;
Padding:设置单元格内容和边框之间的距离;






设置表格的边框



	
学生信息
序号 学号 姓名 性别 出生日期
1 001 魏安复 2012-12-12
2 002 杜子腾 2011-11-11
3 003 史珍湘 2010-10-10
4 004 梅读 2009-10-10
5 005 赖月金 2008-01-01
总计 5条数据

运行结果:
CSS-设置表格样式_第1张图片
2、设置表格的宽度
Table-layout
默认 auto 自动方式,根据单元格的内容自动调整宽度;
Fixed 固定方式 表格宽度固定;






设置表格的宽度



	
学生信息
序号 学号 姓名 性别 出生日期
1 001 魏安复 2012-12-12
2 002 杜子腾222222222222222222222222222222222222222222222222222222222222222222222222222 2011-11-11
3 003 史珍湘 2010-10-10
4 004 梅读 2009-10-10
5 005 赖月金 2008-01-01
总计 5条数据

运行结果:
CSS-设置表格样式_第2张图片
3、设置表格隔行换色






设置表格隔行换色



	
学生信息
序号 学号 姓名 性别 出生日期
1 001 魏安复 2012-12-12
2 002 杜子腾 2011-11-11
3 003 史珍湘 2010-10-10
4 004 梅读 2009-10-10
5 005 赖月金 2008-01-01
总计 5条数据

运行结果:
CSS-设置表格样式_第3张图片
4、设置表格列样式






设置表格列样式



	
学生信息
序号 学号 姓名 性别 出生日期
1 001 魏安复 2012-12-12
2 002 杜子腾 2011-11-11
3 003 史珍湘 2010-10-10
4 004 梅读 2009-10-10
5 005 赖月金 2008-01-01
总计 5条数据

运行结果:
CSS-设置表格样式_第4张图片
5、设置鼠标经过时行变色效果






设置鼠标经过时行变色效果



	
学生信息
序号 学号 姓名 性别 出生日期
1 001 魏安复 2012-12-12
2 002 杜子腾 2011-11-11
3 003 史珍湘 2010-10-10
4 004 梅读 2009-10-10
5 005 赖月金 2008-01-01
总计 5条数据

运行结果:
CSS-设置表格样式_第5张图片

你可能感兴趣的:(CSS基础)