| 红尘梦| 红尘醉
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教程 3680 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里面使用表单制作一个简单的登录/注册界面
2 在html代码里面添加自定义css样式,并且将其调用
3 在 < input > 标签里面 比较常用的type属性 以及用法
4 在HTML代码里面表格的写法以及表格的特性
5 在html代码里面最常用的字体样式代码
6 html网页代码结构的基础布局和介绍

评论列表

取消回复

随机文章

    • 抖音视频在线去水印网站源码 内置官方解析接口
      • 苹果CMS V10 动漫番剧影视网模板+程序合集 含安装教程
        • 【原创】红尘梦 EMLOG首款技术导航分类网主题模板
          • JavaScript代码 if语法的多种基础使用方法
            • JavaScript代码 if语句搭配promap的基础使用方法
  • 分类

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

    韩剧TV模板 (1) FTP工具 (1) 仿站小工具 (1) 番剧模板 (1) 二级域名分发系统 (1) 淘宝客模版 (1) 小说网站源码 (1) 云盘 (1) 品牌设计类公司模版 (5) vfed (1) 二次元动漫风格 (1) 手机端模板 (1) 经典款 (1) 天狼星 (1) 吸粉引流 (2) Spimes主题 (1) 变量名 (1) 小说程序 (1) 口红机游戏 (1) V10模板 (13) 恋爱话术 (1) 秒拍主题模板 (1) 简约导航 (2) 净化工程类 (1) 品牌设计类 (1) WordPres模板 (1) 关键词优化 (1) 端午节祝福 (1) 软件下载单页 (2) java教程 (8)
  • Emlog简约资源分享主题

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

    需要就请骚扰我

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

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

    
    
    找回密码

    找回密码

    密码已找回?返回登陆

    用户注册

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

    大家都在搜

    • 短视频去水印
    • 伪商城类
    • 影视源码
    • 小说分享
    • 小菜鸡采集
    • WebShellKiller
    • html列表代码
    • 火车头采集破解版
    • 简约
    • SEO外链工具
    • 鸿蒙操作系统
    • 网站地图生成
    • 个人博客
    • 王者荣耀相关
    • 梅花辅助网
    • 网站优化教程
    • 
    • 