web初探-css-设置表格样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_44512194/article/details/98387631

设置表格的边框

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>