35、HTML表格与列布局最佳实践

HTML表格与列布局最佳实践

1. 表格与响应式设计

在移动设备上，表格的显示效果往往不佳，用户通常会遇到以下几种情况：
- 表格单元格内容过小，难以阅读。
- 表格超出可视视口边界。
- 表格列过窄，导致单元格内容无法舒适阅读。

为了解决这些问题，通常需要为移动屏幕重新设计表格布局，将多列表格简化为两列：一列包含所有数据标签，另一列包含与每个标签相关的数据。

1.1 使用HTML属性格式化表格

在处理旧网页时，可能会遇到使用属性来设置表格外观的情况。以下是一些常见的HTML属性及其用法：
- width 属性：设置表格的宽度，单位可以是像素或父元素宽度的百分比。

<table width="value"> … </table>

• height 属性：设置表格行的高度，单位为像素。

<tr height="value"> … </tr>

• cellpadding 属性：设置每个表格单元格内的填充空间，单位为像素。

<table cellpadding="value"> … </table>