详解html中表格table的行列合并问题解决

发布时间：2020-07-28 16:29:53 作者：梁木口

这篇文章主要介绍了详解html中表格table的行列合并问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

因为要做个网站，里面的内容除了大段文字之外，还有大量的表格，这就发现了表格排版的问题。

一般简单的表格，例如：

这种形式就比较简单，只要简单地将<tr></tr><td></td>(或者<th></th>就行了

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a target=_blank href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a target=_blank href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
td{width:200px;
   height:100px;
   border:#000 2px solid;
   margin:0px;
   padding:0px;
}
</style>
</head></p><p><body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

但是到了一些比较错落的就需要用到colspan（跨列）和rowspan（跨行）了。

colspan（跨列）和rowspan（跨行）就是表面意思，也可以看为行列合并。

colspan（跨列）：

上图中红色部分即为此格已跨两列。
代码如下（仅是部分代码）：

<table>
<tr>
<td colspan="2" style="background:#F00"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

如果想要如此工整的表格，就必须先预算在要跨列的格所在行以下的行中含有最多格子的行的格子数是多少，决定了跨列格要跨的格数。

以上图举例，第二行和第三行的格子数均为3，所以想要形成上图的效果，第一行第一列就想要横跨两列，所以colspan="2"

rowspan（跨行）的方法与colspan（跨列）类似。

rowspan（跨行）与colspan（跨列）同时出现的例子：

代码如下（仅是部分代码）：

<table>
<tr>
<th></th>
<th colspan="5"></th>
</tr>
<tr>
<th></th>
<th <span style="color:#000000;">colspan</span>="3"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th rowspan="3"></th>
<th></th>
<th colspan="2"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th colspan="2"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th colspan="2"></th>
<th></th>
<th></th>
</tr>
</table>
<table>
<tr class="zj">
<th rowspan="4"></th>
<th colspan="8"></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th colspan="4"></th>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<th></th>
<th colspan="7"></tr>
</table>

到此这篇关于详解html中表格table的行列合并问题解决的文章就介绍到这了,更多相关html表格table行列合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

Tag：HTML table 行列合并

使用html5实现表格实现标题合并的实例代码
在前端开发中经常会遇到标题合并的需求，今天小编给大家带来了使用html5实现表格实现标题合并的实例代码，感兴趣的朋友跟随小编一起看看吧
2019-05-13
HTML表格合并的具体实现方式
表格是日常常用的工具，很多时候需要用到单元合并，本文主要介绍了HTML表格合并的具体实现方式，具有一定的参考价值，感兴趣的可以了解一下
2023-01-05
HTML中table表格拆分合并(colspan、rowspan)
这篇文章主要介绍了HTML中table表格拆分合并(colspan、rowspan),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编
2021-04-07
html+css合并表格边框的示例代码
这篇文章主要介绍了html+css合并表格边框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习
2021-03-31
html原生table实现合并单元格以及合并表头的示例代码
表格是常见的数据统计的一种形式，合并单元格及合并表头经常在复杂表格中遇到，本文主要介绍了html原生table实现合并单元格以及合并表头的示例代码，感兴趣的可以了解一下
2023-04-28

详解html中表格table的行列合并问题解决

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容