表的 td 之间的 HTML 空间

Question

这怎么可能:

 <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>

但如果我在“-”之间放置空格，则不会。我知道在 HTML 中元素的位置并不重要(我的意思是，在这种情况下)。为什么？

Answer 1

CSS 解决方案:

如果我做对了，你想把-在两个空格之间，所以你只需要使用 padding: 0px 5px; 来模拟它用你的td元素，这是一个片段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>

这将显示 -作为" - "在td里面元素。

HTML 解决方案:

如果你想使用HTML只有没有 CSS , 解决方案是使用 cellpadding=5用你的table ，这是一个工作片段:

<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>

但这会在 tr 之间留出空格元素也是，换句话说，它将生成padding-top和 padding-bottom也适合你的td元素。

结论:

因此使用padding 可以更好地实现您的要求在 CSS ，现在由您来选择正确的解决方案。