rowspan(rowspan和colspan)

张工 2022-07-03 17:47:39 阅读:77
  

一、什么是合并单元格?

  表格分为行和列。有时候你会在网页中经常看到这样的表格。有时合并列,有时合并行。那么这个是怎么做出来的呢?也是通过以下方法实现的。


html开发笔记20-合并单元格-列和行


二、怎么合并?

  可以通过给单元格添加属性来实现。合并的列和行的属性不同。

  1.合并列的属性:clospan='2' //要合并的列数只是几个。

  2.合并行的属性:rowspan='2' //同样,要合并的行数也只是几行。

  3.合并后的单元格(行或列)会自动多一个单元格,需要手动删除。

  4.重要提示:合并单元格仅与td标签相关:

  (1)合并列:左右合并,左边的td标签加colspan='2 '。

  (2)合并线:是上下合并。Add rowspan='2 '要在上面的td标签中合并的td的编号。

  (3)删除合并后多余的td标签。

三、两个属性的用法

  1、合并 列 的用法:

  (1)首先确定要合并的单元格在哪一行哪一列,然后找到它,从它的td标签添加属性。

  例如,要合并第4行、第4列和第5列:


html开发笔记20-合并单元格-列和行


html开发笔记20-合并单元格-列和行


  tr

  运输署第三组/运输署

  tdhtml/td

  tdcss/td

  td colspan='2'php/td!-合并列的用法-

  tdphp/td

  /tr2、合并 行 的用法:

  例如:合并第3行和第4行的第1列。


html开发笔记20-合并单元格-列和行


html开发笔记20-合并单元格-列和行


  完整代码:

  !声明文档类型

  html lang='en '

  头

  meta charset='UTF-8 '

  !-网页标题-

  标题标题/标题

  /头

  身体

  表格边框='2 '

  !-给表格添加标题-

  标题h2课程表/H2/标题

  tr

  td/td

  周一/日的课程

  日星期二课程/日

  周三/日的课程

  周四/日的课程

  /tr

  tr

  运输署第一组/运输署

  tdhtml/td

  tdcss/td

  tdphp/td

  tdpython/td

  /tr

  tr

  td /td第2节

  td rowspan='2'html/td!-合并线的使用-

  tdcss/td

  tdphp/td

  tdpython/td

  /tr

  tr

  运输署第三组/运输署

  tdcss/td

  td colspan='2'php/td!-合并列的用法-

  /tr

  /表格

  /body

  /html

二维码