制作表格行列合并

一、1px边框表格（HTML）

要点：

1.  border="1"  加上  border‑collapse: collapse;  把边框合并，实现细线1px表格，不然会出现双层边框。
2. 合并行： rowspan="合并行数" （纵向合并，占几行）
3. 合并列： colspan="合并列数" （横向合并，占几列）

完整代码示例

html

横向合并两列
纵向合并两行	单元格
	单元格

 

二、核心知识点（考试必背）

1. 标签

•  ：表格
 ：行（table‑row）
 ：单元格（普通单元格）
 ：表头单元格，文字默认加粗居中
2. 合并属性
• colspan="n" ：列合并（左右合并），n代表要合并几列，写了colspan后，后面对应单元格要删掉
• rowspan="n" ：行合并（上下合并），n代表要合并几行，写了rowspan后，下方对应单元格要删掉
3. 实现1px细线表格两个关键：
① css： border‑collapse: collapse;  折叠边框，消除缝隙
② td设置  border:1px solid 颜色
三、做题规则（做题步骤）
1. 先画正常行列，数好几行几列
2. 找到要合并的单元格，加上 colspan / rowspan
3. 删除被合并掉多余的td标签
举个例子：3行3列表格，第一行前两列合并
html
合并