关于HTML＜table＞标签如何合并单元格

主要是利用td标签或者th标签的rowspan（行合并）colspan（列合并）两个属性。

我们以程序实例来说明：

1.首先构建一个表格如图

<table border="1" style="height: 200px;width: 200px;"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td >4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>

运行结果如图所示：

2.使用colspan列合并合并第一行的所有列

<table border="1" style="height: 200px;width: 200px;"><tr><td colspan="3">1</td> <!--注意此处的td标签由原来的三个变为一个--></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>

运行结果如图所示：

3.使用rowspan（行合并）合并第一列的所有行

<table border="1" style="height: 200px;width: 200px;"><tr><td rowspan="3">1</td><!--使用rowspan进行合并--><td>2</td><td>3</td> </tr><tr><td>4</td><td>5</td><!--注意此处的只有两列 td标签变为2个--></tr><tr><td>7</td><td>8</td><!--注意此处的只有两列 td标签变为2个--></tr></table>

运行结果如下：

如此就通过rowspan和colspan实现了表格的行列合并。

一定要注意的是，合并之后td标签的行列数的变化。否则会得不到预期结果，只相当于占位。

关于HTML＜table＞标签如何合并单元格相关推荐

20180227：关于HTML中table标签中合并单元格时遇到的问题
今天在初次学习HTML的时候,便在table标签的使用上遇到了个问题,就是在合并单元格时发现单元格的合并显示之后并没有按自己所想的那样显示,具体问题也描述不出来,通过代码和实例来记录一下这个烦人的问题 ...
rowspan table布局_table合并单元格colspan和rowspan
colspan和rowspan这两个属性用于创建特殊的表格. colspan是"column span(跨列)"的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列 ...
table表格表头合并单元格问题
1.效果图 2.代码 <thead><tr><th rowspan="2">班级</th><th rowspan=" ...
表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例
表格标签表格主要用于展示数据 <table><tr><td>单元格内的文字</td>...</tr>... </table> ...
HTML常用标签之表格标签(合并单元格)
表格标签之合并单元格前言一.合并单元格的方式二.目标单元格三.删除单元格四 .代码实现总结前言关于表格标签基础点这里→HTML常用标签之表格标签在某些特殊情况下我们需要把多个单元格合 ...
HTML_合并单元格
首先我们创建一个3行3列的表格: <table border="1px" width="400px" height="300px" s ...
python 2x xlrd使用merged_cells 读取的合并单元格为空
一个简单的excel 如下代码如下 #!/usr/bin/python# # -*- coding: utf-8 -*- import xlrd import sys reload(sys) sys ...
iview合并单元格
使用iview的table要如何合并单元格其实它的原理是拆分单元格代码: <Table :columns="columns1" :data="data1&quo ...
markdown 合并单元格
markdown 合并单元格 markdown 本身没有合并单元格的语法.但是在实际使用中却有合并单元格的需求. markdown 虽然没有合并单元格的语法,但是 markdown 是兼容 HTML ...

关于HTML＜table＞标签如何合并单元格

关于HTML＜table＞标签如何合并单元格相关推荐

最新文章

热门文章