css table表格相关设置和属性

文章目录

css table表格相关设置和属性
前言
一、表格结构
二、使用行内样式控制表格样式
- 1.属性
- 2.使用css控制表格的样式

前言

记录表格的结构，属性设置相关知识

一、表格结构

<table><caption>表格标题</caption><thead><th>表头</th><th>表头</th><th>表头</th></thead><tbody><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr></tbody><tfoot><tr><td>表尾</td><td>表尾</td><td>表尾</td></tr></tfoot></table>

二、使用行内样式控制表格样式

1.属性

border=“1” 控制表格的边框粗细（加粗的是表格外围的边框粗细）

borderColor=“yellow” 控制表格边框颜色

width=“300” height=“200” 控制表格整体宽高（可以加给 td 会控制单元格所在的列的单元格的宽高）

bgcolor=“skyblue” 控制表格背景颜色（可以加给tr控制行的背景色，加给td控制单元格的背景色）

align=“center” 加给表格是表格居中（加给 tr 控制行的内容居中,加给 td 单独控制单元格的内容的居中方式）

cellpadding=“10” 控制表格的内边距（内容与边框之间的距离）

cellspacing=“0” 控制单元格之间的间隙

代码如下（示例）：

<table border="1" borderColor="yellow" width="300" height="200" bgcolor="skyblue" align="center" cellpadding="10" cellspacing="0"><caption>表格标题</caption><thead><th>表头</th><th>表头</th><th>表头</th></thead><tbody><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>           </tbody><tfoot><tr><td>表尾</td><td>表尾</td><td>表尾</td></tr></tfoot></table>

2.使用css控制表格的样式

只有table，th和td有独立的边框，tr并无边框
table，th和td的样式控制可以直接进行设置，代码如下

代码如下（示例）：

thead th{width: 80px;height: 20px;          background-color: skyblue;border: 3px  solid black;}
td{width: 80px;height: 20px;border: 1px solid black;background-color: skyblue;text-align:center;}

想要对thead,tbody,tfoot,tr进行控制，需要对table设置

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。
参数：

separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。

collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit 规定应该从父元素继承border-collapse 属性的值

代码如下（示例）：

table {border-collapse: collapse;}

设置之后就可以对thead,tbody,tfoot,tr进行样式控制了