<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
overflow: hidden;
width: 400px;
height: 200px;
margin: 100px auto 0;
border-collapse: collapse; /*合并边框*/
border-radius: 20px;
}
table thead tr{
background-color: #b9c9fd;
}
table tbody tr:first-child{
background-color: #d0d9fd;
}
tr{
background-color: #e8edff;
}
td{
border: 1px solid #000;
text-align: center;
}
.on{
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<caption>前端老师</caption>
<thead> <!-- 表格头部 -->
<tr>
<th>姓名</th> <!--th加粗-->
<th>身高</th>
<th>体重</th>
<th>成绩</th>
<th>颜值</th>
</tr>
</thead>
<tbody> <!-- 表格身体 -->
<tr><!--表示表格的行-->
<td>乌拉</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>朱雀</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>玄武</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>小龙</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td colspan="5" class="on">大比拼</td><!--rowspan-->
</tr>
</tbody>
</table>
<!--
继承
继承指的是特定的css属性向下传递到子孙元素
默认继承的css属性
color
font:small-caps italic bold 50px/100px 'Microsoft yahei';
text-align
text-indent
letter-spacing
word-spacing
a标签不能继承父级的color值
默认不继承的属性需要继承的话 可以使用inherit 举个例子
background-color:inherit 设置背景颜色继承父级的背景颜色
-->
</body>
</html>
