HTML+CSS宝典 HTML进阶 表格
一、基本解构
table 表示表格，盒子的类型是 display: table
caption 表格标题，文字样式默认居中，盒子的类型是 display: table-caption，还有 table-row、table-col 一大堆盒子类型
thead 表示表格头
tbody 表示表格体
tfoot 表示表格尾
tr 表示一行，叫做 table row
一行里面是列，可用 td 也可以用 th
th 表示一个单元格的标题，叫做 table head
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style>
table{
width: 100%;
}
table caption{
font-size: 2em;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<tbody>
<!-- tr*5>td*5{数据$} -->
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>二、表格边框
现在表格没有边框，怎么给表格加边框？
选择 th 和 td 给表格加边框
<style>
table{
width: 100%;
}
table caption{
font-size: 2em;
font-weight: bold;
}
/* 给表格加边框 */
th, td{
border: 1px solid #999;
}
</style>现在有边框列，但是每一个单元格之间是有空隙，
这个空隙是可以在table元素里面控制的，这个属性是 border-collapse ，表示的是边框的折叠方式
border-collapse 有两个取值
border-collapse: separste 默认值 separste，表示边框是分离的
border-collapse: collapse collapse表示折叠
<style>
table{
width: 100%;
border-collapse:collapse; /* 边框折叠，注意border-collapse属性要写到table元素里面 */
}
table caption{
font-size: 2em;
font-weight: bold;
}
th, td{
border: 1px solid #999;
}
</style>th 里面的数据是默认居中的
tb 里面的数据是没有居中的
我们自己设置 css 居中就可以了 text-align: center;
<style>
table{
width: 100%;
border-collapse:collapse;
}
table caption{
font-size: 2em;
font-weight: bold;
}
th, td{
border: 1px solid #999;
text-align: center; /* 设置td内容居中 */
}
</style>三、单元格的合并
1、跨列使用 colspan 属性
表尾（tfoot）也加一行 tr，
最后 5 列 td 合并成一个单元格 td
这时候给 td 加一个 colspan 属性
1. col 的意思是 Column（列）
2. span 跨越的意思
3. colspan 表示跨越多少列
colspan="5" 跨越5列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨列使用colspan属性</title>
<style>
table{
width: 100%;
border-collapse:collapse;
}
table caption{
font-size: 2em;
font-weight: bold;
}
th, td{
border: 1px solid #999;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
</tbody>
<tfoot>
<!-- 表尾 -->
<tr>
<!--
<td></td>
<td></td>
<td></td>
<td></td>
-->
<td colspan="5">和计</td>
</tr>
</tfoot>
</table>
</body>
</html>如果前面还有一列，就要跨越4列 colspan="4"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨越4列</title>
<style>
table{
width: 100%;
border-collapse:collapse;
}
table caption{
font-size: 2em;
font-weight: bold;
}
th, td{
border: 1px solid #999;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>(>^ω^<)喵</td>
<td colspan="4">和计</td>
</tr>
</tfoot>
</table>
</body>
</html>2、跨行使用 rowspan 属性，row 行的意思
第一个行的第一个单元格要跨越两行
1. td 设置 rowspan="2"
2. 下一个列的第一个单元格就不写列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨行使用rowspan属性</title>
<style>
table{
width: 100%;
border-collapse:collapse;
}
table caption{
font-size: 2em;
font-weight: bold;
}
th, td{
border: 1px solid #999;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<tbody>
<tr>
<!-- 跨越两行 -->
<td rowspan="2">数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<!--
这一行的第一个单元格就不写列
<td>数据1</td>
-->
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">和计</td>
</tr>
</tfoot>
</table>
</body>
</html>四、设置一下表格的样式
设置单单元格 th, td 的高度
设置 tr 隔行变色
<style>
table{
width: 100%;
border-collapse:collapse;
}
table caption{
font-size: 2em;
font-weight: bold;
margin:1em 0; /* 设置标题的margin */
}
th, td{
border: 1px solid #999;
text-align: center;
padding: 10px 0; /* 设置单单元格的高度 */
}
/* 给表头设置背景颜色，找到thead里面的tr */
thead tr{
background-color: #008c8c;
color: #fff;
}
/* 表体实现以隔行变色，odd表示奇数，even表示偶数 */
tbody tr:nth-child(even){
background-color: #fefee1;
}
/*
荧光棒效果
鼠标移入一行的时候，这一行整体变色，
给tbody下面的tr设置:hover
*/
tbody tr:hover{
background-color: #ff8c8c;
color: #fff;
}
</style>选中表格所有，第一列的数据，怎么写选择器?
1. 选中 tbody 下面 tr 的 td tbody tr td:first-child{…}
2. 或者 tbody td:first-child{…}
我们选中 td，同时保证 td 是第一个子元素
<style>
table{
width: 100%;
border-collapse:collapse;
}
table caption{
font-size: 2em;
font-weight: bold;
margin:1em 0;
}
th, td{
border: 1px solid #999;
text-align: center;
padding: 10px 0;
}
thead tr{
background-color: #008c8c;
color: #fff;
}
tbody tr:nth-child(even){
background-color: #fefee1;
}
tbody tr:hover{
background-color: #ff8c8c;
color: #fff;
}
/* 选中表格所有，第一列的数据，怎么写代码? */
tbody td:first-child{
color: chocolate;
}
/* 最后一行，合计两个字靠右排列 */
tfoot td{
text-align: right;
padding-right:20px;
}
</style>
Leave a comment
0 Comments.