对于table标签,在传统html页面或者H5页面都是一样的表现形式与配置方式。本文为您介绍table表格的使用,与如何合并行单元格与列单元格。
本文使用VSCode工具快速构建H5界面DOM结构,不使用这个工具也是一样的。
新增H5页面
一、1)打开VSCode编辑器,新建一个文件,保存为“H5Table.html”。
2)在快速创建H5DOM结构:文件中输入一个感叹号,再按下tab键即可。
二、table表格
1)table表格标签内含thead、tbody两个大类标签,这两个标签省略也是一样的效果,建议还是加上。
2)thead标签表示表头,用tr表示行,th表示列。
3)tbody标签表示表体,用tr表示行,td表示列。
4)构建一个简单的table结构。
三、table表格,运行效果
四、合并行单元格
1)在th或者td中配置rowspan属性,用于合并两行的同一列单元格。
2)合并行单元格dom结构。
五、合并行单元格,运行效果
在浏览器中打开“H5Table.html”即可运行页面。
六、合并列单元格
1)在th或者td中配置colspan属性,用于合并同一行的多个列单元格。
2)合并列单元格dom结构。
七、合并列单元格,运行效果
在浏览器中打开“H5Table.html”即可运行页面。
HTML <ul> 元素 ( 或 HTML 无序列表元素) 代表多项的无序列表,即无数值排序项的集合,且它们在列表中的顺序是没有意义的。通常情况下,无序列表项的头部可以是几种形式,如一个点,一个圆形或方形。头部的风格并不是在页面的 HTML 描述定义, 但在其相关的 CSS 可以用 list-style-type 属性。 ul 标签需要和 li 标签结合使用。
属性说明:
HTML <ol> 元素 表示多个有序列表项,通常渲染为有带编号的列表。
属性说明:
HTML 元素 (或 HTML 描述列表元素)是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 ( 键-值对列表 )。
HTML 的 table 元素表示表格数据 — 即通过二维数据表表示的信息。
?>属性:(写在开头标签的里面的单词就叫做该元素的属性)
浏览器运行效果如下:
把上面表格中数字为 1 和 2 的单元格进行合并,数字为 3 和 6 的单元格进行合并。
数字为 1 和 2 的单元格分别在不同的列中所以是进行了列合并,因为只需要合并两个单元格所以 colspan 的值为 2, 列合并只需要在数字为 1 的单元格中添加属性 colspan,然后把数字为 2 的单元格删除,列合并就完成了。
数字为 1 和 2 的单元格分别在不同的行中所以是进行了行合并,因为只需要合并两个单元格所以 rowspan 的值为 2, 行合并只需要在数字为 3 的单元格中添加属性 rowspan,然后把数字为 6 的单元格删除,行合并就完成了。
浏览器运行效果如下:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)