HTML表格单元格合并

bg_18.jpg

一般来说,table、tr(行)、th(表头单元格)、td(普通单元格)就能组成一个html表格,复杂一点可以包括caption(标题)、thead(表头)、tbody (主体)和tfoot (页脚)等,我的理解就是更模块化语义化一些。
th 文本会居中加粗,而 td 内则是左对齐的普通文本

一、举个栗子

demo.png

以上demo代码如下:

1abc
2abc
3abc
4abc

二、常用属性

2.1 常用属性
  • border:边框宽度
  • cellpadding:单元边沿与其内容之间的空白
  • cellspacing:单元格之间的空白+ summary:表格的摘要
  • width:表格宽度
    注意:table的原始样式为 **display:table;** 所以给table设置height无效。
2.2
常用属性
  • align:行中内容的水平对齐方式
  • valign: 行中内容的垂直对齐方式
2.3
常用属性
  • align:单元格内容的水平对齐方式
  • valign: 单元格内容的垂直对齐方式
  • rowspan:单元格占的行数
  • colspan:单元格占的列数

三、合并单元格

理解了浏览器解析和展示表格的过程,就不必记公式。
就像玩俄罗斯方块一样:
单元格排列遵循从上往下和从左往右的规律
遇到rowspan大的就竖着鼓起来
遇到colspan大的就多坐几个凳子
但是一行还是那一行,如下图:


1.png

注意:表格的列数由最宽的一行决定

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