怎样合并html中的单元格

我们使用html创建表格的时候，合并单元格是最常见的需求。那么如何实现这种功能呢？下面我给大家分享一下。

工具/材料

Sublime Text

01

首先打开Sublime Text软件，新建一个html文档，如下图所示

02

然后我们在html中定义一个表格，并且给表格设置边框，如下图所示

03

接下来我们通过colspan来合并单元格的内容，如下图所示

04

最后我们运行页面程序，你就会看到两个单元格的内容都合并到一个里面了，如下图所示

colspan 是合并列，rowspan是合并行，合并行的时候，比如rowspan="2"，它的下一行tr会少一列；合并列的时候 colspan="2"，此行的列会少一列。

代码演示：

<table border="1" style={{margin:200}}>

   

<tbody>

     

<tr>

       

<th colspan="2">我是占位符</th>

     

<th colspan="2">我是占位符</th>

     

</tr>

     

<tr>

       

<th rowspan="2">我是占位符</th>

       

<th>我是占位符</th>

       

<th>我是占位符</th>

       

<th>我是占位符</th>

     

</tr>

     

<tr>

       

<th>我是占位符</th>

       

<th>我是占位符</th>

<th>我是占位符</th>

     

</tr>

   

</tbody>

 

</table>

演示结果

扩展资料：

rowspan规定表头单元格应该横跨的行数。注意： rowspan="0" 告知浏览器使单元格横跨到表格组件中的最后一个行（thead、tbody 或 tfoot）。

方法：

<table border=1>

<tr>

<td rowspan=2>1.1</td><td>1.2</td>

</tr>

<tr>

<td>2.2</td>

</tr>

</table>

rowspan合并行，colspan 合并列

定义和用法：

<table>标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

HTML 与 XHTML 之间的差异：

在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD，table 元素的 "align" 和 "bgcolor" 属性是不被支持的。

TIY 实例：

表格

这个例子演示如何在 HTML 文档中创建表格。

表格边框

本例演示各种类型的表格边框。

没有边框的表格

本例演示一个没有边框的表格。

表格中的标题(Headings)

本例演示如何显示表格标题。

空单元格

本例展示如何使用 "&nbsp" 处理没有内容的单元格。

带有标题的表格

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

本例演示如何在不同的元素内显示元素。

单元格填充(Cell padding)

本例演示如何使用单元格填充来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用单元格间距增加单元格之间的距离。

向表格添加背景颜色或背景图像

本例演示如何向表格添加背景

向表格单元添加背景颜色或者背景图像

本例演示如何向一个或者更多表格单元添加背景

在表格单元中排列内容

本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。

框架(frame)属性

本例演示如何使用 "frame" 属性来控制围绕表格的边框。

---