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

在网页里面经常会有同类属性的数据展示，需要用到表格，通常有几个主要设置项目，比如：标题、单元格，效果通过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;"

    

再看效果，边框就合并为一条了，也就是我们日常看的比较多的表格的样式。