H5 写一个3x3表格，合并1和2单元格，4和7单元格

最新推荐文章于 2024-03-12 13:18:47 发布
最新推荐文章于 2024-03-12 13:18:47 发布
阅读量2.6k 收藏
点赞数
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42467563/article/details/83097387
版权
本文展示了如何使用HTML5创建一个3x3的表格，并详细说明了如何通过`colspan`和`rowspan`属性来合并第一行的1和2单元格，以及第四行的4和7单元格，实现自定义的表格布局。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table border="1" bordercolor="red" width="200" height="200" align="center" bgcolor="aqua"> 
                    
            <tr align="center">
                <td colspan="2">1&2</td>
                
                <td>3</td>
            </tr>
            <tr align="center">
                <td rowspan="2">4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            
            <tr align="center">         
             

最低0.47元/天 解锁文章
三尺秋水一点飞鸿
关注
专栏目录
python与h5结合实例_使用h5py合并所有h5文件
weixin_39908985的博客
12-03 1416
您需要的是文件中所有数据集的列表。我认为这里需要的是recursive function的概念。这将允许您从一个组中提取所有的“数据集”，但是当其中一个看起来是组本身时，递归地执行相同的操作，直到找到所有数据集为止。例如：/|- dataset1|- group1|- dataset2|- dataset3|- dataset4伪代码中的函数应该如下所示：^{pr2}$例如：/dataset1是一...
h5学习笔记：写一个小表格
夏天的树人的专栏
12-31 2475
1. 前言 2021即将过去了，今年也参与了不少小程序开发。在小程序里面，并没一个比较完善的表格控件。有时候希望有Element 那种table组件，但是在移动端里面展示table，要写完善是很困难，但是通过一些小小样式flex布局。可以简单地模拟一个表格展示效果。仅仅是一个展示的效果。里面用到代码并不多。看如何下。我们先用html代码模拟一下。 2 .搭建一个结构 表格里面要头和身，第一步我们先建立一个简单结构。看如下的效果图。 <!DOCTYPE html> <html> &
h5--------长表格
学习是我快乐， 吗
07-13 444
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;!--  有一些情况下
H5-表格、表单
weixin_30525825的博客
08-01 492
一、表格 　　1、表格标签 　　　　a、table　　表格 　　　　b、thead　　表格头 　　　　c、tbody　　表格主体 　　　　d、tr　　表格行 　　　　e、th　　元素定义表头 　　　　f、td　　元素定义表格单元 　　2、表格样式重置 　　　　a、table{border-collapse：collapse；}单元格间隙合并（默认：separate分隔） 　　　...
36-表格总结
weixin_45683698的博客
11-21 163
1.7表格总结 表格学习整体可以分为三大部分： 1.表格的相关标签 2.表格的相关属性 3.合并单元格 1.表格的相关标签 我们学习了 table标签 tr 行标签 td 单元格标签 th 表头单元格标签 thead 表格头部区域标签 tbody 表格主体区域标签 2.表格的相关属性 3.合并单元格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
h5实现九宫格拼图
09-03
游戏的核心是将一个3x3的图像分割成9个1x1的小方块，然后随机打乱这些方块的顺序，用户的目标是通过拖拽或点击来恢复原图。这种类型的拼图通常称为滑动拼图或15拼图（尽管在这个案例中是9个小块）。 1. **HTML结构*...
JavaWeb入门-HTML和CSS3
AyinMars的博客
10-19 420
网页的组成部分 页面一共由三个部分组成，分别是内容（结构）、表现、行为。 内容（结构）是我们在页面中可以看到的数据，我们称之为内容，一般用HTML来实现。 表现，指的是这些内容在页面上的表现形式，比如说：颜色、布局、大小等等，一般用CSS实现。 行为，指的是页面元素中与输入设备交互的响应，一般使用JavaScript实现。 HTML HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTM
如何用SpreadJS添加背景图片和水印？
weixin_45414340的博客
11-05 1306
SpreadJS是一个面向企业级应用开发的综合性、高效能的基于HTML5的纯JavaScript的电子表格控件。SpreadJS有着强大的表单处理能力和电子表格功能。这些功能包括跨表单引用和计算，这样就能够充分利用多个表单上的数据和公式。它具有丰富的客户端JavaScript API，为您提供了所需要的灵活的客户端编程。本文主要描述了在SpreadJS中，怎样添加背景图片和水印。 点击下载Spr...
制作一个pc端在线点单页面，要求包括9个方块模型，在页面上以3乘3的布局显示，每个模块内包含商家名称，特色菜品，以及添加购物车，点击左侧按钮+1，点击右侧按钮-1，页面最下面端有一个提交按钮，点击后显示弹窗“您已下单”。
最新发布
09-26
使用Bootstrap或自定义CSS Grid构建基础框架，创建一个3列x3行的网格系统。每个单元格作为"方块模型"，可以使用`<div>`标签，并为其分配独特的ID或类名，如`.item`。 ```html <div class="col-md-4 item" id=...
h5移动时间控件
11-03
h5移动时间控件
HTML5中表格中的行列合并
z_625的博客
03-12 1171
HTML5中的表格的行列合并清晰解释，保证一看就懂
html5中表单合并单元格,html5中table表格标签中合并单元格
weixin_39564510的博客
06-23 718
百度经验：首先，我们打开DreamWeaver软件，新建一个html的页面，并以table命名进行保存。然后我们在页面的body标签内部，新建一个table，并在内部添加行和单元格标签。接下来，我们需要在每个单元格中添上相应的文字，并在浏览器中查看效果。可以看到，各个单元格之间的区别并不明显，我们需要为其添加边框。边框只需要在table标签中添加，border即可，border值为阿拉伯数字，添加...
68.Python修炼之路【73-前端-HTML表格、传统布局】2018.06.28
youyouwuxin1234的博客
06-28 219
html表格table常用标签1、table标签：声明一个表格2、tr标签：定义表格中的一行3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格table常用属性：1、border 定义表格的边框2、cellpadding 定义单元格内内容与边框的距离3、cellspacing 定义单元格与单元格之间的距离4、align 设置单元格中内容的水平对齐方式,设置值有：le...
html5 table标签 单元格合并
baipenggui_bo
08-09 1297
文章全篇 <!--未进行合并--> <table border="1" width="500" height="240" align="center" cellspacing="0"> <tr> <td>刘德华</td> <td>男</td> <td>18</td> <!--目标单元格 先上后下--> .
用html写一个3行3列的表格
weixin_35750953的博客
02-17 791
行1 行2 行3 单元格1 单元格2 单元格3 单元格4 单元格5 单元格6 单元格7 单元格8 单元格9
Html5-------合并单元格
naturly的博客
01-30 5928
一： 1、语法 跨行合并 rowspan = "合并单元格的个数“ 跨列合并 colspan= "合并单元格的个数“ 2、合并顺序 ：先上后下、先左后右 3、合并三部曲 （1）先确定跨行还是跨列 （2）根据先上后下，先左后右的顺序找到目标单元格，然后写上 合并方式 以及合并的单元格数量 <td colspan="2"> //跨行合并，合并数量为3 （3）删除多余的单...
html中表格的合并
qq_54235625的博客
06-01 2099
我们首先做一个3X3的表格，用很简单的表格来演示表格的合并。
colspan和rowspan
yoloo
09-14 3706
colspan和rowspan这两个属性用于创建特殊的表格。 colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数： 例1： 在浏览器中将显示如下： 单元格1 单元格2 单元格3 ...
h5实现把框选的单元格合并成一个单元格
04-27
实现框选合并单元格的过程如下： 1. 使用JavaScript获取框选的单元格范围。 2. 遍历框选的单元格范围，将其合并为一个单元格。可以使用colspan和rowspan属性来实现单元格合并。 以下是一个简单的示例代码： ```html <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> <script> var table = document.querySelector('table'); var cells = table.querySelectorAll('td'); var startCell = null; var endCell = null; table.addEventListener('mousedown', function(e) { startCell = e.target; }); table.addEventListener('mouseup', function(e) { endCell = e.target; // 获取框选的单元格范围 var startRowIndex = startCell.parentNode.rowIndex; var endRowIndex = endCell.parentNode.rowIndex; var startColIndex = startCell.cellIndex; var endColIndex = endCell.cellIndex; if (startRowIndex > endRowIndex) { var temp = startRowIndex; startRowIndex = endRowIndex; endRowIndex = temp; } if (startColIndex > endColIndex) { var temp = startColIndex; startColIndex = endColIndex; endColIndex = temp; } // 合并单元格 var colspan = endColIndex - startColIndex + 1; var rowspan = endRowIndex - startRowIndex + 1; startCell.setAttribute('colspan', colspan); startCell.setAttribute('rowspan', rowspan); // 清空其他单元格 for (var i = 0; i < cells.length; i++) { var cell = cells[i]; if (cell != startCell) { var rowIndex = cell.parentNode.rowIndex; var colIndex = cell.cellIndex; if (rowIndex >= startRowIndex && rowIndex <= endRowIndex && colIndex >= startColIndex && colIndex <= endColIndex) { cell.parentNode.removeChild(cell); } } } startCell = null; endCell = null; }); </script> ``` 在上面的代码中，我们使用了mousedown和mouseup事件来获取框选的单元格范围，并使用colspan和rowspan属性来合并单元格。注意，我们还需要清空其他单元格，以避免出现重叠的单元格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值