Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Style a table as a tic tac toe board with CSS

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>
like image 445
nikhil Avatar asked Oct 16 '25 04:10

nikhil


1 Answers

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>
like image 68
John Stimac Avatar answered Oct 18 '25 22:10

John Stimac



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!