1.设置表格的边框
border：设置表格边框；
border-spacing ：设置单元格的间距；
border-collapse：设置边框分离，合并 默认是 separate(分离) collapse 合并；
padding：设置单元格内容和边框之间的距离；
我们先来建立一个表格：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><table> <!-- 标题caption --> <caption>学生信息</caption> <!-- 表头thead --> <thead> <tr> <th>序号</th> <th>学号</th> <th>姓名</th> <th>性别</th> <th>出生日期</th> </tr> </thead> <!-- 表格的主体内容tbody --> <tbody> <tr> <th>1</th> <td>001</td> <td>张三</td> <td>男</td> <td>2012-12-12</td> </tr> <tr> <th>2</th> <td>002</td> <td>李四</td> <td>女</td> <td>2011-11-11</td> </tr> <tr> <th>3</th> <td>003</td> <td>王五</td> <td>女</td> <td>2010-10-10</td> </tr> <tr> <th>4</th> <td>004</td> <td>赵六</td> <td>女</td> <td>2009-10-10</td> </tr> <tr> <th>5</th> <td>005</td> <td>钱七</td> <td>男</td> <td>2008-01-01</td> </tr> </tbody> <!-- 表脚部分tfoot --> <tfoot> <tr> <th>总计</th> <th colspan="4">5条数据</th> </tr> </tfoot></table></body></html>
复制代码
运行结果：
1.1 设置表格边框
border：设置表格边框；
运行结果：
1.2 设置单元格的间距；
border-spacing ：设置单元格的间距；
运行结果：
我们可以发现单元格之间的距离为 0 了，但是其实单元格之间的线为 2px；
1.3 设置边框分离，合并 默认是 separate(分离) collapse (合并)；
border-collapse：设置边框分离，合并 默认是 separate(分离) collapse 合并；
上面我们说到单元格之间的距离是 2px，原因是 border 边框默认是 separate(1px)，然后我们设置 border-spacing 为 0，因此将两个边框重叠在一起，所以为 2px；
这里我们将边框设置为合并；
运行结果：
可以明显地看到，中间单元格之间的线变淡了一点，其实已经由 2px 改为 1px 了；
1.4 设置单元格内容和边框之间的距离；
padding：设置单元格内容和边框之间的距离；
运行结果：
可以看到单元格里面的内容与边框之间的距离已经大了，为 5px；
整个边框的完整代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .t{ border: 1px gray solid; /* 设置单元格的间距 */ border-spacing: 0px; /* 设置边框合并collapse，默认是分离separate*/ border-collapse: collapse; } .t th{ border: 1px gray solid; /* 设置单元格内容与边框之间的距离 */ padding: 5px; } .t td{ border: 1px gray solid; /* 设置单元格内容与边框之间的距离 */ padding: 5px; }</style></head><body><table class="t"> <!-- 标题caption --> <caption>学生信息</caption> <!-- 表头thead --> <thead> <tr> <th>序号</th> <th>学号</th> <th>姓名</th> <th>性别</th> <th>出生日期</th> </tr> </thead> <!-- 表格的主体内容tbody --> <tbody> <tr> <th>1</th> <td>001</td> <td>张三</td> <td>男</td> <td>2012-12-12</td> </tr> <tr> <th>2</th> <td>002</td> <td>李四</td> <td>女</td> <td>2011-11-11</td> </tr> <tr> <th>3</th> <td>003</td> <td>王五</td> <td>女</td> <td>2010-10-10</td> </tr> <tr> <th>4</th> <td>004</td> <td>赵六</td> <td>女</td> <td>2009-10-10</td> </tr> <tr> <th>5</th> <td>005</td> <td>钱七</td> <td>男</td> <td>2008-01-01</td> </tr> </tbody> <!-- 表脚部分tfoot --> <tfoot> <tr> <th>总计</th> <th colspan="4">5条数据</th> </tr> </tfoot></table></body></html>
复制代码
2.设置表格的宽度
Table-layout
默认 auto 自动方式，根据单元格的内容自动调整宽度；
Fixed 固定方式 表格宽度固定；
运行结果：
3.设置表格隔行换色
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .t{ border: 1px gray solid; /* 设置单元格的间距 */ border-spacing: 0px; /* 设置边框合并collapse，默认是分离separate*/ border-collapse: collapse; /* 设置表格宽度 */ width:500px; /* 设置表格宽度的布局，默认是auto*/ table-layout: auto; } .t th{ border: 1px gray solid; /* 设置单元格内容与边框之间的距离 */ padding: 5px; } .t td{ border: 1px gray solid; /* 设置单元格内容与边框之间的距离 */ padding: 5px; } .t tr{ /* 设置表格内容背景色 */ background-color: red; } tbody tr.even{ /* 设置表格偶数行的背景色 */ background-color: yellow; }</style></head><body><table class="t"> <!-- 标题caption --> <caption>学生信息</caption> <!-- 表头thead --> <thead> <tr> <th>序号</th> <th>学号</th> <th>姓名</th> <th>性别</th> <th>出生日期</th> </tr> </thead> <!-- 表格的主体内容tbody --> <tbody> <tr> <th>1</th> <td>001</td> <td>张三</td> <td>男</td> <td>2012-12-12</td> </tr> <tr class="even"> <th>2</th> <td>002</td> <td>李四</td> <td>女</td> <td>2011-11-11</td> </tr> <tr> <th>3</th> <td>003</td> <td>王五</td> <td>女</td> <td>2010-10-10</td> </tr> <tr class="even"> <th>4</th> <td>004</td> <td>赵六</td> <td>女</td> <td>2009-10-10</td> </tr> <tr> <th>5</th> <td>005</td> <td>钱七</td> <td>男</td> <td>2008-01-01</td> </tr> </tbody> <!-- 表脚部分tfoot --> <tfoot> <tr> <th>总计</th> <th colspan="4">5条数据</th> </tr> </tfoot></table></body></html>
复制代码
运行结果：
4.设置表格列样式
比如上面的第 2 个：
如果要将学号这一列的数据居中显示，那么可以采用邻接选择器；
运行结果：
可以看到"学号"与"性别"这两列的内容已经居中，而且还可以修改背景颜色；
完整代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .t{ border: 1px gray solid; /* 设置单元格的间距 */ border-spacing: 0px; /* 设置边框合并collapse，默认是分离separate*/ border-collapse: collapse; /* 设置表格宽度 */ width:500px; /* 设置表格宽度的布局，默认是auto*/ table-layout: auto; } .t th{ border: 1px gray solid; /* 设置单元格内容与边框之间的距离 */ padding: 5px; } .t td{ border: 1px gray solid; /* 设置单元格内容与边框之间的距离 */ padding: 5px; } /* 将学号这一列的内容设置居中 */ th+td{ /* 邻接选择器 */ text-align: center; } /* 将性别这一列设置居中显示 */ th+td+td+td{ text-align: center; background-color: red; }</style></head><body><table class="t"> <!-- 标题caption --> <caption>学生信息</caption> <!-- 表头thead --> <thead> <tr> <th>序号</th> <th>学号</th> <th>姓名</th> <th>性别</th> <th>出生日期</th> </tr> </thead> <!-- 表格的主体内容tbody --> <tbody> <tr> <th>1</th> <td>001</td> <td>张三</td> <td>男</td> <td>2012-12-12</td> </tr> <tr> <th>2</th> <td>002</td> <td>李四</td> <td>女</td> <td>2011-11-11</td> </tr> <tr> <th>3</th> <td>003</td> <td>王五</td> <td>女</td> <td>2010-10-10</td> </tr> <tr> <th>4</th> <td>004</td> <td>赵六</td> <td>女</td> <td>2009-10-10</td> </tr> <tr> <th>5</th> <td>005</td> <td>钱七</td> <td>男</td> <td>2008-01-01</td> </tr> </tbody> <!-- 表脚部分tfoot --> <tfoot> <tr> <th>总计</th> <th colspan="4">5条数据</th> </tr> </tfoot></table></body></html>
复制代码
5.设置鼠标经过时行变色效果；
我们可以设置鼠标经过表格时，表格内容变色，这是一个鼠标事件 hover；
运行结果：
完整代码:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .t{ border: 1px gray solid; /* 设置单元格的间距 */ border-spacing: 0px; /* 设置边框合并collapse，默认是分离separate*/ border-collapse: collapse; /* 设置表格宽度 */ width:500px; /* 设置表格宽度的布局，默认是auto*/ table-layout: auto; } .t th{ border: 1px gray solid; /* 设置单元格内容与边框之间的距离 */ padding: 5px; } .t td{ border: 1px gray solid; /* 设置单元格内容与边框之间的距离 */ padding: 5px; } /* 设置鼠标经过时行变色效果 */ tbody tr:HOVER { /* 设置鼠标经过背景颜色变为淡青色 */ background-color: aqua; }</style></head><body><table class="t"> <!-- 标题caption --> <caption>学生信息</caption> <!-- 表头thead --> <thead> <tr> <th>序号</th> <th>学号</th> <th>姓名</th> <th>性别</th> <th>出生日期</th> </tr> </thead> <!-- 表格的主体内容tbody --> <tbody> <tr> <th>1</th> <td>001</td> <td>张三</td> <td>男</td> <td>2012-12-12</td> </tr> <tr> <th>2</th> <td>002</td> <td>李四</td> <td>女</td> <td>2011-11-11</td> </tr> <tr> <th>3</th> <td>003</td> <td>王五</td> <td>女</td> <td>2010-10-10</td> </tr> <tr> <th>4</th> <td>004</td> <td>赵六</td> <td>女</td> <td>2009-10-10</td> </tr> <tr> <th>5</th> <td>005</td> <td>钱七</td> <td>男</td> <td>2008-01-01</td> </tr> </tbody> <!-- 表脚部分tfoot --> <tfoot> <tr> <th>总计</th> <th colspan="4">5条数据</th> </tr> </tfoot></table></body></html>
复制代码
我是【程序员的时光】，热爱技术分享，信仰终身学习，爱健身，会点厨艺的热血青年，我们下期再见！
评论