热门服务商品项目web表格设计,行与列的合并,很经典
效果展示：
HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>热门服务商品项目web表格设计,行与列的合并,很经典</title></head><body><tableborder="1"cellpadding="5"cellspacing="0"width="800"height="500"align="center"><!-- 表格标题 --><caption style="font-size: 1.5rem; margin-bottom: 10px">各城市热门服务商品项目表案例</caption><thead><th colspan="2"></th><th>北京</th><th>上海</th><th>深圳</th><th>广州</th><th>成都</th></thead><!-- 主体区域 --><tbody align="center" style="letter-spacing: 5px"><tr><!-- 注: 行与列的合并属性必须写到td标签内 --><td rowspan="3">装修</td><td>1</td><td>半包装修</td><td>全包装修</td><td>旧房翻新</td><td>整体装修</td><td>全案装修</td></tr><tr><!-- 第一个单元格已被行方向合并,删除或注释 --><!-- <td></td> --><td>2</td><td>室内装修</td><td>别墅装修</td><td>办公室装修</td><td>写字楼装修</td><td>老房子装修</td></tr><tr><!-- 第一个单元格已被行方向合并,删除或注释 --><!-- <td></td> --><td>3</td><td>卫生间装修</td><td>厨房装修</td><td>客厅装修</td><td>卧室装修</td><td>阳台装修</td></tr><!-- 安装整行为空,跨所有列 --><tr><!-- 单独设置,以覆盖原来的列样式 --><td colspan="7" bgcolor="#F0FFFF">单项安装项目不做</td></tr><!-- 将装修的项目复制三个tr创建维修的项目 --><tr><!-- 注: 行与列的合并属性必须写到td标签内 --><td rowspan="3">维修</td><td>4</td><td>家具维修</td><td>衣柜维修</td><td>橱柜维修</td><td>鞋柜维修</td><td>酒柜维修</td></tr><tr><td>5</td><td>水电维修</td><td>水管维修</td><td>水龙头维修</td><td>马桶维修</td><td>花洒维修</td></tr><tr><td>6</td><td>其它维修</td><td colspan="4">门窗、疏通、家电等维修不做</td></tr></tbody></table><p style="width: 800px; margin: auto; margin-top: 10px; text-align: right"><time>2020 年 9 月 30 日</time></p></body></html>