Q:

Text beside table row in HTML

I'm kind of new to front-end development and I have this problem: I want to show text beside each row of the table (on the left) and upon every column. The result would be similar to a chessboard:

How can I manage this?

A:

You can use a HTML table:
<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>  

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

However, looking at bootstrap's grid layout would be a better alternative.
www.getbootstrap.com
Here is a working demo: http://plnkr.co/edit/JWP5RvA5sOATseliVveg?p=preview

