当前位置：首页 > news >正文

CSS表格

news 2025/8/4 1:20:25

标准的表格结构

table标签：定义表格
caption标签：定义表格标题，这个标题会居中显示在表格上，一个表格只能定义一个标题
th标签：定义表格的表头，通常成粗体居中表示
tr标签：定义表格的一行
td标签：定义表格的一个单元格
thead标签：定义表头
tbidy标签：定义表格主体部分。
tfoot标签：定义表格页脚（脚注）
col标签：针对一个或多个列的属性值，只能table或colgroup标签中使用
colgroup标签：表格列的分组，可以对表格的列组进行格式化，只能在table中使用。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table ,th,td{border: 1px solid #000;width: 400px;}tbody tr td{text-align: center;}colgroup .a1{background-color: aqua;}colgroup .a2{background-color: red;}colgroup .a3{background-color: yellow;}</style></head><body><table><colgroup ><col class="a1"><col class="a2"><col class="a3"></colgroup><thead><caption>学习成绩表</caption><th>数学</th><th>语文</th><th>英语</th></thead><tbody><tr><td>90</td><td>100</td><td>30</td></tr><tr><td>90</td><td>100</td><td>30</td></tr></tbody><tfoot><tr><td>总分：</td><td></td><td>220</td></tr></tfoot></table></body>
</html>

在这里插入图片描述

表格标签的一些属性

colspan：规定单元格可以横跨的列数
rowspan：规定表头单元格可以横跨的行数
headers：规定与表头单元格或单元格相连的一个或多个单元格
span：规定列组应该横跨的列数
其他属性HTML5已弃用不建议使用。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table,tr,th,td{border: 1px solid #000;}table{width: 400px;line-height:10px;font-size:10px}td{text-align:center;}</style></head><body><table><caption>人员信息表</caption><tr><th rowspan="2">姓名</th><th rowspan="2">年龄</th><th id="gender" colspan="2">性别</th></tr><tr><th headers="gender">男</th><th headers="gender">女</th></tr><tr><td>付东流</td><td>26</td><td>✔️</td><td></td></tr></table></body>
</html>

定义细线表格

在表格中每个单元格都有一个独立的空间，因此在设定边框线时显示的是不连贯的线条。
要想使之紧密连接在一起需要使用border-collapse属性来合并单元格，他的值有：
collapse：合并单元格
separate：默认值，每个单元格都有独立的边框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table,tr,td{border: 1px solid #000;width: 200px;height: 50px;}table{border-collapse: collapse;}</style></head><body><table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body>
</html>

单元格空隙

border-spacing：属性定义单元格的空隙，该属性可以分离单元格间距。
他的两个值表示行间距与列间距。也可以定义一个值，行间距与列间距都是这个值
注意：表格的单元格间距不能与合并单元格一起使用，这样会不显示效果。并且这个属性不能使用margin代替。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table,tr,td{border: 1px solid #000;width: 200px;height: 50px;}table{/* border-collapse: collapse; */border-spacing: 10px 10px;}</style></head><body><table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></table></body>
</html>

隐藏单元格

单元格边框处于分离状态时可以使用empty-cells属性设置是否隐藏空白单元格，
他的值是show（展示），hide（不展示）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table,tr,td{border: 1px solid #000;width: 200px;height: 50px;}table{/* border-collapse: collapse; */border-spacing: 10px 10px;empty-cells: hide;}</style></head><body><table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td></td></tr></table></body>
</html>