<!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;
}