收藏
批改状态：合格
老师批语：圆角表格比较有趣,也实用
使用CSS控制表格更灵活更方便。
过程
第一步：table 写表格结构。
第二步：列合并，用到rowspan
第三步：行合并，用到colspan
第四步：css样式设及到几个知识点。
1、border-collapse:collapse; 把表格的双边框合并成单一边框。
2、伪类选择器的使用。
如：table thead > tr:first-of-type {background-color:#0099FF;}
给表格的表头第一行tr添加背景颜色。
如：table tbody > tr:first-of-type > td:first-of-type {background-color: #FFCCCC;}
意思是：是给表格中表格主体的第一行tr下的第一个td添加背景颜色。
3、通过添加css添加伪元素给表格添加背景图片，内容为空。
table:before{}
4、position定位。
给表格相对定位后，通过给伪元素添加绝对定位实现背景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css控制表格</title>
<style>
body{ font-size:14px;}
table{
width:800px;
margin:0 auto;
border:1px solid #CCCCCC;
border-collapse:collapse;
position:relative;
box-shadow: 3px 3px 3px #999;
}
/*给表格添加背景*/
table::before{
content: '';
width:800px;
height:283px;
position:absolute;
left:0;
top:45px;
background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567832352407&di=12fc266f20ffaee11696fe2f3ed329ff&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181120%2Fb3a88794a3194a3fa85a31630f50589e.jpeg);
background-size: cove;
opacity: 0.3;
}
/*设置单元格*/
th, td{
border:1px solid #CCCCCC;
padding:15px;
text-align:center;
}
/*设置表头*/
table caption {
font-size: 1.3rem;
font-weight:bolder;
padding:10px;
}
/*使用伪类选择器给tr添加背景颜色*/
table thead > tr:first-of-type {
background-color:#0099FF;
}
/*使用伪类选择器给tbody中第一行tr中的第一个单元格添加背景颜色*/
table tbody > tr:first-of-type > td:first-of-type {
background-color: #FFCCCC;
}
/*使用伪类选择器给tbody中从后选择第2行tr中的第一个单元格添加背景颜色*/
table tbody > tr:nth-last-of-type(2) > td:first-of-type{
background-color: #D3FEF4;
}
/*使用伪类选择器给tfoot添加背景颜色*/
table tfoot{
background-color: #E0E0E0;
}
</style>
</head>
<body>
<table>
<!--标题-->
<caption>北京天坛***医生出诊表</caption>
<!--表格头部-->
<thead>
<tr>
<th>出诊时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
<tr>
</thead>
<!--表格主体-->
<tbody>
<tr>
<td rowspan="2">上午<br>8:30-11:30</td>
<td>张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
<tr>
<td>张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
<tr>
<td rowspan="2">下午<br>1:30-17:30</td>
<td>张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
<tr>
<td>张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
</tbody>
<!--表格页脚-->
<tfoot>
<tr>
<td>备注：</td>
<td colspan="7">出诊时间变动，请看***大屏幕</td>
</tr>
</tfoot>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
使用CSS制作一张带有四个圆角的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角表格</title>
<style>
/*表格外观样式*/
table {
width: 50%;
margin:0 auto;
text-align: center;
border-collapse: separate;
border-spacing: 0;
font-weight: bold;
font-size: 0.87rem;
color: #626262;
}
/*给表格th和td添加右边框和下边框*/
table tr th,table tr td {
padding: 5px;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
table thead tr{ background-color:#009999;}
table tbody tr:first-child td:first-child{
background-color:#CCCCCC;}
table tbody tr:nth-child(5) td:first-child{
background-color: #CCFFFF;}
/*给表格第一列th和td添加左边框*/
table tr th:first-child,table tr td:first-child {
border-left: 1px solid #333;
}
#a{border-left:none;}
/*给表格第一行tr下面的th添加上边框*/
table tr:first-child th,table > tr:first-child td{
border-top: 1px solid #333;
}
/*给表格左上角第一单元格添加圆角*/
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/*给表格右上角第一单元格添加圆角*/
table tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/*给表格左下角第一单元格添加圆角*/
table tfoot tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/*给表格右上角第一单元格添加圆角*/
table tfoot tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
</style>
</head>
<body>
<table>
<!--标题-->
<caption>北京天坛***医生出诊表</caption>
<!--表格头部-->
<thead>
<tr>
<th>出诊时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
<tr>
</thead>
<!--表格主体-->
<tbody>
<tr>
<td rowspan="4">上午<br>8:30-11:30</td>
<td>张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
<tr>
<td id="a">张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
<tr>
<td id="a">张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
<tr>
<td id="a">张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
<tr>
<td rowspan="4">下午<br>1:30-17:30</td>
<td>张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
<tr>
<td id="a">张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
<tr>
<td id="a">张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
<tr>
<td id="a">张奉春</td>
<td>张庆波</td>
<td>陈飞</td>
<td>赵玉沛</td>
<td>许志勤</td>
<td>幸兵</td>
<td>杨众</td>
</tr>
</tbody>
<!--表格页脚-->
<tfoot>
<tr>
<td>备注：</td>
<td colspan="7">出诊时间变动，请看***大屏幕</td>
</tr>
</tfoot>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
