| 红尘梦| 红尘醉
HTML代码制作的表格合并单元格教程 - 站长资源网
  • 首页
  • 网站源码
    • 实用源码
    • 小说源码
    • 游戏源码
    • 导航源码
    • 影视源码
  • 程序模板
    • EMLOG模板
    • 织梦CMS模板
    • 杰奇CMS模板
    • 苹果CMS模板
    • WordPress模板
  • 前端学习
    • JS教程
    • CSS教程
    • HTML教程
  • 福利分享
    • 软件分享
  • 技术教程
    • SEO教程
  • 随心笔记
  • 网络资讯
  • 插件工具
    • EMLOG插件
    • 采集规则


登录后,享受更多优质服务哦
大哥! 个人中心退出登录
导航菜单
  • 首页
  • 网站源码
    • 实用源码
    • 小说源码
    • 游戏源码
    • 导航源码
    • 影视源码
  • 程序模板
    • EMLOG模板
    • 织梦CMS模板
    • 杰奇CMS模板
    • 苹果CMS模板
    • WordPress模板
  • 前端学习
    • JS教程
    • CSS教程
    • HTML教程
  • 福利分享
    • 软件分享
  • 技术教程
    • SEO教程
  • 随心笔记
  • 网络资讯
  • 插件工具
    • EMLOG插件
    • 采集规则
前端开发HTML教程html制作表格合并单元格

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

2019/3/28 站长资源网  HTML教程 1095 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 在 < input > 标签里面 比较常用的type属性 以及用法
3 在HTML里面使用表单制作一个简单的登录/注册界面
4 在html代码里面添加自定义css样式,并且将其调用
5 HTML代码里面有序列表、无序列表、自定义列表的写法以及区别
6 在html代码里面最常用的字体样式代码

评论列表

取消回复

随机文章

    • html网页代码结构的基础布局和介绍
      • 在html代码里面添加自定义css样式,并且将其调用
        • 苹果CMS V10 高仿毛毛虫影视模板 拥有资讯、专题、留言等模板
          • 苹果CMS V10 视频资源站模板 第二套
            • HTML代码制作的表格合并单元格教程
  • 分类

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

    白色 (1) 域名被墙 (1) WordPress (1) 短网址生成 (1) 福利分享 (1) 小纯洁资源网 (1) vfed (1) CSS教程 (4) 听书模板 (1) 前端开发 (11) 中国菜刀 (1) 水印插件 (1) 王公子资源网 (1) 苹果CMS (22) 技术导航 (1) html表单 (2) 高仿第九中文网 (1) robots.txt (1) 简约 (2) 源码检测工具 (1) 网站单页 (1) 文章原创保护 (1) 表白网站 (1) 红尘梦 (1) PTCMS采集规则 (3) 论坛风格 (1) 秒拍主题模板 (1) 织梦教程 (1) H站模板 (2) 优惠活动 (2)
  • 链接

    • 站长资源网
    • LBTSTO自由商店
    • DYBOY博客
    • 小胖博客
    • 博客之家
    • 54网赚论坛
    • 练字教程
    • 动物知识
    • seo培训
  • Emlog简约资源分享主题

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

    需要就请骚扰我

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

    • 本站管理:1位
    • 用户总数:349位
    • 置顶文章:2篇
    • 日志总数:163篇
    • 微语总数:1条
    • 评论总数:2864条
    • 标签总数:280条
    • 页面总数:4页
    • 分类总数:26个
    • 链接总数:16条
    • 运行天数:751天
    • 最后更新:2月1日
  • 用户登陆

    
    
    找回密码

    找回密码

    密码已找回?返回登陆

    用户注册

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

    大家都在搜

    • 媒体范二开模板
    • 三星S10自燃
    • 宝塔
    • robots的作用
    • 二级域名分发系统
    • seo优化建议
    • 网站源码
    • CSS教程
    • 动漫风格
    • MacCMS
    • 合并单元格
    • Tadpole
    • robots.txt
    • PTCMS
    • V8模板
    • WebShellKiller
    • 
    • 