html - HTML 中表格行旁边的文本

Question

我是前端开发的新手，我遇到了这个问题:我想在表格的每一行旁边(左侧)和每一列上显示文本。结果类似于棋盘:

我该如何处理这个问题？

Answer 1

您可以使用 HTML 表格:

<table>
  <tr>
    <td class="outside"></td>
    <td class="outside">1</td>
    <td class="outside">2</td>
    <td class="outside">3</td>
  </tr>
  <tr>
    <td class="outside">A</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="outside">B</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="outside">C</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>  

并添加 CSS 样式:

.outside {border:none;}
table {border-collapse: collapse; height: 250px; width: 250px;}
th, td {border: 1px solid black;}
td {text-align: center; vertical-align: middle;}

但是，查看 bootstrap 的网格布局将是一个更好的选择。 www.getbootstrap.com

这是一个工作演示:http://plnkr.co/edit/JWP5RvA5sOATseliVveg?p=preview