<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
table {
width: 40%;
/* border: 1px solid black; */
margin: 0 auto;
/*
table和td边框之间默认有一个距离
通过border-spacing属性可以设置这个距离
*/
border-spacing: 0;
/*
border-collapse可以用来设置表格的边框合并
如果设置了边框合并，则border-spacing自动失效
*/
border-collapse: collapse;
/* background-color: #bfa; */
}
td , th {
border: 1px solid black;
}
tr:nth-child(even) {
background-color: #bfa;
}
tr:hover {
background-color: #ff0;
}
</style>
</head>
<body>
-->
<!--
在HTML中，使用table标签来创建一个表格
table 是块元素
-->
<table>
<!--
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
-->
<tr>
<!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
<!--
可以使用th标签来表示表头中的内容
-->
<th>a1</th>
<th>a2</th>
<th>a3</th>
<th>a4</th>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
<!--
rowspan用来设置纵向的合并单元格
-->
<td rowspan="2">b4</td>
</tr>
<tr>
<td>c1</td>
<td>c2</td>
<td>c3</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<!--
colspan横向的合并单元格
-->
<td colspan="2">d3</td>
</tr>
</table>
</body>
</html>
网友评论