HTML表格边框控制与CSS样式优化指南

1. HTML表格基础与边框控制

在网页开发中，表格（table）是最常用的数据展示元素之一。一个基础的HTML表格由<table>标签定义，包含表头<th>和表格行<tr>、单元格<td>等子元素。今天我们就来深入探讨如何创建一个带有1像素黑色边框的简洁表格。

表格边框的控制主要涉及三个关键属性：

• border：定义表格边框的宽度（以像素为单位）
• cellspacing：控制单元格之间的间距
• cellpadding：定义单元格内容与边框之间的内边距

注意：虽然这些属性在HTML5中仍然有效，但现代前端开发更推荐使用CSS来控制样式。不过对于快速原型开发或简单场景，直接使用属性设置仍然很实用。

2. 基础表格代码解析

让我们先看一个完整的表格代码示例：

html复制<table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <th>项目</th>
        <th>标准</th>
        <th>审核结果</th>
    </tr>
    <tr>
        <td>页面加载速度</td>
        <td>≤2秒</td>
        <td>通过</td>
    </tr>
    <tr>
        <td>移动端适配</td>
        <td>响应式布局</td>
        <td>待改进</td>
    </tr>
</table>

2.1 属性详解

border="1"

• 设置表格外边框和单元格边框的宽度为1像素
• 值为0时表示无边框
• 在大多数浏览器中，默认边框呈现为浅灰色

cellspacing="0"

• 消除单元格之间的间隙
• 默认值通常为2像素
• 设置为0可以使边框看起来更紧凑

cellpadding="10"

• 设置单元格内容与边框之间的内边距为10像素
• 防止文字紧贴边框，提高可读性
• 可根据内容长度调整此值

2.2 表格结构解析

• <table>：定义整个表格容器
• <tr>：表格行（table row），每行包含一组单元格
• <th>：表头