全网云cms网站管理系统

CSS样式中表格标记table的基本用法

来源：全网云cms网站管理系统 日期：2019-11-25 11:32:15 属于：前端开发
在网页里面经常会有同类属性的数据展示，需要用到表格，通常有几个主要设置项目，比如：标题、单元格，效果通过css的属性值来控制即可，元素主要有：
table，表格
caption，表格总标题
th，表格内部的行列标题，也就是tale head的缩写，使用时自动加粗
tr，表格的一行，table row的缩写
td，一个单元格，table division的缩写
下面还是通过具体的案例来演示，完整测试代码如下：
 
    SEOWHY DEMO 表格CSS演示
 
姓名 年龄 班级 专业
张三 18 1 计算机
李四 19 2 英语
王五 20 3 电子商务
 
这是很简单的一个表格，行标题加了背景颜色，列标题没有加，行标题th除了加背景颜色，还有一个属性scope="col"，这表示列表头，也就是column的缩写。下面单元格里面的数据是以此为表头填充的。同理，列标题下面的th也有一个属性scope="row"，表示他们是行表头，右侧单元格里面的数据是以此为表头填充的。另外，在单元格里面还有一个属性align="center"就比较简单了，让内容居中显示。从效果里面，我们可以看到，表格是双边框的，这是因为table和td单元格是自带边框，所以看上去有两条边，如果要显示一条边，在table里面加入一个样式即可style="border-collapse:collapse;"
    
再看效果，边框就合并为一条了，也就是我们日常看的比较多的表格的样式。

上一前端开发：CSS 颜色名称

下一前端开发：全网云cms使用PHP+MySQL架构的优点