收藏
批改状态：合格
老师批语：表格看上去非常的专业
一、CSS控制表格常用的属性
1、设置表格的边框样式
属性名称：border、border-bottom、border-left、border-right、border-top。其中每项还有width、style、color这三种属性分别设置线宽、线型和线的颜色。
快捷设置边框：border: 线宽 线型 线的颜色；
PS：设置边框颜色为透明：border-color:transparent;
属性名称：border-spacing：设置边框的间距
2、折叠边框
属性名称：border-collapse
属性值：
separate ：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse： 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。
3、宽度和高度
属性名称：width，height。常用属性，不再介绍。
4、文字水平对齐方式
属性名称：text-align。属性值center，left，right。常用属性
5、文字垂直对齐方式
属性名称：vertical-align。属性值bottom，center，top;
6、颜色
属性名称：background-color：背景色，color ：文字颜色 。
7、设置圆角属性
属性名称：border-radius：设置4个角为圆角、border-top-left-radius：设置左上角、border-top-right-radius：设置右上角、border-bottom-right-radius：设置右下角、border-bottom-left-radius：设置左下角。
注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
8、伪元素
伪元素将会在内容元素的前后插入额外的元素，但是这些元素实际上并不在文档中生成。它们将在外部可见，但是你将不会在文档的源代码中找到它们，因此，实际上它们是“虚假”的元素。
伪元素和伪类的写法有点像，伪元素使用2个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder等；伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。
在实际的开发工作中，有人会把伪元素用1个冒号来写，这实际是 CSS2 与 CSS3新旧标准的规定不同而导致的。
CSS2 中的伪元素使用1个冒号，在 CSS3 中，为了区分伪类和伪元素，规定伪元素使用2个冒号。所以，对于 CSS2 标准的老伪元素，比如:first-line，:first-letter，:before，:after，写一个冒号浏览器也能识别，但对于 CSS3 标准的新伪元素，比如::selection，就必须写2个冒号了。
伪元素 ::before 和 ::after 的用法
标准写法是双冒号（但考虑兼容性也有人写单冒号）::before和::after在被选中元素里面、元素现有内容之前（后）插入内容，需要使用content属性指定要插入的内容。content必须有值（空值也行）。
content插入的内容默认是 inline 元素，可以通过display:block改变。
9、为表格添加阴影：
属性名称：box-shadow
使用方法：box-shadow: h-shadow：水平阴影距离 v-shadow：垂直阴影距离 blur：可选，模糊距离 spread：可选，阴影的大小 color：可选，阴影的颜色 inset：可选，从外层的阴影（开始时）改变阴影内侧阴影;
二、制作圆角表格的方法
写在前面：制作圆角表格时，border-collapse的值不可以为collapse，否则圆角失效。
实现步骤：
1、不要设置外边框，外边框会和单元边框重合，边框线宽为2倍。如果只设置外边框不设置单元格重复的边框会使单元格背景盖住边框线的一部分。
2、为内部单元格设置边框，先为每个单元格设置上边框和左边框，然后为最后一列设置右边框，为最下面一行设置下边框。
3、边框间距border-spacing：0；
4、为左上角、右上角、右下角、左下角单元格分别设置左上角、右上角、右下角、左下角圆角。
以下是圆角表格实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
/* 1、设置表格尺寸，margin,对齐方式,背景色等;设置标题*/
/* 想设置圆角不要为table设置外边框，不要设置外边框，
外边框会和单元边框重合，边框线宽为2倍。如果只设置外边框不设置单元格重复的边框会使单元格背景盖住边框线的一部分。*/
table {
width: 800px;
margin: 10px auto;
/* 清除边框间距 */
border-spacing: 0;
position: relative;
}
table th,
td {
text-align: center;
padding: 10px;
}
table caption {
font-size: 20px;
font-weight: bolder;
margin: 10px auto;
}
/* 2、设置内边框 */
/* 为了不让表格线重复，先为每个单元格设置左边框和上边框 */
table th,
td {
border-left: 1px solid black;
border-top: 1px solid black;
}
/* 为最后一列单元格设置右边框 */
table tr>td:last-of-type,
th:last-of-type {
border-right: 1px solid black;
}
/* 为最后一行单元格设置下边框 */
table tfoot>tr>td {
border-bottom: 1px solid black;
}
/* 3、为四个角设置圆角 */
table thead>tr:first-of-type>th:first-of-type {
border-top-left-radius: 10px;
}
table thead>tr:first-of-type>th:last-of-type {
border-top-right-radius: 10px;
}
table tfoot>tr:first-of-type>td:first-of-type {
border-bottom-left-radius: 10px;
}
table tfoot>tr:first-of-type>td:last-of-type {
border-bottom-right-radius: 10px;
}
/* 设置表头背景色 */
table th {
background-color: lightgreen;
}
/* 设置第一列时间背景色 */
table tbody>tr:nth-of-type(1)>td:nth-of-type(1) {
background-color: wheat;
}
table tbody>tr:nth-of-type(4)>td:nth-of-type(1) {
background-color: lightblue;
}
/* 使用伪元素为表格添加背景图片 */
table::after {
/*设置伪元素的内容,大小, 位置*/
content: '';
width: 798px;
height: 294px;
position: absolute;
left: 0;
top: 45px;
/*设置伪元素的背景*/
background-image: url("xx.jpg");
background-size: cover;
opacity: 0.3;
border-radius: 10px;
}
/* 为表格设置阴影 */
table {
box-shadow: 5px 5px 5px #888888;
border-radius: 10px;
}
</style>
<title>表格</title>
</head>
<body>
<table>
<caption>课程表</caption>
<thead>
<tr class="head-tr">
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr class="body-tr-1">
<td rowspan="3">上午8:00~11:30</td>
<td>英语</td>
<td>语文</td>
<td>自然</td>
<td>思想品德</td>
<td>语文</td>
</tr>
<tr class="body-tr-2">
<td>英语</td>
<td>语文</td>
<td>自然</td>
<td>思想品德</td>
<td>语文</td>
</tr>
<tr class="body-tr-3">
<td>英语</td>
<td>语文</td>
<td>自然</td>
<td>思想品德</td>
<td>语文</td>
</tr>
<tr class="body-tr-4">
<td rowspan="2">下午13:30~15:30</td>
<td>英语</td>
<td>语文</td>
<td>自然</td>
<td>思想品德</td>
<td>语文</td>
</tr>
<tr class="body-tr-5">
<td>英语</td>
<td>语文</td>
<td>自然</td>
<td>思想品德</td>
<td>语文</td>
</tr>
</tbody>
<tfoot>
<tr class="foot-tr">
<td>备注：</td>
<td colspan="5">放学按小组轮流打扫卫生</td>
</tr>
</tfoot>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
