CSS Table(表格)学习笔记

1. HTML中的表格

HTML中的表格是由<table>标签定义的，包含一个或多个行（<tr>）和一个或多个单元格（<td>或<th>）。常用属性如下：

• border：表格边框宽度；
• cellpadding：单元格内部与单元格边框之间的空白距离；
• cellspacing：单元格间隙大小；
• align：表格相对于周围元素的对齐方式；
• bgcolor：表格背景色。

2. CSS中的表格样式

通过CSS可以改变表格的外观，使其更符合设计要求。常用属性如下：

• border-collapse：合并单元格的边框，默认值为 separated；
• border-spacing：设定单元格边框之间的距离；
• caption-side：表格标题位置，默认值为 top；
• empty-cells：处理空单元格问题；
• table-layout：控制表格和单元格的布局方式。

3. 实例演示

以下是一个简单的表格实例：

htmlCopy Code
<table border="1" cellpadding="10">
  <caption>学生信息表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20岁</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22岁</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>21岁</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

通过CSS可以实现更多样式效果。例如，以下示例展示了如何增加表格间距、合并边框、居中显示等效果：

cssCopy Code
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

th {
  background-color: #4CAF50;
  color: white;
}

/* 增加表格间距 */
table {
  margin-bottom: 20px;
}

/* 合并边框 */
td {
  border: none;
  border-bottom: 1px solid #ddd;
}

tr:last-child td {
  border-bottom: 0;
}

/* 居中显示 */
table {
  margin: auto;
}

4. 小结

表格是网页开发中经常使用的元素之一，掌握表格相关的HTML和CSS知识，可以使网页更加美观和实用。同时，合理的表格布局也能提高信息展示效率，让用户更加容易获取所需信息。