表格(table) 元素 样式设置

一、基础表格结构

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

• <table>: 定义表格
• <tr>: 表格行(table row)
• <td>: 标准单元格(table data)
  表头文字一般有加粗效果，所以提供了<th>（表头单元格，默认加粗居中）。不用单独给标头的td单元格设置加粗样式。

总结：

• table基本结构只要2类标签：表格行tr 和 单元格标签（th或td）
  表头单元格th，就是设置了默认加粗居中样式。其它和td单元格是一样的。

二、现代表格结构（语义化）

<table>
  <caption>表格标题</caption> <!-- 可选，表格描述 -->
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>100</td>
    </tr>
  </tfoot>
</table>

table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) { /* 斑马条纹效果 */
  background-color: #f9f9f9;
}

tr:hover { /* 鼠标悬停效果 */
  background-color: #f1f1f1;
}

• <caption>: 表格标题
• <thead>: 表头区域
• <tbody>: 表格主体
• <tfoot>: 表尾区域

总结：

• 语义化的表格，也就是在基础表格上，对不同行区域进行语义化包裹而已。
  标头区域、表格主体区域、表尾区域
• 另外加了一个表格标题区域。

三、表格的核心属性（基础版）

通过属性可快速调整表格的外观和结构，以下是最常用的基础属性，直接写在<table>标签内即可生效。

1. 边框相关​

• border：设置表格边框的宽度（单位：像素），默认值为0（无边框）。
  示例：<table border="1"> → 显示 1 像素宽的边框。​

• 注意：默认边框样式较简单，若需美化（如圆角、颜色），后续需结合 CSS 实现。

2. 尺寸相关​

• width：设置表格的整体宽度，可使用像素（px）或百分比（%，相对于父容器）。
  示例：<table width="500px"> 或 <table width="80%">。​

• height：设置表格的整体高度，用法与width一致，但实际开发中较少主动设置（推荐由内容自动撑开）。

3. 内容对齐相关​

• align：控制表格在页面中的水平对齐方式，可选值：left（左对齐，默认）、center（居中）、right（右对齐）。
  示例：<table align="center"> → 表格在页面中居中显示。​

• cellspacing：设置单元格之间的间距（默认值为2px），值越大，单元格之间的空白越多。
  示例：<table cellspacing="5">。​

• cellpadding：设置单元格内容与单元格边框的内边距（默认值为1px），值越大，内容与边框的距离越远。
  示例：<table cellpadding="8">。

总结：

• 设置在table标签上的属性，会作用的全局的单元格中。

四、表格的合并单元格（重点）

当表格需要展示复杂数据（如跨行或跨列的内容）时，需使用colspan（跨列合并）和rowspan（跨行合并）属性，核心是 “先合并，再删除多余单元格”。

1. 跨列合并（colspan）​

• 作用：将多个 “同一行” 的单元格合并为 1 个（横向合并）。​

• 语法：在需要合并的单元格中添加 colspan="合并的列数"。​

• 步骤：​

1. 确定要合并的单元格所在的 “行” 和 “列数”（如合并 3 列，则colspan="3"）；​

2. 在该行的第一个单元格中添加colspan属性；​

3. 删除该行中后续多余的单元格（避免表格结构错乱）。​

案例：合并第一行的 2 个单元格

<table border="1">
  <tr>
    <td colspan="2">我跨了2列</td> <!-- 合并第1、2列 -->
    <!-- 原有的第二个<td>已删除 -->
  </tr>
  <tr>
    <td>普通单元格1</td>
    <td>普通单元格2</td>
  </tr>
</table>

2. 跨行合并（rowspan）​

• 作用：将多个 “同一列” 的单元格合并为 1 个（纵向合并）。​

• 语法：在需要合并的单元格中添加 rowspan="合并的行数"。​

• 步骤：​

1. 确定要合并的单元格所在的 “列” 和 “行数”（如合并 2 行，则rowspan="2"）；​

2. 在该列的第一个单元格中添加rowspan属性；​

3. 删除后续行中该列的多余单元格。​

案例：合并第一列的 2 个单元格

<table border="1">
  <tr>
    <td rowspan="2">我跨了2行</td> <!-- 合并第1、2行 -->
    <td>普通单元格1</td>
  </tr>
  <tr>
    <!-- 原有的第一个<td>已删除 -->
    <td>普通单元格2</td>
  </tr>
</table>

 

五、常见问题与注意事项​

1. 表格结构错乱：​

• 原因：<tr>内的单元格数量不统一（如一行有 2 个<td>，另一行有 3 个），或合并单元格后未删除多余单元格。​

• 解决：确保每行的单元格数量一致，合并后严格删除多余单元格。​

2. 边框重叠：​

• 原因：默认cellspacing="2"会导致边框之间有缝隙，视觉上不连贯。​

• 解决：设置<table cellspacing="0">，再通过 CSS 调整边框样式（如border-collapse: collapse）。​

3. 语义化的重要性：​

• 不使用<thead>/<tbody>时，表格仍能显示，但不利于后续维护（如筛选、排序数据），也不友好于屏幕阅读器（无障碍访问）。​

• 推荐所有复杂表格都使用语义化结构。​

4. CSS 替代属性：​

• 本文中的width/height/align等属性，在现代开发中更推荐用 CSS 实现（如style="width: 500px; text-align: center"），以实现 “结构与样式分离”，便于统一管理。​

六、学习总结​

1. 核心逻辑：表格是 “行（<tr>）+ 单元格（<td>/<th>）” 的组合，复杂表格需用<thead>/<tbody>/<tfoot>划分语义。​

2. 关键技能：掌握colspan（跨列）和rowspan（跨行）的合并逻辑，是处理复杂表格的核心。​

3. 开发规范：优先使用语义化标签，尽量用 CSS 控制样式，避免过度依赖表格自带属性。

 

---

 

1、参考  ：  https://www.cnblogs.com/JuFoFu/p/4597416.html

2、表格的margin和padding 无效问题 ： https://my.oschina.net/u/3618644/blog/1570921

　　可以对表格table设置margin，不能设置padding；

　　可以对单元格td设置padding；不能设置margin

　　注意：不是所有的标签都是具有完整的 盒模型的。如，

　　　　　

3、表格样式设置：https://blog.csdn.net/qq_41665356/article/details/80240184

　　a、table 的渲染结构：

　　　　　　margin：有效

　　　　　　padding：如果 border-collapse 为 collapse 时，padding无效；border-collapse 为 默认值时，padding就是有效的。

　　b、tr 的渲染结构：

　　　　　　margin：无效

　　　　　　padding：无效

　　c、td 的渲染结构：

　　　　　　margin：无效

　　　　　　padding：如果 border-collapse 为 collapse 时，padding无效；border-collapse 为 默认值时，padding就是有效的。