构成

表格的四个元素：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>