| 红尘梦| 红尘醉
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教程 2033 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 在html代码里面使用 <a></a>标签 设置文字超链接和图片超链接教程
4 HTML代码里面有序列表、无序列表、自定义列表的写法以及区别
5 在 < input > 标签里面 比较常用的type属性 以及用法
6 在HTML里面使用表单制作一个简单的登录/注册界面

评论列表

取消回复

随机文章

    • 苹果CMS仿优酷V10电脑+手机端完美运营版
      • 苹果CMSV10 白色简约款仿橘猫影视
        • 首涂第24套破解版去授权苹果CMSV10下载
          • 蓝奏云无法下载打不开页面最新解决方法
            • 苹果CMSV10 首涂第22套破解版去授权
  • 分类

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

    二次元博客 (1) 盛大大财神 (1) EMLOG隐藏后台登陆页面 (1) 域名的选择 (1) 中国菜刀源码 (1) 自动采集小说程序 (1) 抢单系统 (1) 生产设备类 (1) 防红源码 (1) 纯手机端源码 (1) 旅游研究院类 (1) 跳转源码 (1) 百度收录 (1) 绿色园林类源码 (1) 福利分享 (1) 压缩包密码破解 (1) 网络建设开发类模版 (6) 发卡源码 (1) typecho主题 (1) 蜘蛛统计 (1) wps (1) HTML源码 (8) 爱看小说 (1) 恋爱教学 (1) EMLOG教程 (3) MP3 (1) 翻墙软件 (1) EMLOG (32) 网站优化 (2) 织梦 (8)
  • Emlog简约资源分享主题

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

    需要就请骚扰我

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

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

    
    
    找回密码

    找回密码

    密码已找回?返回登陆

    用户注册

    
    
    စ
    
    已有账号?返回登陆
    Copyright © 2022站长资源网 程序:Emlog5.31 主题:Meta 3.54

    广告合作联系Q:122855611

    • 首页
    • 搜索
    • 模板
    • 用户

    大家都在搜

    • 404错误页
    • 防红源码
    • typecho主题
    • 品牌设计类公司模版
    • 小程序
    • 旅游规划设计类
    • 学校类源码
    • 技术导航
    • V10整洁模板
    • PS
    • 工程设计类源码
    • 织梦手机模版
    • 云盘
    • 在线生成二维码
    • 定时采集
    • java学习
    • 
    • 