Foundation 表格

Foundation 5 表格（Tables）

Foundation 5 的表格样式简洁、美观，默认带有边框和填充。支持多种变体，包括条纹（striped）、悬停高亮（hover）、堆叠（stacked，用于移动端响应式）等。

1. 基本表格

直接使用<table>标签，Foundation 会自动应用样式（边框、填充、交替背景等）。

2. 常用类

• .striped：条纹表格（奇数行背景不同）。
• .hover：鼠标悬停行高亮。
• .stack：堆叠表格（小屏下转为垂直堆叠，适合移动端响应式）。
• .stacked：类似.stack，旧版常用。

这些类可以组合使用。

3. 代码示例

在你的 HTML 模板中添加以下代码测试：

<divclass="row"><divclass="columns"><h3>基本表格</h3><table><thead><tr><th>姓名</th><th>年龄</th><th>城市</th></tr></thead><tbody><tr><td>张三</td><td>28</td><td>北京</td></tr><tr><td>李四</td><td>35</td><td>上海</td></tr><tr><td>王五</td><td>22</td><td>广州</td></tr></tbody></table><h3>条纹 + 悬停表格</h3><tableclass="striped hover"><thead><tr><th>姓名</th><th>年龄</th><th>城市</th></tr></thead><tbody><tr><td>张三</td><td>28</td><td>北京</td></tr><tr><td>李四</td><td>35</td><td>上海</td></tr></tbody></table><h3>响应式堆叠表格（小屏垂直显示）</h3><tableclass="stack"><thead><tr><th>姓名</th><th>年龄</th><th>城市</th></tr></thead><tbody><tr><td>张三</td><td>28</td><td>北京</td></tr><tr><td>李四</td><td>35</td><td>上海</td></tr></tbody></table></div></div>

4. 小贴士

• 表格默认 100% 宽度，可包裹在.row和.columns中控制宽度。
• 无需额外 JS，直接类名生效。
• 在小屏下，.stack类会自动将表格转为卡片式堆叠，提高移动端可读性。

复制代码运行，缩小浏览器窗口就能看到堆叠效果！如果想学列表、按钮、表单或其他组件，继续告诉我下一个话题。