一、Foundation 默认表格样式
Foundation 对 <table> 元素提供了默认的样式美化：
- 灰色斑马条纹（隔行变色，便于阅读）
- 四个方向均有边框（上下左右）
- 表头（
thead）与表体（tbody）视觉区分明确 - 无需额外添加任何 CSS 类，直接使用
<table>标签即可
二、基础表格示例
以下示例展示了一个标准的 Foundation 表格，包含表头和三行数据：
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>Code language: HTML, XML (xml)以上代码直接放入 Foundation 页面中即可看到灰色斑马条纹和完整边框效果。
三、完整可运行示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foundation 表格示例</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
<script src="foundation-5.5.3/js/vendor/jquery.js"></script>
<script src="foundation-5.5.3/js/foundation.min.js"></script>
<script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</head>
<body>
<div class="row">
<div class="medium-12 columns">
<h3>Foundation 默认表格</h3>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Code language: HTML, XML (xml)Previous: Foundation 网格嵌套与列偏移
Next: Foundation 按钮（Button）