【HTML】表格

cellspacing: 规定单元之间的空间

或者使用border-collapse: collapse;

border-collapse: collapse; 和 border-spacing: 0; 在某些方面看似相关，但实际上它们控制的是不同的表格样式属性：

• border-collapse: collapse; 指定了当表格边框相遇时是否合并成一个单一的边框。如前所述，当其值为 collapse 时，表格单元格间的边框会合并在一处显示，而不是各自独立显示。
• border-spacing: 0; 定义了在 border-collapse: separate; 模式下（即边框不合并时），相邻单元格边框之间的间距。当值为 0 时，即使是在非合并边框的情况下，也取消了单元格边框之间的任何间距。

虽然在设置了 border-collapse: collapse; 的情况下，border-spacing 的值不会直接影响实际边框的表现（因为此时边框已合并，无间距可言），但有时候为了确保在不同浏览器中的兼容性和一致性，或者未来可能改变布局设计，开发者可能会同时声明这两个属性。因此，在实践中并不算严格意义上的重复。

当设置为 separate 时，表格的每个单元格（包括行、列、行组和列组）的边框都将独立显示，并且相邻单元格之间的边框之间会有一段间距，这个间距可以通过 border-spacing 属性来指定。（也是border-collapse的默认值）

cellspacing="0"

table {
    border-collapse: collapse;
    border-spacing: 0;
} 

网页中的表格与 Excel 表格类似，用来展示数据。

基本使用

标签：table 嵌套 tr，tr 嵌套 th / td。

tr：table row

th：Table header cell

td：table data cell

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。

表格单元格的大小是可以靠内容撑开的。

<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>99</td>
    <td>100</td>
    <td>199</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>98</td>
    <td>100</td>
    <td>198</td>
  </tr>
  <tr>
    <td>总结</td>
    <td>全市第一</td>
    <td>全市第一</td>
    <td>全市第一</td>
  </tr>
</table>

表格结构标签

这三个标签是给浏览器看的，加了没有任何效果。

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

1. 结构化分离：通过 <thead>、<tbody> 和可选的 <tfoot> 分别定义表格的头部、主体和底部，可以清晰地区分表格的不同部分，使得文档结构更加明确。
2. 优化渲染：浏览器可以根据 <tbody> 来优化表格的渲染速度，尤其是在大型表格加载时。例如，在网页内容逐步加载的过程中，只有当 <tbody> 内容下载完成后才会显示表格的具体数据行，而表头（<thead>）可能先于主体内容呈现给用户。
3. 样式控制：对 <tbody> 应用CSS样式可以方便地为整个表格数据区域设置特定样式，与表头或页脚区分开来。
4. 脚本操作：在JavaScript或jQuery等脚本处理时，可以通过选择器直接定位到 <tbody> 元素，更方便地进行增删改查等操作。
5. 打印优化：在打印大表格时，有的浏览器会自动重复显示表头信息，而使用 <thead> 和 <tbody> 结构有助于确保表头和主体数据在多页打印时正确分布。

提示：表格结构标签可以省略。