HTML 表格学习笔记

HTML表格是在网页中展示数据的常用方式。它由行 (<tr>) 和列 (<td>) 组成，可以通过设置属性进行自定义。

基本表格结构

HTML表格最基本的结构由<table>、<tr>和<td>标签组成。下面是一个示例：

Copy Code
<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

上面的代码将会生成以下的表格：

表格标题

使用<caption>标签可以为表格添加标题，如下所示：

Copy Code
<table>
  <caption>这是表格的标题</caption>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

表头

使用<thead>标签可以将表格中的一部分标记为表头。表头通常包含列的标题：

Copy 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>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

上面的代码将会生成一个带有表头的表格：

表格样式

可以使用 CSS 样式来改变表格的样式。以下是一些常用的 CSS 属性：

• border: 表格边框的宽度和样式；
• padding: 单元格内部空白区域的大小；
• text-align: 单元格文本的水平对齐方式；
• vertical-align: 单元格文本的垂直对齐方式；

下面的示例展示了一个带有自定义样式的表格：

Copy Code
<style>
table, td, th {
  border: 1px solid black;
  padding: 8px;
}

th {
  text-align: center;
  background-color: #eee;
}

td {
  vertical-align: middle;
}
</style>

<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>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

上面的代码将会生成一个带有自定义样式的表格：

这就是基本的 HTML 表格学习笔记，希望对你有所帮助。