✅ 因为 “表格” 在日常统计中无处不在，所以今天来做一做。但是微信小程序不支持 table 标签，我准备用 “上一篇——Flex布局” 学的 flex 来实现一下。

微信小程序开发 🌲

上一篇文章链接: 微信小程序学习笔记④——Flex布局[实战样例之画骰子]

下一篇文章链接: 🚧 🚧 …

● HTML 表格：表格由 标签来定义。

● HTML 表格中的行：每个表格均有若干行，由 标签定义。（tr 是 table row 的缩写）

● HTML 表格中的行中的单元格：每行被分割为若干单元格，由 标签定义。（td 是 table data 的缩写）

● HTML 表格中的表头：即表格第一行的若干单元格(一般表格的第一行是一些 “项目名”)， 由 标签进行定义。（th 是 table head 的缩写）

◆ 补充说明：“” 中所装的东西，即是数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

● html 的 table 样例：

● 在浏览器中显示结果如下：

● 如果将上述在代码放在微信小程序中显示结果如下：

● 这说明微信小程序不支持 table 组件。虽然不支持，但是我后面还是会沿用 “table、tr、th、td” 这些已经耳熟能详的标签名，只不过这些名词变成了 “样式名”。

● “统一格式” 的意思是：表格里面的 “表头” 中的每一个『单元格』的大小和样式一模一样，并且表格中除 “表头” 外的其他所有行的每一个『单元格』的大小和样式一模一样。

● 我去官网找了部分 “2021年的博客之星” 来作为本次制作的表格的内容，其 “统一格式的表格框架” 如下：

● WXML 代码：

● WXSS 代码：

● 运行结果： ● “统一格式” 就体现在：“表头”都一样大，除“表头”外的单元格也是一样大。虽然这样编写代码很方便，但是这样会让屏幕感觉 “局部拥挤”，我们可能更希望，内容少的那一列的单元格有自己独立的样式。这样可能看上去 “松弛有度” 一点。

● “非统一格式” 的意思是：表格里面的 “表头” 中的每一个『单元格』的大小和样式可能不一样，并且表格中除 “表头” 外的其他所有行的每一个『单元格』的大小和样式可能不一样。但是，表格中每一列的 “宽度” 一样。

● 为了实现 “松弛有度”，我们还需要用到『滚动视图组件(scroll-view)』，用它来实现：左右拖动表格的功能。

● 这是它的官方文档：『滚动视图组件(scroll-view)』，我们只需要在标签中把 scroll-x 属性设置为 true 即可。

● WXML 代码：

● WXSS 代码：

● 运行结果：

● 以上制作的表格都是 “静态的”，我们只能对它们进行 “读”，但有时候我们希望对它们进行 “写”。比如说：我们想点一点关注，那该怎么去做呢？

● 这时我们就要用在《微信小程序③——wxml+wxss+js基础入门[样例+解析]》中写到的 bindtap 了，我们这时就要引入 .js 文件。

● WXML 代码：