收藏
批改状态：合格
老师批语：谢谢你的鼓励, 其实这就是我的工作...
你们很快就会和我一样了
今天学习了css 控制表格布局，通过老师的讲解感觉更深入了解了css控制表格的要素。下面的案例是我在老师课堂上讲的css 经过了练习后的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css控制表格的样式</title>
<style>
/*给表格加上边框*/
table {
border: 1px solid #444444;
width: 1100px;
margin: 0px auto;
border-radius: 11px;
}
th, td {
border: 1px solid red;
text-align: center;
padding: 10px;
}
table caption {
font-size: 1.3rem;
/*文本加粗*/
font-weight: bolder;
margin-bottom: 15px;
}
table thead > tr:first-of-type {
background-color: lightgreen;
list-style-type: decimal;
}
table tbody > tr:first-of-type > td:first-of-type {
background-color: wheat;
}
table tbody > tr:nth-last-of-type(2) > td:first-of-type {
background-color: lightcyan;
}
table tfoot > tr {
background-color: lightgray;
}
/*美化表格*/
table {
box-shadow: 2px 2px 2px #888888;
position: relative;
}
/*通过 css 方式向页面添加元素, 叫:伪元素*/
table:before {
/*设置伪元素的内容,大小, 位置*/
content: '';
width: 798px;
height: 294px;
position: absolute;/*绝对定位*/
left: 0;
top: 52px;
}
</style>
</head>
<body>
<table>
<!-- 标题-->
<caption>课程表</caption>
<!-- 表头-->
<thead>
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!-- 主体-->
<tbody>
<tr>
<td rowspan="3">上午<br>8:00 - 11:30</td>
<td rowspan='2'>语文</td>
<td>数学</td>
<td>美术</td>
<td>体育</td>
<td>音乐</td>
</tr>
<tr>
<td>数学</td>
<td>美术</td>
<td>体育</td>
<td>音乐</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>美术</td>
<td>体育</td>
<td>音乐</td>
</tr>
<tr>
<td rowspan="2">下午<br>13:30 - 15:30</td>
<td>语文</td>
<td>数学</td>
<td>美术</td>
<td>体育</td>
<td>音乐</td>
</tr>
<tr>
<td colspan='3'>语文1</td>
<td>体育1</td>
<td>音乐1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>备注:</td>
<td colspan="5"></td>
</tr>
</tfoot>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
【总结】
在用css处理表格的时候，发现控制表格行合并，还是列合并不是那么顺手，需要不断的动手操作才可以达到熟练。这次实现表格圆角 是用的 border-radius样式实现的，不过总觉哪里不对。总体而说，在老师的课件的基础上修改还是可以的，自己写的话还是不行。这需要不断的练习。感谢老师辛苦的付出！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
