表格

您所在的位置：网站首页 › html怎么让表格数据居中 › 表格

表格

2024-07-10 20:36| 来源: 网络整理| 查看: 265

文章目录表格的基本元素横向合并colspan纵向合并rowspan长表格th表格样式border-spacing控制边框之间的距离 border-collapse设置边框一行一个元素注意垂直居中利用table-cell使元素垂直居中

表格的基本元素

使用table标签来创建一个表格。 tr标签表示表格中的一行 td标签表示表格中的一个单元格 eg：

DOCTYPE html> A1 B1 C1 D1 A2 B2 C2 D2 A3 B3 C3 D3 A4 B4 C4 D4

在这里插入图片描述 border=1，意思就是给表格的每一格，及边框加上1像素的边框

横向合并colspan

使用格式：colspan = “合并个数”

纵向合并rowspan

使用格式：rowspan = “合并个数”

eg:

DOCTYPE html> A1 B1 C1 A2 B2 C2 D2 A3 B3 C3 A4 B4 C4

在这里插入图片描述

长表格

可以将一个表格分成3个部分：头部 thead 主体 tbody 底部 tfoot

DOCTYPE html> 姓名成绩 A1 B1 C1 D A2 B2 C2 A3 B3 C3 A4 B4 C4 总分 score

在这里插入图片描述

th表示头部的单元格，和td同一等级

DOCTYPE html> A1 B1 C1 D1 A2 B2 C2 D2 A3 B3 C3 D3 A4 B4 C4 D4

在这里插入图片描述

表格样式

table独占一行，但是宽度是被内容撑开的。可以当作块元素对待。

border-spacing控制边框之间的距离 table{ width: 50%; border:1px solid black; border-spacing: 1px; }

在这里插入图片描述

border-collapse设置边框 border-collapse: collapse;

eg：

table{ width: 50%; border:1px solid black; /* border-spacing: 1px; */ border-collapse: collapse; }

设置边框成为一行在这里插入图片描述

一行一个元素 table tr:nth-child(odd){ background-color:gainsboro; }

或者：

tbody>tr:nth-child(odd){ background-color:gainsboro; }

输出：在这里插入图片描述

注意

如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中，所以tr不是table的子元素。

垂直居中

默认情况下元素在td中是垂直居中的，可以通过vertical-align进行调整。在表格中vertical-align可以直接设置元素垂直方向上的排列，vertical-align：center可以直接设置元素垂直居中。所表格内容的居中可以写成：

td{ border: 1px solid black; height: 100px; vertical-align: middle; text-align: center; }

在这里插入图片描述

利用table-cell使元素垂直居中

table的 vertical-align: middle;属性可以使元素垂直居中，所以可以利用这一特点使用到其他元素。需要将父元素的display设置为table-cell

DOCTYPE html> Document .box1{ width: 300px; height: 300px; background-color: goldenrod; display: table-cell; vertical-align: middle; } .box2{ width: 100px; height: 100px; background-color: rgb(184, 98, 58); margin: 0px auto; }

在这里插入图片描述

【本文地址】

表格

表格

今日新闻

推荐新闻