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类会自动将表格转为卡片式堆叠，提高移动端可读性。
复制代码运行，缩小浏览器窗口就能看到堆叠效果！如果想学列表、按钮、表单或其他组件，继续告诉我下一个话题。
