Question

I am planning to write a tic tac toe game with jQuery and PHP. I want to style the board (an html table) with CSS. I am not aware of CSS properties that can be applied to selectively to cells so that specific cells get borders.
Are there any CSS properties that I can use or should I try a different approach instead?

The html markup is:

  <div id="board">
    <table>
      <tr id="row1">
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
      </tr>
      <tr id="row2">
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
      </tr>
      <tr id="row3">
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
      </tr>
    </table>
  </div>

Answer 1

Well, add a second class to some TDs and give borders only to that class.

HTML and CSS:

.square{
    width:100px;
    height:100px;
}

.v{
    border-left:1px solid #000;
    border-right:1px solid #000;
}

.h{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}

<div id="board">
    <table>
      <tr id="row1">
        <td class="square"></td>
        <td class="square v"></td>
        <td class="square"></td>
      </tr>
      <tr id="row2">
        <td class="square h"></td>
        <td class="square v h"></td>
        <td class="square h"></td>
      </tr>
      <tr id="row3">
        <td class="square"></td>
        <td class="square v"></td>
        <td class="square"></td>
      </tr>
    </table>
  </div>