CODEWITHSUNDEEP
htmlcss
Manghud
Manghud

Reputation: 1376

Making fine tictactoe lines with html and css

Trying out hands on front end design with simple Tic Toc Toe game application. Unfortunately, CSS does not make the lines very accurate and generated gaps between each block. Any aesthetic suggestion please to make make the design beautiful and coherent?

I tried to look Mozilla MDN community for MODEL-BOX concept, but did not get my solution. 

h3 {
  text-align: center;
}

td {
  width: 70px;
  height: 70px;
}

#td11 {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

#td13 {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

#td22 {
  border: 1px solid black;
}

#td31 {
  border-top: 1px solid black;
  border-right: 1px solid black;
}

#td33 {
  border-top: 1px solid black;
  border-left: 1px solid black;
}
<body>
  <h3>Tic Tac Toe</h3>
  <table align="center">
    <thead></thead>
    <tr>
      <td id="td11"></td>
      <td id="td12"></td>
      <td id="td13"></td>
    </tr>
    <tr>
      <td id="td21"></td>
      <td id="td22"></td>
      <td id="td23"></td>
    </tr>
    <tr>
      <td id="td31"></td>
      <td id="td32"></td>
      <td id="td33"></td>
    </tr>
    <tr></tr>
  </table>
</body>

Upvotes: 1

Views: 1101

Answers (4)

Ito Pizarro
Ito Pizarro

Reputation: 1607

I think you want CSS's border-collapse property.

EDIT I should add that this solution will only address the specific problem of the gaps in the <table> cell borders.

table {
  border-collapse: collapse;
}


h3 {
  text-align: center;
}

table {
  border-collapse: collapse;
}

td {
  width: 70px;
  height: 70px;
}

#td11 {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

#td13 {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

#td22 {
  border: 1px solid black;
}

#td31 {
  border-top: 1px solid black;
  border-right: 1px solid black;
}

#td33 {
  border-top: 1px solid black;
  border-left: 1px solid black;
}
<body>
  <h3>Tic Tac Toe</h3>
  <table align="center">
    <thead></thead>
    <tr>
      <td id="td11"></td>
      <td id="td12"></td>
      <td id="td13"></td>
    </tr>
    <tr>
      <td id="td21"></td>
      <td id="td22"></td>
      <td id="td23"></td>
    </tr>
    <tr>
      <td id="td31"></td>
      <td id="td32"></td>
      <td id="td33"></td>
    </tr>
    <tr></tr>
  </table>
</body>

Upvotes: 4

naggab
naggab

Reputation: 401

You should include the folowing code in your css:

   *{
        padding:0;
        margin:0;
    }

Maybe this solves your problem.

Upvotes: 0

Alok Mali
Alok Mali

Reputation: 2881

You can get a better design by adding these properties to the table itself.

<table align="center" cellpadding="1" cellspacing="1" border="1"></table>

Upvotes: 0

41 72 6c
41 72 6c

Reputation: 1780

Check out this one:

TicTacToe

HTML:

<h1>Tic Tac Toe</h1>
<table>
    <tr>
        <td></td>
        <td class="vert"></td>
        <td></td>
    </tr>
    <tr>
        <td class="hori"></td>
        <td class="vert hori"></td>
        <td class="hori"></td>
    </tr>
    <tr>
        <td></td>
        <td class="vert"></td>
        <td></td>
    </tr>
</table>

CSS: 

h1 {
  text-align: center;
}
td {
  width: 100px;
  height: 100px;
}
table {
  margin: 5px auto;
}
.vert {
  border-left: 2px solid black;
  border-right: 2px solid black;
}
.hori {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

Upvotes: 1

Related Questions