HTML实现合并单元格

我们要做如下样式的一个表格

HTML实现合并单元格_第1张图片
  • 首先实现一个简单的表格
    • 这个表格有四行四列,那我就先做一个这样的表格
    • 表格由 ** ** 来定义,行由定义,列
      来定义,
      主要结构是:
      
          ...
        
        ...
      
      ... ...
      • 最后实现的简单表格

        HTML实现合并单元格_第2张图片

      • 下一步需要合并单元格,需要使用的如下

        • rowspan,作用是指定单元格纵向跨越的行数
        • colspan的作用是指定单元格横向跨越的列数
        • 只要加在你需要合并的
      //colspan用法
          //表示所在单元格横跨三列
        
      // rowspan用法 //表示所在单元格横跨三行
      • 合并好单元格之后的效果
      HTML实现合并单元格_第3张图片
      • 最后需要加一个居中标题
        • html有一个标签caption 专门定义表格标题,并且在表格上方居中
      
         ...
      
      购物车
      • 最后发现一个问题
      • 表格中的文字没有加粗和居中

        如果把 td 换成 th 一切就都好了
        注意:th 用于表头

      HTML实现合并单元格_第4张图片

      你可能感兴趣的:(HTML实现合并单元格)