HTML表格合并

最新推荐文章于 2024-05-24 17:50:52 发布
最新推荐文章于 2024-05-24 17:50:52 发布
阅读量7.7k 收藏 11
点赞数 6
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duonibaby/article/details/110498607
版权

1.创建一个三行三列的表格,代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table height="300" width="300" border="1" >
	<caption>我是标题</caption>
	<thead>
		<tr>
			<th>英雄</th>
			<th>性别</th>
			<th>职业</th>
			
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>亚索</td>
			<td>男</td>
	        <td >中单</td>
		</tr>
		<tr>
			<td>卡莎</td>
			<td>女</td>
			<td >ADC</td>
		  
		</tr>
		<tr>
			<td>寒冰</td>
			<td>女</td>
		    <td>ADC</td>
		</tr>
	</tbody>
	</table>
</body>
</html>

结果如下图所示：
在这里插入图片描述

2.表格的属性

属性含义常用属性值
border设置表格的边框（border=0）像素值
cellspacing设置单元格与单元格边框之间的空白间距像素值（默认2
cellpadding设置单元格内容与单元边框之减的空白间距像素值（默认2）
width设置表格的宽度像素值
height设置表格的高度像素值
align设置表格在网格之中的对齐方式left、centre、right

3.合并单元格

跨行合并：rowspan
跨列合并：colspan
合并单元格的思想：将多个内容合并的时候就会有多余的东西出来，将其删除。如：将3个td合并成一个，那就多余了2个td,则将多余的两个td删除。
公式：删除的个数=合并的个数-1
如将3个单元格合并成一个，则应删除多余的2个。
单元格合并的次序：从上至下 从左至右
将表中两个ADC合并为1个单元格，代码如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table height="300" width="300" border="1" >
	<caption>我是标题</caption>
	<thead>
		<tr>
			<th>英雄</th>
			<th>性别</th>
			<th>职业</th>
			
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>亚索</td>
			<td>男</td>
	        <td >中单</td>
		</tr>
		<tr>
			<td>卡莎</td>
			<td>女</td>
			 <td  rowspan="2">ADC</td>
		</tr>
		<tr>
			<td>寒冰</td>
			<td>女</td>
		</tr>
	</tbody>
	</table>
</body>
</html>

结果如下图所示：
在这里插入图片描述
将第三行前两列合并，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table height="300" width="300" border="1" >
	<caption>我是标题</caption>
	<thead>
		<tr>
			<th>英雄</th>
			<th>性别</th>
			<th>职业</th>
			
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>亚索</td>
			<td>男</td>
	        <td >中单</td>
		</tr>
		<tr>
			<td>卡莎</td>
			<td>女</td>
			 <td>ADC</td>
		</tr>
		<tr>
			<td colspan="2">寒冰/女</td>
			<td>ADC</td>
		</tr>
	</tbody>
	</table>
</body>
</html>

结果如下图所示：
在这里插入图片描述

duonibaby
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何用HTML制作一个3行3列的表格,如何利用表格制作网页
weixin_34620163的博客
06-19 7375
将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。HTML 具有很强的表格功能，使用户可以方便地创建出各种规格的表格，并能对表格进行特定的修饰，从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。表格在网页设计中...
HTML——表格单元格合并
m0_61604593的博客
04-10 1092
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格单元格的合并</title> </head> <body> <table border="1px" width="50%" height="200px"> <tr align="center"> .
NO.11 HTML之表格标签中最后一个知识点---行列合并
To be a better man！
12-07 1396
现在跟我一起学习一下行列的合并： 列的合并（属性：colspan）   贴代码来演示一下： 先来做一个3行3列的细线表格： test 横向单元格的合并 效果如图所示： 合并第一行的左侧两个单元格： 代码： test 横向单元格的合并 -->
html一个简单的表格
luobo2345的博客
10-29 2616
做一个简单的表格，表格框的大小，宽度，表格标题，以及合并表格的行和列。（列没写，只要把rowspan换成colspan就可以了） 我要写一个三行三列的表格 我的小伙伴们 姓名 性别
html中table表格的行、列怎么进行合并
最新发布
naozibuok的博客
05-24 1393
在HTML中，使用 <table> 元素来创建表格，而行（tr）和列（td或th）的合并可以通过和属性来实现。这两个属性允许单个表格单元格（td或th）跨越多个列或行。colspan：用于合并列。它定义了一个表格单元格应该横跨多少列。rowspan：用于合并行。它定义了一个表格单元格应该横跨多少行。
用html写一个3行3列的表格
weixin_35750953的博客
02-17 738
行1 行2 行3 单元格1 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7 单元格8 单元格9
【HTML】HTML 表格 ③ ( 合并单元格 | 跨行合并 | 跨列合并 | 单元格合并顺序 | 跨行设置 rowspan 属性 | 跨列设置 colspan 属性 )
热门推荐
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-10 3万+
一、合并单元格、 1、合并单元格方式、 2、合并单元格顺序、 3、合并单元格流程、 二、合并单元格示例、 1、原始表格、 2、跨行合并单元格、 3、跨列合并单元格、
HTML表格合并行和列
大河之犬的博客
09-29 2万+
在设计表格时，有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格（类似Word的表格合并），这个时候就需要用到“合并行”或“合并列”
html table 单元格合并
Ice Yang的博客
07-13 1038
HTml table 合并单元格 内附预览图 +下载地址
HTML表格单元格的合并
09-09
colspan，表示合并列bai。colspan等于几就是合并几个列的单元格。du比如：zhicolspan="2"，就是合并了2个列的单元格。 rowspan，表示合并行dao。rowspan等于几就是合并几个行的单元格。比如：rowspan="2"， 就是...
mshtml操作html表格合并拆分
11-12
mshtml操作html表格合并拆分 参数为当前单元格，单元格所在行 单元格所在表格
jQuery实现HTML表格单元格的合并功能
10-22
主要介绍了jQuery实现HTML表格单元格的合并功能,可合并指定行与指定列上的单元格,涉及jQuery针对表格元素属性的动态操作技巧,需要的朋友可以参考下
使用html5实现表格实现标题合并的实例代码
12-13
使用html5实现表格实现标题合并的实例代码 这样的需求不在少数，比如表格中相邻的列具有相同的内容，那么标题就完全可以使用一个，那么合并标题就是十分重要的，让用户感觉也会更加人性化，代码实例如下: <!...
原生JS实现HTML－ TABLE 自动行合并插件
06-30
类功能描述：该插件生成一个具有行合并的列表数据，合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可，无需后端二次处理数据。 该类以纯原生JS编写，无需引入任何第三方库。 调用方法：...
html写出带有表格标题的三行三列表格
Shivy_的博客
01-14 5084
介绍 HTML里，可以使用 table 标签及它内部的属性 tr,td,th等就可以快速生成一个表格。具体如下： 效果图 相关属性介绍 一个简单的 HTML 表格由table元素以及一个或多个 tr、th 或 td元素组成。 <caption> 标签： 定义表格的标题，必须直接放置到 <table>标签之后 <tr> 标签： 定义表格的一行 <th> 标签： 定义表格的表头，以粗体的形式显示 <td> 标签： 定义单元格标签 代码 &lt
HTML---表格合并(详解)
Philo的博客
01-12 1万+
例子详解： 关键字解释： border="1" :表格标签默认是无边框的，所以这里加上border=”1“是为了更好的进行样式展示； colspan="2":表示的是进行单元格列合并，在该行中，先是th表头占据了一个单元格，之后遇到th，用colspan=2进行属性设置，表示该单元格横跨两列(也就是列合并)； rowspan="2":表示的是进行单元格行合并，在该行中，直接先是在th中设置属性rowspan=2，表明该单元格横跨两行，但是列大小不变(也就是行合并)，这里设置完之后，需要注意的是，第三行就
HTML表格合并的实现方法
xiaoweids的博客
05-15 1722
表格是日常常用的工具，很多时候需要用到单元合并，本文主要介绍了HTML表格合并的具体实现方式， 具有一定的参考价值，感兴趣的可以了解一下当我们在做出一份HTML表格的时候可以看到这样是非常不河狸的。这就需要合并单元格了。
三行四列布局html,CSS布局实例:上中下三行,中间自适应
weixin_30529683的博客
06-10 1095
上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形式。最外层#box { display:table; }，高...
html表格合并边框线
09-08
在HTML表格中，可以使用CSS样式来合并单元格边框线。一种常见的方法是使用CSS的`border-collapse`属性来实现。默认情况下，表格的`border-collapse`属性值为`separate`，即每个单元格都有自己的边框线。如果将该属性值设置为`collapse`，则单元格的边框线会合并成一条单线。 要实现这个效果，可以在CSS样式中添加以下代码： ```css table { border-collapse: collapse; } td, th { border: 1px solid black; } ``` 在这个例子中，将表格的`border-collapse`属性值设置为`collapse`，然后为每个单元格的边框设置了1像素的实线边框。这样，所有单元格的边框线就会合并成一条单线。 请注意，合并边框线只会影响表格的外部边框和单元格之间的边框线，而不会影响单元格内部的边框线。如果需要合并单元格内部的边框线，可以使用其他CSS技巧，如设置`padding`属性或使用背景颜色。 因此，要合并HTML表格的边框线，可以将表格的`border-collapse`属性值设置为`collapse`，并为每个单元格设置统一的边框样式。<span class="em">1</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值