博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
PHP全栈开发(八):CSS Ⅶ 表格 style
阅读量:6074 次
发布时间:2019-06-20

本文共 1126 字,大约阅读时间需要 3 分钟。

表格默认是没有边框的,因此,我们在设置表格格式的时候,首先要设置的是表格边框的样式,也就是

table{
border-style:solid;}

设置完表格表格的样式之后,可以设置表格边框的粗细程度和颜色,通过下面两条代码

table{    /*设置表格的边框样式*/    border-style:solid;    /*设置表格的边框颜色*/    border-color:red;    /*设置表格的边框大小*/    border-width:1px;}

设置完成之后,我们可以看一下效果,这个效果设置的仅仅是整个表格的外边框,因为我们这里选择的标签选择器是table

table代表的当然就是整个表格的外边框,除了这个外边框之外还有表格每个数据单元,每行的格式。如果需要设置全边框,使用下列代码:

table,td,th{    /*设置表格的边框样式*/    border-style:solid;    /*设置表格的边框颜色*/    border-color:black;    /*设置表格的边框大小*/    border-width:2px;}

标签选择器用逗号隔开,表示的是并列的关系,表示既设置table标签的格式,又设置表格数据单元格td(table data cell)的格式,又设置表头th(table header)的格式。

PS:我们这里并没有设置行tr(table row)的格式。因为设置行的格式根本就没有用。

还有我们注意到这一点,发现表格的边框和单元格的边框是分开的,并且中间有一定的缝隙。那么我们如何去掉这个边框,让它变成像EXCEL表格里面那样的表格格式呢?

table,td,th{    /*设置表格的边框样式*/    border-style:solid;    /*设置表格的边框颜色*/    border-color:black;    /*设置表格的边框大小*/    border-width:2px;    /*设置表格与数据单元的边框线重合*/    border-collapse: collapse;}

collapse这个单词是塌方的意思...

设置了collapse这个属性之后,我们可以看到表格的边框和表格数据单元格的边框重合了。

当然我们也可以分开设置表头的格式。

另外还可以使用

width设置表格宽度

height设置表格高度

text-align设置表格中文字居中,向左,向右。

background-color设置表格背景等等。

 

转载于:https://www.cnblogs.com/sparrow32/p/9459029.html

你可能感兴趣的文章
iOS开发流程总结
查看>>
hadoop datanode 启动出错
查看>>
js颜色拾取器
查看>>
IDEA使用(1)intellIJ idea 配置 svn
查看>>
WPF 降低.net framework到4.0
查看>>
数据管理DMS 全量SQL诊断:你的SQL是健康的蓝色,还是危险的红色?
查看>>
搭建一个通用的脚手架
查看>>
开年巨制!千人千面回放技术让你“看到”Flutter用户侧问题
查看>>
开源磁盘加密软件VeraCrypt教程
查看>>
本地vs云:大数据厮杀的最终幸存者会是谁?
查看>>
阿里云公共镜像、自定义镜像、共享镜像和镜像市场的区别 ...
查看>>
shadowtunnel v1.7 发布:新增上级负载均衡支持独立密码
查看>>
Java线程:什么是线程
查看>>
mysql5.7 创建一个超级管理员
查看>>
【框架整合】Maven-SpringMVC3.X+Spring3.X+MyBatis3-日志、JSON解析、表关联查询等均已配置好...
查看>>
要想成为高级Java程序员需要具备哪些知识呢?
查看>>
带着问题去学习--Nginx配置解析(一)
查看>>
onix-文件系统
查看>>
java.io.Serializable浅析
查看>>
我的友情链接
查看>>