<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title><style type="text/css">
/*
设置表格宽度
*/
table{
width: 300px;
margin: 0 auto;
border: 1px solid black;
/*
table和td边框之间默认有一个距离
通过border-spacing属性可以设置这个距离
*/
border-spacing: 0px;
/*
border-collapse可以用来设置表格的合并
如果设置了边框合并，则border-spacing自动失效
*/
border-collapse: collapse;
}
/*表格设置边框*/
td,th{
border: 1px solid black;
}
/*隔行变色*/
tr:nth-child(odd){
background-color: #bfa;
}
/*鼠标移入tr改变颜色*/
tr:hover{
background-color: yellow;
}
</style>
</head>
<body>
<!--
table是一个块元素
-->
<table>
<tr>
<!--
可以使用th标签来表示表头中的内容
用法和td一样，不同的是它会有一些默认效果
-->
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>2</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>3</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
</table>
</body>
</html>
表格table和td边框之间默认有一个距离
通过border-spacing属性可以设置这个距离
border-spacing可以用来设置这个距离
border-collapse可以用来设置表格合并
如果设置了边框合并，则boreder-spacing自动失效
隔行变色 tr：nth-child（odd）{
background-color: #bfa;
} ------odd是奇数行 even是偶数行
鼠标移tr改变颜色
tr：hover{
background-color: yellow;
}