CODEWITHSUNDEEP
html
Irina Farcau
Irina Farcau

Reputation: 157

HTML space between td of a table

How is that possible that this work:

 <TABLE>
 <TR>
    <TD  onclick="play('cell1')" id="cell1">-</TD>
    <TD onclick="play('cell2')" id="cell2">-</TD>
    <TD onclick="play('cell3')" id="cell3">-</TD>
 </TR>
 <TR>
    <TD onclick="play('cell4')" id="cell4">-</TD>
    <TD onclick="play('cell5')" id="cell5">-</TD>
    <TD onclick="play('cell6')" id="cell6">-</TD>
 </TR>
 <TR>
    <TD onclick="play('cell7')" id="cell7">-</TD>
    <TD onclick="play('cell8')" id="cell8">-</TD>
    <TD onclick="play('cell9')" id="cell9">-</td>
 </TR>

but if I put spaces between "-" it doesn't. I knew that it doesn't matter in HTML the position of elements(I mean, in this case). Why?

Upvotes: 2

Views: 363

Answers (1)

cнŝdk
cнŝdk

Reputation: 32175

CSS solution:

If I get it right, you want to put - between two spaces, so you will simply need to simulate this using padding: 0px 5px; with your td elements, this is a snippet DEMO:

table td {
   padding: 0px 5px;
 }
<TABLE>
  <TR>
    <TD onclick="play('cell1')" id="cell1">-</TD>
    <TD onclick="play('cell2')" id="cell2">-</TD>
    <TD onclick="play('cell3')" id="cell3">-</TD>
  </TR>
  <TR>
    <TD onclick="play('cell4')" id="cell4">-</TD>
    <TD onclick="play('cell5')" id="cell5">-</TD>
    <TD onclick="play('cell6')" id="cell6">-</TD>
  </TR>
  <TR>
    <TD onclick="play('cell7')" id="cell7">-</TD>
    <TD onclick="play('cell8')" id="cell8">-</TD>
    <TD onclick="play('cell9')" id="cell9">-</td>
  </TR>
</TABLE>

This will show - as " - " inside the td elements.

HTML solution:

If you want to use HTML only without CSS, the solution will be to use cellpadding=5 with your table, this is a working snippet:

<TABLE CELLPADDING=10>
  <TR>
    <TD onclick="play('cell1')" id="cell1">-</TD>
    <TD onclick="play('cell2')" id="cell2">-</TD>
    <TD onclick="play('cell3')" id="cell3">-</TD>
  </TR>
  <TR>
    <TD onclick="play('cell4')" id="cell4">-</TD>
    <TD onclick="play('cell5')" id="cell5">-</TD>
    <TD onclick="play('cell6')" id="cell6">-</TD>
  </TR>
  <TR>
    <TD onclick="play('cell7')" id="cell7">-</TD>
    <TD onclick="play('cell8')" id="cell8">-</TD>
    <TD onclick="play('cell9')" id="cell9">-</td>
  </TR>
</TABLE>

But this will make spaces between tr elements too, in other words it will make padding-top and padding-bottom too for your td elements.

Conclusion:

So your requirements will be better achieved using paddingin CSS, now it's up to you to choose the right solution.

Upvotes: 1

Related Questions