构成
表格的四个元素:table、caption、tbody、thead、th、tr、td、tfoot
最少要table、tr、td
table:声明是表格
caption:标题,和tbody并列
tbody:表格主体,是浏览器默认加的,我们自己也可以加,包裹着tr和td
thead:表头
th:一般放在表头,默认加粗,居中
tr:table row ,表示行
td:单元格
tfoot:表格页脚,和td差不多,很少用
<table class="tb1">
<caption>统计表</caption>
<thead>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>A</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>女</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>男</td>
</tr>
</tbody>
</table>
CSS属性
边框 border
.tb1,.tb1 td{
border: 1px solid red;
}
边框折叠 border-collapse
默认是不合并,值是separate
.tb1,.tb1 td{
border: 1px solid red;
border-collapse: collapse;/*常用*/
}
单元格间距 border-spacing
表格居中
.tb1 {
margin: 1px auto;
}
第一行加粗
隔行变色
.tb1 tr:nth-child(2n) {
background-color: #FF0000
}
单元格合并
就是调整单元格的占格子数,调整后,要删除对应原本的格子,否则其他的会往右挤
<!-- 横向向右合并1格 -->
<th colspan="2">序号</th>
<!-- 垂直向下合并1格 -->
<th rowspan="2">序号</th>
<!-- 横向向右合并1格,垂直向下合并1格,相当于合并了4格 -->
<th colspan="2" rowspan="2">序号</th>