【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>99td>
    td>100td>
    td>199td>
  tr>
  tr>
    td>李四td>
    td>98td>
    td>100td>
    td>198td>
  tr>
  tr>
    td>总结td>
    td>全市第一td>
    td>全市第一td>
    td>全市第一td>
  tr>
table>

表格结构标签

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

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

1. 结构化分离：通过 、
   和可选的
   分别定义表格的头部、主体和底部，可以清晰地区分表格的不同部分，使得文档结构更加明确。

2. 优化渲染：浏览器可以根据
   来优化表格的渲染速度，尤其是在大型表格加载时。例如，在网页内容逐步加载的过程中，只有当
   内容下载完成后才会显示表格的具体数据行，而表头（
   ）可能先于主体内容呈现给用户。

3. 样式控制：对
   应用 CSS 样式可以方便地为整个表格数据区域设置特定样式，与表头或页脚区分开来。

4. 脚本操作：在 JavaScript 或 jQuery 等脚本处理时，可以通过选择器直接定位到
   元素，更方便地进行增删改查等操作。

5. 打印优化：在打印大表格时，有的浏览器会自动重复显示表头信息，而使用 和
   结构有助于确保表头和主体数据在多页打印时正确分布。

   

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