Web前端技术 · 第3课 2 / 25 | 编码:L03-06
HTML5中的表格

同一批数据,怎样展示更合适?

先明确要看什么,再选择呈现形式;选择表格后,还要考虑行列怎样组织。

浏览产品:了解一台电脑

查看外观、名称和产品介绍时,可以用列表或卡片逐台浏览。

比较参数:对照多台电脑

选出几台候选电脑后,用表格对齐价格、内存和重量,便于逐项比较。

一种组织方式:每行一台电脑,每列一项参数(虚构数据)
机型 价格(元) 内存(GB) 重量(kg)
电脑A 4499 16 1.40
电脑B 4999 32 1.75
电脑C 5499 32 1.35

学习通作答:每行放一台电脑的数据好,还是每列放一台电脑的数据好?决定因素是什么?请说明理由。

展开参考分析

两种方向都可以,没有固定最优答案。决定因素主要是阅读任务、机型与参数的数量,以及显示空间。

  • 阅读任务:逐台查看完整资料,或逐项比较不同电脑,会影响更合适的行列安排。例如,每台电脑占一列时,同一参数可以在一行内横向比较。
  • 数据规模:机型多、参数少时,每台占一行通常更紧凑;机型少、参数多时,每台占一列通常更便于展示,避免参数展开成过多列。
  • 显示空间:还要考虑屏幕宽度、文字长度和滚动需求。同一种方向在电脑与手机上未必同样易读。

关键不是“每行必须放一台电脑”,也不是“列数越少越好”,而是让目标信息容易查找和比较。无论选择哪个方向,机型、参数名称、单位与数值都必须保持正确对应。