| 红尘梦| 红尘醉
HTML代码制作的表格合并单元格教程 - 站长资源网
  • 首页
  • 网站源码
    • 实用源码
    • 小说源码
    • 游戏源码
    • 导航源码
    • 影视源码
    • 企业门户
    • APP源码
    • 小程序源码
  • 程序模板
    • EMLOG模板
    • 织梦CMS模板
    • 杰奇CMS模板
    • 苹果CMS模板
    • WordPress模板
  • 编程学习
    • JS教程
    • CSS教程
    • HTML教程
    • JAVA学习
    • SQL学习
  • 福利分享
    • 软件分享
  • 技术教程
    • SEO教程
  • 随心笔记
  • 插件工具
    • JAVA工具
    • EMLOG插件
    • 采集规则
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 公告动态
    • 关于博主


登录后,享受更多优质服务哦
大哥! 个人中心退出登录
导航菜单
  • 首页
  • 网站源码
    • 实用源码
    • 小说源码
    • 游戏源码
    • 导航源码
    • 影视源码
    • 企业门户
    • APP源码
    • 小程序源码
  • 程序模板
    • EMLOG模板
    • 织梦CMS模板
    • 杰奇CMS模板
    • 苹果CMS模板
    • WordPress模板
  • 编程学习
    • JS教程
    • CSS教程
    • HTML教程
    • JAVA学习
    • SQL学习
  • 福利分享
    • 软件分享
  • 技术教程
    • SEO教程
  • 随心笔记
  • 插件工具
    • JAVA工具
    • EMLOG插件
    • 采集规则
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 公告动态
    • 关于博主
前端开发HTML教程html制作表格合并单元格

HTML代码制作的表格合并单元格教程

2019/3/28 站长资源网  HTML教程 2513 0

前言


        在HTML代码里面,如果我们要合并单元格,就需要用到两个属性,

        一个是合并行单元格,还有一个就是合并列单元格,分别是 rowspan 以及 colspan  这两个属性。


案例表格


          我以下面这个表格为本文的演示表格,教程以这个表格以及源代码为案例进行讲解。
 
          下面这个是本文将使用到的案例表格


古诗 古诗 古诗 古诗
古诗 清明时节雨 纷纷路上行 人欲断魂
古诗 野火烧不尽 春风吹又生 远芳侵古道

          
     
          此为表格的源代码,关于HTML制作表格的教程本站之前有发布过文章,各位可以去翻一下。

                         

<table border="1">
<tr>
<th>古诗</th>
<th>古诗</th>
<th>古诗</th>
<th>古诗</th>
</tr>
<tr>
<th>古诗</th>
<td>清明时节雨</td>
<td>纷纷路上行</td>
<td>人欲断魂</td>
 </ tr>
<tr>
<th>古诗</th>
<td>野火烧不尽</td>
<td>春风吹又生</td>
<td>远芳侵古道</td>
</tr>
</table>


表格合并行单元格

 

        在表格里面,通常会用很多相同的内容出现,然而我们可以把这些重复的内容合并成为一个单元格,这样可以省很多事,在办公软件里面,合并单元格只需要鼠标操作几下就行了,但是在html里面却要依靠属性来完成这个操作。


     合并行单元格之后的效果:


古诗 古诗 古诗 古诗
清明时节雨 纷纷路上行 人欲断魂
野火烧不尽 春风吹又生 远芳侵古道


      合并行单元格的源代码:.

<table border="1">
<tr>
<th rowspan="3">古诗</th>
<th>古诗</th>
<th>古诗</th>
<th>古诗</th>
</tr>
<tr>
<td>清明时节雨</td>
<td>纷纷路上行</td>
<td>人欲断魂</td>
 </tr>
<tr>
<td>野火烧不尽</td>
<td>春风吹又生</td>
<td>远芳侵古道</td>
</tr>
</table>



表格合并列单元格


      合并单元列的方法和合并行的方法是一样的,只不过使用的却是 colspan 这个属性,演示效果和源代码如下


    表格合并列单元格演示效果:


古诗
古诗 清明时节雨 纷纷路上行 人欲断魂
古诗 野火烧不尽 春风吹又生 远芳侵古道

     

       表格合并列单元格的源代码:

  

<table border="1">
<tr>
<th colspan="4">古诗</th>
</tr>
<tr>
<th>古诗</th>
<td>清明时节雨</td>
<td>纷纷路上行</td>
<td>人欲断魂</td>
 </tr>
<tr>
<th>古诗</th>
<td>野火烧不尽</td>
<td>春风吹又生</td>
<td>远芳侵古道</td>
</tr></table>



后记


        rowspan 和 colspan 属性所对应的值,就是你要合并单元格的数量,如果值为2,那就是合并两个单元格,rowspan属性的意思就是合并两个相对于的行,colspan属性的意思就是合并两个相对的列,之所以说这个是因为很多人在对于属性的理解上面都会出现一点问题。




 点赞:2  打赏  分享  海报

  • 打赏支付宝扫一扫
  • 打赏微信扫一扫
  • 打赏企鹅扫一扫
作者头像 作者名称 作者性别
站长资源网
联系作者 作者主页

热门推荐

1 在html代码里面使用 <a></a>标签 设置文字超链接和图片超链接教程
2 在HTML代码里面表格的写法以及表格的特性
3 在html代码里面添加自定义css样式,并且将其调用
4 HTML代码里面有序列表、无序列表、自定义列表的写法以及区别
5 在HTML里面使用表单制作一个简单的登录/注册界面
6 在 < input > 标签里面 比较常用的type属性 以及用法

评论列表

取消回复

随机文章

    • EMLOG 利用外链跳转达到独立下载页面的效果
      • Windows 11 含消费者版/家庭版/专业版 含激活密钥 支持中文
        • EMLOG最新资源福利分享网站模板源码 已二次开发修复Bug
          • CSS使用元素靠右的代码 margin-left: auto!important
            • EMLOG PRO实现图片粘贴上传本地化功能
  • 分类

    • 网站源码
    • 程序模板
    • 插件工具
    • 技术教程
    • 福利分享
    • 编程学习
    • 随心笔记
    • 网络资讯
    • 商城专区
    • 广告商广告
  • 标签

    通用类企业模版 (1) 刺激战场 (1) 抢单系统 (1) 小清新 (1) 动漫漫画类模版 (1) EMLOG教程 (3) 生态类源码 (2) 短链接生成 (1) 华为 (5) URL缩短源码 (1) 响应式 (3) 后台源码 (1) 手机端模板 (1) 抖音项目 (1) 微软承认监听录音 (1) 恋爱教学 (1) 年会软件 (1) 导航模板 (1) 狂雨小说 (1) 短网址生成源码 (1) 音乐播放器 (1) 去水印源码 (1) 秒拍主题模板 (1) 影视源码 (2) JS教程 (1) 软件分享 (6) promap (1) 抖音直播项目 (1) 梅花辅助 (1) 婚礼策划公司模版 (2)
  • Emlog简约资源分享主题

    • 采用了简约单调的风格
    • 比较适合资源分享网
    • 一反常态的模板风格类型
    • 全站自适应资源网主题
    • 原创制作的第一款EMLOG模板
    0元

    需要就请骚扰我

    立即下载
  • 网站统计 I 当前在线:1人

    • 本站管理:1位
    • 用户总数:807位
    • 置顶文章:6篇
    • 日志总数:491篇
    • 微语总数:0条
    • 评论总数:6244条
    • 标签总数:655条
    • 页面总数:4页
    • 分类总数:33个
    • 链接总数:12条
    • 运行天数:1517天
    • 最后更新:3月10日
  • 用户登陆

    
    
    找回密码

    找回密码

    密码已找回?返回登陆

    用户注册

    
    
    စ
    
    已有账号?返回登陆
    Copyright © 2023站长资源网 程序:Emlog5.31 主题:Meta 3.54
    • 首页
    • 加群
    • 搜索
    • 模板
    • 用户

    大家都在搜

    • 汽车销售类
    • 软件官网源码
    • 陶瓷类模版
    • 女性内衣加盟宣传企业
    • 手机商城源码
    • 墨墨言情网模板
    • Cola
    • V8模板
    • 餐饮模版
    • 苹果CMS付费播放
    • 挖掘机产品官网模版
    • 抽人软件
    • JAVA
    • PTCMS采集规则
    • EMLOG最新模版
    • 资源网源码
    • 
    • 