image.png

构成

表格的四个元素: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差不多,很少用

  1. <table class="tb1">
  2. <caption>统计表</caption>
  3. <thead>
  4. <th>序号</th>
  5. <th>姓名</th>
  6. <th>性别</th>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td>1</td>
  11. <td>A</td>
  12. <td></td>
  13. </tr>
  14. <tr>
  15. <td>2</td>
  16. <td>B</td>
  17. <td></td>
  18. </tr>
  19. <tr>
  20. <td>3</td>
  21. <td>C</td>
  22. <td></td>
  23. </tr>
  24. </tbody>
  25. </table>

image.png

CSS属性

image.png

边框 border

  1. .tb1,.tb1 td{
  2. border: 1px solid red;
  3. }

image.png

边框折叠 border-collapse

默认是不合并,值是separate

  1. .tb1,.tb1 td{
  2. border: 1px solid red;
  3. border-collapse: collapse;/*常用*/
  4. }

image.png

单元格间距 border-spacing

image.png

表格居中

  1. .tb1 {
  2. margin: 1px auto;
  3. }

image.png

第一行加粗

image.png

隔行变色

  1. .tb1 tr:nth-child(2n) {
  2. background-color: #FF0000
  3. }

单元格合并

就是调整单元格的占格子数,调整后,要删除对应原本的格子,否则其他的会往右挤

  1. <!-- 横向向右合并1格 -->
  2. <th colspan="2">序号</th>
  3. <!-- 垂直向下合并1格 -->
  4. <th rowspan="2">序号</th>
  5. <!-- 横向向右合并1格,垂直向下合并1格,相当于合并了4格 -->
  6. <th colspan="2" rowspan="2">序号</th>

image.png