html 表格的 `border` 属性本身不支持直接渲染文本内容；实现棋盘坐标标注的规范、语义化且可维护的方式是扩展表格结构——使用 `` 添加列标头（a–h），并在每行 `` 中用 `` 添加行标头（1–8）。

在构建标准国际象棋棋盘时，仅靠 CSS 边框（如 border: 40px ridge beige）无法插入可交互、可选中、可访问的字母与数字标签。这是因为 CSS border 是纯装饰性绘图层，不具备 DOM 节点能力，无法承载文本、响应事件或被屏幕阅读器识别。

✅ 推荐方案：语义化表格结构增强
通过合理运用 HTML 表格语义元素，既保持结构清晰，又天然支持无障碍访问和样式控制：

• 使用 定义顶部列标头（A–H），首单元格留空以对齐左上角坐标原点；
• 在 中，每行以 作为行号（8 → 1），右侧 8 个 作为棋格；
• 为 单独设置背景与内边距，使其视觉上“贴合”边框区域，但逻辑上仍属于表格内容区。

  以下是完整、可运行的实现代码：

  <table class="frame">
    <thead>
      <tr>
        <th></th> <!-- 左上角空白单元格 -->
        <th>A</th><th>B</th><th>C</th><th>D</th>
        <th>E</th><th>F</th><th>G</th><th>H</th>
      </tr>
    </thead>
    <tbody>
      <tr><th>8</th><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td></tr>
      <tr><th>7</th><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td></tr>
      <tr><th>6</th><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td></tr>
      <tr><th>5</th><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td></tr>
      <tr><th>4</th><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td></tr>
      <tr><th>3</th><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td></tr>
      <tr><th>2</th><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td></tr>
      <tr><th>1</th><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td><td class="brown"></td><td class="ivory"></td></tr>
    </tbody>
  </table>

  配套 CSS 建议（增强可读性与对齐）：

  .frame {
    margin: 60px auto;
    background: black;
    border-collapse: separate; /* 确保 th/td 边框独立 */
    border-spacing: 0;
  }
  
  /* 列标头（A-H）与行标头（1-8）统一风格 */
  th {
    background-color: ivory;
    width: 60px;
    height: 60px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
  }
  
  /* 仅对 tbody 中的 th（即行号）加左右内边距，避免挤压棋格 */
  tbody th {
    padding: 0 6px;
  }
  
  .ivory, .brown {
    width: 60px;
    height: 60px;
    font-size: 12px;
    vertical-align: bottom;
  }
  
  .ivory { background-color: ivory; }
  .brown  { background-color: #8B4513; } /* 更准确的棕色 */

  ⚠️ 注意事项：

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载

  立即学习“前端免费学习笔记（深入）”；

  • 不要尝试用 ::before/::after 伪元素向 border 插入文字——它无法精确定位、不可选中、破坏语义，且在高缩放或打印时极易错位；
  • 元素自带 scope 语义（默认 scope="col" 或 scope="row"），配合辅助技术可自动关联行列数据，提升可访问性；
  • 若需响应式适配，建议用 em 或 rem 替代固定 px 尺寸，并为小屏添加 font-size: clamp() 控制字号范围。

  此方法兼顾语义正确性、视觉完整性与长期可维护性，是构建专业级棋盘 UI 的最佳实践。