Foundation 表格学习笔记

什么是 Foundation 表格？

Foundation 是一个前端框架，提供了多种构建网页的基础组件。其中，表格是 Foundation 中的一个基础组件，可用于展示数据等。

如何创建 Foundation 表格？

要创建 Foundation 表格，可以使用 HTML 标签 <table>、<thead>、<tbody> 和 <tr> 等。下面是一个简单的例子：

htmlCopy Code
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>17</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

在上面的例子中，<table> 表示表格，<thead> 表示表格头部，<tbody> 表示表格主体，<tr> 表示表格行，<th> 表示表格头部单元格，<td> 表示表格数据单元格。

如何设置 Foundation 表格的样式？

Foundation 表格的样式可以通过 CSS 进行设置。例如，可以通过以下代码设置表格边框、单元格边框和单元格内边距：

cssCopy Code
table {
  border-collapse: collapse;
  border: 1px solid #ccc;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

Foundation 表格的示例

下面是一个使用 Foundation 表格的示例，它展示了一些学生的成绩：

htmlCopy Code
<table>
  <thead>
    <tr>
      <th>学生</th>
      <th>语文</th>
      <th>数学</th>
      <th>英语</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>80</td>
      <td>90</td>
      <td>85</td>
      <td>255</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>85</td>
      <td>95</td>
      <td>90</td>
      <td>270</td>
    </tr>
    <tr>
      <td>小刚</td>
      <td>75</td>
      <td>80</td>
      <td>95</td>
      <td>250</td>
    </tr>
  </tbody>
</table>

以上就是 Foundation 表格的基本用法和示例。希望对您的学习有所帮助！