HTML表格添加棋盘行列标签的方法

2. 样式精简：复用类名，增强可维护性

.frame {
  margin: 60px auto;
  background: black;
  border-collapse: collapse; /* 关键：消除单元格间隙，确保边框连续 */
}
.frame th,
.frame td {
  width: 60px;
  height: 60px;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.frame thead th {
  background-color: #f5f5dc; /* 米色，呼应原 border 色调 */
  padding: 8px 0;
}
.frame tbody th {
  background-color: #f5f5dc;
  width: 40px; /* 行号列略窄，保持比例协调 */
  padding: 0 6px;
}
.ivory { background-color: ivory; }
.brown { background-color: #8B4513; } /* 更准确的棕褐色 */

3. 完整 HTML 示例（含语义化结构）

  

    

      
 
      
A
B
C
D
      
E
F
G
H
    
  
  

    
8

    
7

    
6

    
5

    
4

    
3

    
2

    
1

  

⚠️ 注意事项：

• 勿省略 border-collapse: collapse：否则默认 separate 模式会在