web初探-css-设置表格样式
设置表格的边框
Border：设置表格边框； Border-collapse：设置边框分离，合并 默认是 separate(分离) collapse 合并； Border-spacing ：设置单元格的间距； Padding：设置单元格内容和边框之间的距离；
设置表格的宽度
Table-layout 默认 auto 自动方式，根据单元格的内容自动调整宽度； Fixed 固定方式 表格宽度固定
设置表格隔行换色
直接上代码吧：
<style type ="text/css">
.t1{
border: red 1px solid; /* 先设置表格边框样式 */
}
.t1 td
{
border: red 1px solid; /* 加上td标签样式 */
}
.t1 tr{
background-color: lightgreen; /* 加上tr标签样式 */
}
.t1 tr.even /* 这个语法还不是很清楚，但这里就是重点，另外一种even样式， */
{
background-color: green;
}
</style>
</head>
<body>
<table class = "t1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>爱好</td>
</tr>
<tr class = "even">
<td>张晓东</td>
<td>男</td>
<td>19</td>
<td>画画</td>
</tr>
<tr>
<td>王芳</td>
<td>女</td>
<td>20</td>
<td>唱歌</td>
</tr>
<tr class = "even">
<td>赵孙磊</td>
<td>男</td>
<td>18</td>
<td>编程</td>
</tr>
<tr>
<td>孙诗诗</td>
<td>女</td>
<td>18</td>
<td>舞蹈</td>
</tr>
</table>
效果
设置表格列样式
这里要强调一下一个< th> 标签，它表示表头单元格，有列表头和行表头，如下红色标记： 开始的时候还很困扰我，因为在学习一种选择器的时候，比如，如果我想只将年龄这一列变为黄色，使用的是下面的选择器：
th+td+td+td{
text-align: center;
background-color: yellow;
}
效果： 开始不明白这个选择器的语法，现在知道，上面语法中，一个td表示一个列单元格，三个td相加则表示第三列。所以，使用上面的选择器时，每行也要加上th标签 eg：
<tr> <th>1</th> <td>张晓东</td> <td>男</td> <td>19</td> <td>画画</td> </tr>
设置鼠标经过时行变色效果
<style type ="text/css">
tr:hover {
background-color: aqua;
}
<style>
鼠标经过行时，行会变色
caption,thead，tbody，tfoot标签
caption用于设置表格标题
thead 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
tbody 元素用于对 HTML 表格中的主体内容进行分组。
tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
eg：
<table class = "t1"> <caption>学生信息</caption> <thead> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>爱好</th> </tr> <thead> <tbody> <tr class = "even"> <th>1</th> <td>张晓东</td> <td>男</td> <td>19</td> <td>画画</td> </tr> <tr> <th>2</th> <td>王芳</td> <td>女</td> <td>20</td> <td>唱歌</td> </tr> <tr class = "even"> <th>3</th> <td>赵孙磊</td> <td>男</td> <td>18</td> <td>编程</td> </tr> <tr> <th>4</th> <td>孙诗诗</td> <td>女</td> <td>18</td> <td>舞蹈</td> </tr> </tbody> <tfoot> <tr> <td>1</td> <td>2</td> </tr> </tfoot> </table>