如何为HTML表格添加边框？多次修复失败寻求解决方案

问题分析 #

• 代码存在无效HTML结构：你在<thead>与<tbody>之间、<tbody>的行之间插入了<br/>标签，这不符合表格规范语法——表格内部仅允许包含<thead>、<tbody>这类专用容器，以及其中的行、单元格元素，多余的<br/>会打乱表格正常渲染逻辑。
• 未设置边框样式：默认HTML表格不会显示边框，需通过CSS定义边框效果。

修正后的完整代码 #

<style>
/* 统一设置表格边框样式，合并相邻边框 */
#table {
  border-collapse: collapse; /* 避免出现双边框 */
  width: 100%;
}

#table th, #table td {
  border: 1px solid #000; /* 设置1px黑色边框 */
  padding: 8px; /* 给单元格加内边距，让内容更舒展 */
  text-align: left;
}

#table th {
  background-color: #f2f2f2; /* 表头加背景色，区分内容行 */
}
</style>

<table id="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Courses</th>
            <th>Marks</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Suresh</td>
            <td>Btech</td>
            <td>89</td>
        </tr>
        <tr>
            <td>Mukesh</td>
            <td>MBA</td>
            <td>75</td>
        </tr>
        <tr>
            <td>Kamlesh</td>
            <td>BA</td>
            <td>90</td>
        </tr>
    </tbody>
</table>

关键说明 #

• border-collapse: collapse：让表格、表头、单元格的边框合并成单一边框，解决默认情况下边框叠加的问题。
• 给<th>和<td>统一设置边框，确保所有单元格都能显示边框。

内容的提问来源于stack exchange，提问作者Vinay Kumar