HTML实现表格的核心是table（表格）、tr（行）、td（单元格）。

基础结构

<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr>
</table>

效果如下：

复杂结构

合并单元格

依赖colspan和rowspan属性，分别表示跨几列、跨几行.

<table><tr><th>no</th><th>c1</th><th>c2</th><th>c3</th></tr><tr><td>1</td><td colspan="2">r1-c12</td><td rowspan="2">r12-c3</td></tr><tr><td>2</td><td></td><td></td></tr><tr><td>3</td><td colspan="2" rowspan="2">r34-c12</td><td></td></tr><tr><td>4</td><td></td></tr>
</table>

no	c1	c3
1	r1-c12	r12-c3
2		r12-c3
3	r34-c12
4	r34-c12

边框、行高、间距等样式

有些浏览器渲染时，表格和单元格的边框可能会渲染两条线，可以通过样式border-collapse:collapse;解决。

有些浏览器中，空单元格的样式渲染会有奇怪的问题，可以将单元格内容设置一个空格( )来解决。

具体可参考下面文章：

浅谈如何正确给table加边框
表格单元格的宽度和高度的设置

工具

推荐一款可视化编辑、快速生成表格代码的工具：http://www.tablesgenerator.com/html_tables

HTML表格（合并单元格、边框、行高、间距等样式）相关推荐

合并单元格的行高自动调整
合并单元格的行高自动调整一.思路 #mermaid-svg-iekgewFLT3w8zJv0 {font-family:"trebuchet ms",verdana,arial, ...
View UI （iview）表格合并单元格（行/列合并）
有时我们在开发过程中会遇到表格里有合并单元格的需求. 今天以View UI (iview)组件库为例. 1. 打开iview官网-table会发现有合并单元格示例: 2. 但是在实际项目中,无法做到像 ...
xlsx导出表格合并单元格边框样式缺失
工作的时候遇到这个问题,找了很久,最后根据这位大哥的方法稍做修改解决了问题. 在此记录总结一下,以免之后用到 //调用传参 addRangeBorder(wb['Sheets']['分组表']['!m ...
html table设置行高_单元格的行高怎么设置 html语言怎么设置设置表格行高？
在Excel中,如何设置表格最合适的行高.列宽? 本次操作使用的软件为Excel电子表格,软件版本为office家庭和学生版2016. 小编只是难过不能陪你一起到老,再也没有机会,看到你的笑. 请问怎 ...
使用poi导出excel，及合并单元格边框显示问题
使用poi导出excel,及合并单元格边框显示问题. 首先创建workbook.sheet HSSFWorkbook workbook = new HSSFWorkbook();HSSFSheet s ...
POI-HSSFWorkbook合并单元格边框及文字居中问题
POI-HSSFWorkbook合并单元格边框及文字居中问题首先创建一个需要合并单元格的样式 //合并的单元格样式 HSSFCellStyle boderStyle = wb.createCellS ...
jquery操作表格合并单元格
$('#table_2').mergeCell({cols: [7,8,9] ///参数为要合并的列,例如[0,5],表示第0和第5列});/** * 操作表格合并单元格行 * 2016年12月1 ...
elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...
Word插入表格相邻单元格边框断开方法
Word插入表格相邻单元格边框断开方法写论文要将相邻单元格边框打断,见了很多教程,这里详细讲解一些如何实现,重点要掌握应用于单元格和段落的边框是不同的,应用于段落的边框之间是分开的. 实现效果: 操 ...
使用POI创建word表格合并单元格兼容wps
poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...

HTML表格（合并单元格、边框、行高、间距等样式）

基础结构

复杂结构

合并单元格

边框、行高、间距等样式

工具

HTML表格（合并单元格、边框、行高、间距等样式）相关推荐

最新文章

热门文章