entityMap|blocks|key|9sd5k|text|另外，如果需要cellspacing="0"，别忘了在table的样式表中添加border-collapse:+collapse。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data^0|7|F|R|5|13|P^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@$A|H|B|I|C|D]|$A|J|B|K|C|D]|$A|L|B|M|C|D]]|E|@]|F|$]]]]

<p>Also, if you want <code>cellspacing="0"</code>, don't forget to add <code>border-collapse: collapse</code> in your <code>table</code>'s stylesheet.</p>


entityMap|blocks|key|dltab|text|据我所知，在表格单元格上设置边距不会有任何效果。cellspacing真正的CSS等价物是border-spacing+--但它不能在in浏览器中工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3kn4e|如上所述，您可以使用border-collapse:+collapse可靠地将单元格间距设置为0，但是对于任何其他值，我认为唯一跨浏览器的方法就是继续使用cellspacing属性。^0|O|B|19|E|0|A|P|25|B^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@$A|J|B|K|C|D]|$A|L|B|M|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|N|9|@$A|O|B|P|C|D]|$A|Q|B|R|C|D]]|E|@]|F|$]]]]

<p>Setting margins on table cells doesn't really have any effect as far as I know. The true CSS equivalent for <code>cellspacing</code> is <code>border-spacing</code> - but it doesn't work in Internet&nbsp;Explorer. </p>

<p>You can use <code>border-collapse: collapse</code> to reliably set cell spacing to 0 as mentioned, but for any other value I think the only cross-browser way is to keep using the <code>cellspacing</code> attribute.</p>


entityMap|blocks|key|5luq|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|-4|5|6|7|B|8|@]|9|@]|A|$]]]]

<pre class="lang-css prettyprint-override"><code>table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}
</code></pre>


entityMap|blocks|key|3cgei|text|TBH。对于所有使用CSS的人来说，你也可以只使用cellpadding="0"+cellspacing="0"，因为它们并没有被弃用……|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|cp6b7|其他任何建议利润率的人显然还没有尝试过这种做法。^0|P|F|15|F|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@$A|J|B|K|C|D]|$A|L|B|M|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|N|9|@]|E|@]|F|$]]]]

<p>TBH. For all the fannying around with CSS you might as well just use <code>cellpadding="0"</code> <code>cellspacing="0"</code> since they are not deprecated...</p>

<p>Anyone else suggesting margins on <code>&lt;td&gt;</code>'s obviously has not tried this.</p>


entityMap|blocks|key|bsejg|text|基础知识|type|unstyled|depth|inlineStyleRanges|entityRanges|data|hccq|为了在CSS中控制“单元格边距”，你可以简单地在表单元格上使用padding。例如，对于10px的"cellpadding"：|offset|length|style|CODE|8ivs3|对于"cellspacing"，您可以将border-spacing+CSS属性应用于您的表。例如，对于10px的"cellspacing"：|f6as1|这个属性甚至允许单独的水平和垂直间距，这是你不能用老式的"cellspacing“做的。|c362b|IE≤7中的问题|7ekf5|这将在几乎所有流行的浏览器中工作，除了Internet+Explorer直到Internet+Explorer+7，在那里你几乎是不走运的。我之所以说“几乎”，是因为这些浏览器仍然支持border-collapse属性，该属性合并相邻表单元格的边界。如果您试图消除单元格间距(即cellspacing="0")，那么border-collapse:collapse应该具有相同的效果:表单元格之间没有空格。但是，这种支持是有缺陷的，因为它不会覆盖cellspacing元素上现有的table属性。|4486j|简而言之:对于非InternetExplorer5-7浏览器，border-spacing可以处理你。对于Internet+Explorer来说，如果你的情况恰到好处(你想要0的单元格间距，并且你的表格还没有定义它)，你可以使用border-collapse:collapse。|9a3ah|注意:有关可以应用于表和适用于哪些浏览器的CSS属性的详细信息，请参阅这个神奇的Quirksmode页面。^0|0|V|7|0|K|E|0|0|0|2K|F|3V|F|4E|O|67|B|0|V|E|36|O|0^^$0|$]|1|@$2|3|4|5|6|7|8|U|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|V|9|@$E|W|F|X|G|H]]|A|@]|B|$]]|$2|I|4|J|6|7|8|Y|9|@$E|Z|F|10|G|H]]|A|@]|B|$]]|$2|K|4|L|6|7|8|11|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|12|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|13|9|@$E|14|F|15|G|H]|$E|16|F|17|G|H]|$E|18|F|19|G|H]|$E|1A|F|1B|G|H]]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1C|9|@$E|1D|F|1E|G|H]|$E|1F|F|1G|G|H]]|A|@]|B|$]]|$2|S|4|T|6|7|8|1H|9|@]|A|@]|B|$]]]]

<p><strong>Basics</strong></p>
<p>For controlling &quot;cellpadding&quot; in CSS, you can simply use <code>padding</code> on table cells. E.g. for 10px of &quot;cellpadding&quot;:</p>
<pre class="lang-css prettyprint-override"><code>td { 
    padding: 10px;
}
</code></pre>
<p>For &quot;cellspacing&quot;, you can apply the <code>border-spacing</code> CSS property to your table. E.g. for 10px of &quot;cellspacing&quot;:</p>
<pre class="lang-css prettyprint-override"><code>table { 
    border-spacing: 10px;
    border-collapse: separate;
}
</code></pre>
<p>This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school &quot;cellspacing&quot;.</p>
<p><strong>Issues in IE ≤  7</strong></p>
<p>This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say &quot;almost&quot; because these browsers still support the <code>border-collapse</code> property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, <code>cellspacing=&quot;0&quot;</code>) then <code>border-collapse:collapse</code> should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing <code>cellspacing</code> HTML attribute on the table element.</p>
<p>In short: for non-Internet Explorer 5-7 browsers, <code>border-spacing</code> handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use <code>border-collapse:collapse</code>.</p>
<pre class="lang-css prettyprint-override"><code>table { 
    border-spacing: 0;
    border-collapse: collapse;
}
</code></pre>
<p>Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this <a href="http://www.quirksmode.org/css/tables.html" rel="noreferrer">fantastic Quirksmode page</a>.</p>


entityMap|blocks|key|1r12j|text|对于那些想要一个非零cellspace值的人，下面的CSS对我有效，但我只能在Firefox中测试它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|av61l|有关兼容性的详细信息，请参阅其他地方发布的Quirksmode链接。它似乎不能与旧版本的Internet+Explorer一起使用。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

<p>For those who want a non-zero cellspacing value, the following CSS worked for me, but I'm only able to test it in Firefox.</p>

<p>See the <a href="http://www.quirksmode.org/css/tables.html" rel="noreferrer">Quirksmode</a> link <a href="https://stackoverflow.com/questions/339923/how-to-set-cellpadding-and-cellspacing-in-css/3209434#3209434">posted elsewhere</a> for compatibility details. It seems it may not work with older Internet&nbsp;Explorer versions.</p>

<pre class="lang-css prettyprint-override"><code>table {
    border-collapse: separate;
    border-spacing: 2px;
}
</code></pre>


entityMap|blocks|key|ah1qs|text|此攻击适用于Internet+Explorer+6及更高版本、Google+Chrome、Firefox和Opera|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fu6on|*声明是针对Internet+Explorer+6和7的，其他浏览器将适当地忽略它。|offset|length|style|CODE|44le0|expression('separate'，cellSpacing+=+'10px')返回'separate'，但这两个语句都是运行的，因为在JavaScript中，您可以传递比预期更多的参数，并且所有这些参数都将被计算。^0|0|0|1|0|0|17|19|A^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|L|9|@$E|M|F|N|G|H]]|A|@]|B|$]]|$2|I|4|J|6|7|8|O|9|@$E|P|F|Q|G|H]|$E|R|F|S|G|H]]|A|@]|B|$]]]]

<p>This hack works for Internet&nbsp;Explorer&nbsp;6 and later, <a href="http://en.wikipedia.org/wiki/Google_Chrome" rel="noreferrer">Google Chrome</a>, Firefox, and <a href="http://en.wikipedia.org/wiki/Opera_%28web_browser%29" rel="noreferrer">Opera</a>:</p>

<pre class="lang-css prettyprint-override"><code>table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}
</code></pre>

<p>The <code>*</code> declaration is for Internet&nbsp;Explorer 6 and 7, and other browsers will properly ignore it.</p>

<p><code>expression('separate', cellSpacing = '10px')</code> returns <code>'separate'</code>, but both statements are run, as in JavaScript you can pass more arguments than expected and all of them will be evaluated.</p>


entityMap|blocks|key|5h2h7|text|这个问题的简单解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

<p>The simple solution to this problem is: </p>

<pre class="lang-css prettyprint-override"><code>table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}
</code></pre>


entityMap|blocks|key|4cgu9|text|默认|type|unstyled|depth|inlineStyleRanges|entityRanges|data|17v9i|浏览器的默认行为相当于：|a92rm|​|cvh2r|单元格填充|65b86|设置单元格内容和单元格壁之间的间距|1v2vg|fq2qj|单元格间距|4a2jl|控制表单元格之间的间距|bigbs|ct6im|两者都有|pt11|9ghk3|两者(特殊)|3bfe8|888l3|注意:如果设置了border-spacing，则表示该表的border-collapse属性为separate。|offset|length|style|CODE|507dt|6qj4p|你自己试试吧！|7c1ee|在这里，您可以找到实现这一点的旧的HTML方法。^0|0|0|0|0|0|0|0|0|0|0|0|0|0|8|E|T|F|1B|8|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|17|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|18|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|19|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|1A|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|1B|9|@]|A|@]|B|$]]|$2|K|4|F|6|7|8|1C|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|1D|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|1E|9|@]|A|@]|B|$]]|$2|P|4|F|6|7|8|1F|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1G|9|@]|A|@]|B|$]]|$2|S|4|F|6|7|8|1H|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|1I|9|@]|A|@]|B|$]]|$2|V|4|F|6|7|8|1J|9|@]|A|@]|B|$]]|$2|W|4|X|6|7|8|1K|9|@$Y|1L|Z|1M|10|11]|$Y|1N|Z|1O|10|11]|$Y|1P|Z|1Q|10|11]]|A|@]|B|$]]|$2|12|4|-4|6|7|8|1R|9|@]|A|@]|B|$]]|$2|13|4|14|6|7|8|1S|9|@]|A|@]|B|$]]|$2|15|4|16|6|7|8|1T|9|@]|A|@]|B|$]]]]

<h2>Default</h2>

<p>The default behavior of the browser is equivalent to:</p>

<pre><code>table {border-collapse: collapse;}
td    {padding: 0px;}
</code></pre>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://i.stack.imgur.com/cukle.png" alt="Enter image description here"></p>

<h2>Cellpadding</h2>

<p>Sets the amount of space between the contents of the cell and the cell wall</p>

<pre><code>table {border-collapse: collapse;}
td    {padding: 6px;}
</code></pre>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://i.stack.imgur.com/c0ght.png" alt="Enter image description here"></p>

<h2>Cellspacing</h2>

<p>Controls the space between table cells</p>

<pre><code>table {border-spacing: 2px;}
td    {padding: 0px;}
</code></pre>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://i.stack.imgur.com/WNuBP.png" alt="Enter image description here"></p>

<h2>Both</h2>

<pre><code>table {border-spacing: 2px;}
td    {padding: 6px;}
</code></pre>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://i.stack.imgur.com/eyZQl.png" alt="Enter image description here"></p>

<h2>Both (special)</h2>

<pre><code>table {border-spacing: 8px 2px;}
td    {padding: 6px;}
</code></pre>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://i.stack.imgur.com/gbJ3T.png" alt="Enter image description here"></p>

<blockquote>
  <p><strong>Note:</strong> If there is <code>border-spacing</code> set, it indicates <code>border-collapse</code> property of the table is <code>separate</code>.</p>
</blockquote>

<p><a href="http://jsfiddle.net/H4emK/3303/" rel="noreferrer">Try it yourself!</a></p>

<p><a href="http://www.htmlcodetutorial.com/tables/index_famsupp_29.html" rel="noreferrer">Here</a> you can find the old HTML way of achieving this.</p>


entityMap|blocks|key|bcv05|text|使用div对单元格的内容进行包装，您可以执行任何操作，但必须对列中的每个单元格进行包装才能获得一致的效果。例如，要获得更宽的左右边距：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|f5lt3|所以CSS将会是，|eldgq|​|eti4l|a1hcc|是的，这是一个麻烦。是的，它适用于Internet和Explorer。事实上，我只在we上测试过这一点，因为这是我们在工作中唯一被允许使用的。^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|L|9|@]|A|@]|B|$]]|$2|G|4|F|6|7|8|M|9|@]|A|@]|B|$]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]]]

<p>Wrap the contents of the cell with a div and you can do anything you want, but you have to wrap every cell in a column to get a uniform effect. For example, to just get wider left &amp; right margins:</p>

<p>So the CSS will be,</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="0"&gt;
  &lt;tr&gt;
    &lt;td class="tight"&gt;
      &lt;div class="cellwidener"&gt;My content&lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>Yes, it's a hassle. Yes, it works with Internet&nbsp;Explorer. In fact, I've only tested this with Internet&nbsp;Explorer, because that's all we're allowed to use at work.</p>


entityMap|blocks|key|28b15|text|根据我对W3C分类的理解，s+are+meant+for+displaying+data+'only'.|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|r40|​|1mg9h|Based+on+that+I+found+it+a+lot+easier+to+create+a|afec3|with+the+backgrounds+and+all+that+and+have+a+table+with+data+floating+over+it+using+position:+absolute；and+background:+transparent;...|et0pn|9j1ol|It+works+on+Chrome，Internet Explorer+(6+and+later)+and+Mozilla+Firefox+(2+and+later).|cb9so|Margins+are+used+(or+meant+anyways)+to+create+a+spacer+between+container+elements，like|3a5e3|quhm|，|8dib0|and，not|33s28|9t9op|%7C或。将它用于除容器元素之外的任何其他元素，将使您忙于调整网站以适应未来的浏览器更新。|36v22|：|4vb7i^0|D|13|0|0|0|1D|0|0|3Q|0|0|0|2D|0|0|2E|0|0|0|1|0|0|7|0|0|1|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|12|9|@$A|13|B|14|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|15|9|@]|E|@]|F|$]]|$2|I|4|J|6|7|8|16|9|@$A|17|B|18|C|D]]|E|@]|F|$]]|$2|K|4|L|6|7|8|19|9|@$A|1A|B|1B|C|D]]|E|@]|F|$]]|$2|M|4|H|6|7|8|1C|9|@]|E|@]|F|$]]|$2|N|4|O|6|7|8|1D|9|@$A|1E|B|1F|C|D]]|E|@]|F|$]]|$2|P|4|Q|6|7|8|1G|9|@$A|1H|B|1I|C|D]]|E|@]|F|$]]|$2|R|4|H|6|7|8|1J|9|@]|E|@]|F|$]]|$2|S|4|T|6|7|8|1K|9|@$A|1L|B|1M|C|D]]|E|@]|F|$]]|$2|U|4|V|6|7|8|1N|9|@$A|1O|B|1P|C|D]]|E|@]|F|$]]|$2|W|4|T|6|7|8|1Q|9|@$A|1R|B|1S|C|D]]|E|@]|F|$]]|$2|X|4|Y|6|7|8|1T|9|@]|E|@]|F|$]]|$2|Z|4|10|6|7|8|1U|9|@]|E|@]|F|$]]|$2|11|4|H|6|7|8|1V|9|@]|E|@]|F|$]]]]

<p>From what I understand from the W3C classifications is that <code>&lt;table&gt;</code>s are meant for displaying data 'only'.</p>

<p>Based on that I found it a lot easier to create a <code>&lt;div&gt;</code> with the backgrounds and all that and have a table with data floating over it using <code>position: absolute;</code> and <code>background: transparent;</code>...</p>

<p>It works on Chrome, Internet&nbsp;Explorer (6 and later) and Mozilla Firefox (2 and later).</p>

<p>Margins are used (or meant anyways) to create a spacer between container elements, like <code>&lt;table&gt;</code>, <code>&lt;div&gt;</code> and <code>&lt;form&gt;</code>, not <code>&lt;tr&gt;</code>, <code>&lt;td&gt;</code>, <code>&lt;span&gt;</code> or <code>&lt;input&gt;</code>. Using it for anything other than container elements will keep you busy adjusting your website for future browser updates.</p>


entityMap|blocks|key|1619p|text|我在边界崩溃后使用了!important，就像这样|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|dpch8|在IE7中它也适用于我。它似乎覆盖了cellspacing属性。^0|A|A|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@$A|J|B|K|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|L|9|@]|E|@]|F|$]]]]

<p>I used <code>!important</code> after the border-collapse like</p>

<pre class="lang-css prettyprint-override"><code>border-collapse: collapse !important;
</code></pre>

<p>and it works for me in IE7. It seems to override the cellspacing attribute.</p>


entityMap|blocks|key|99lrd|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8t8j9|或者试试这个：^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

<p>Try this:</p>

<pre class="lang-css prettyprint-override"><code>table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}
</code></pre>

<p>Or try this:</p>

<pre class="lang-css prettyprint-override"><code>table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}
</code></pre>


entityMap|blocks|key|4od7d|text|只需对表使用border-collapse:+collapse，对th或td使用padding即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data^0|6|P|X|2|10|2|14|7^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@$A|H|B|I|C|D]|$A|J|B|K|C|D]|$A|L|B|M|C|D]|$A|N|B|O|C|D]]|E|@]|F|$]]]]

<p>Just use <code>border-collapse: collapse</code> for your table, and <code>padding</code> for <code>th</code> or <code>td</code>.</p>


entityMap|blocks|key|32vfo|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|-4|5|6|7|B|8|@]|9|@]|A|$]]]]

<pre><code>table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}
</code></pre>


entityMap|blocks|key|5uffn|text|CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

<p>CSS:</p>

<pre><code>selector{
    padding:0 0 10px 0; // Top left bottom right 
}
</code></pre>


entityMap|blocks|key|8plba|text|只需对表格数据使用CSS填充规则：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9n5p|对于边框间距：|98dfp|然而，由于盒子模型的不同实现，它可能会在旧版本的浏览器中产生问题，比如Internet和Explorer。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

<p><strong>Simply use CSS padding rules with table data:</strong> </p>

<pre><code>td { 
    padding: 20px;
}
</code></pre>

<p>And for border spacing:</p>

<pre><code>table { 
    border-spacing: 1px;
    border-collapse: collapse;
}
</code></pre>

<p><strong><em>However, it can create problems in older version of browsers like Internet&nbsp;Explorer because of the diff implementation of the box model.</em></strong> </p>


entityMap|blocks|key|c8bnv|text|此样式用于完全重置表格-单元格填充、单元格间距和边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|bs227|我的reset.css文件中有这样的样式：^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

<p>This style is for <strong>full reset for tables</strong> - <strong>cellpadding</strong>, <strong>cellspacing</strong> and <strong>borders</strong>.</p>

<p>I had this style in my reset.css file:</p>

<pre><code>table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}
</code></pre>


entityMap|blocks|key|cslo7|text|如果margin不起作用，请尝试将tr的display设置为block，然后边距将起作用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data^0|2|6|H|2|K|7|U|5^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@$A|H|B|I|C|D]|$A|J|B|K|C|D]|$A|L|B|M|C|D]|$A|N|B|O|C|D]]|E|@]|F|$]]]]

<pre><code>td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}
</code></pre>

<p>If <code>margin</code> didn't work, try to set <code>display</code> of <code>tr</code> to <code>block</code> and then margin will work.</p>


entityMap|blocks|key|ifeu|text|如何将样式直接添加到表本身？这不是在你的CSS中使用table，如果你的页面上有多个表，这是一个糟糕的方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data^0|Q|5^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@$A|H|B|I|C|D]]|E|@]|F|$]]]]

<p>How about adding the style directly to the table itself?  This is instead of using <code>table</code> in your CSS, which is a <strong>BAD</strong> approach if you have multiple tables on your page:</p>

<pre><code>&lt;table style="border-collapse: separate;border-spacing: 2px;"&gt;
    &lt;tr&gt;
        &lt;td style="padding: 4px 4px;"&gt;Some Text&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>


entityMap|blocks|key|3qb2m|text|对于表格，单元格间距和单元格填充在HTML5中已经过时。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|i03b|现在，对于单元格间距，你必须使用边框间距。而对于have填充，您必须使用边框折叠。|5g7um|并确保您不会在HTML5代码中使用它。始终尝试在CSS-3文件中使用这些值。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

<p>For tables, cellspacing and cellpadding are obsolete in HTML 5.</p>

<p>Now for cellspacing you have to use border-spacing. And for cellpadding you have to use border-collapse.</p>

<p>And make sure you don't use this in your HTML5 code. Always try to use these values in a CSS&nbsp;3 file.</p>


entityMap|blocks|key|cavb2|text|cell-padding可以由CSS中的padding提供，而cell-spacing可以通过设置表的border-spacing来设置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|erv0s|小提琴。^0|0|C|K|7|V|C|1F|E|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@$A|J|B|K|C|D]|$A|L|B|M|C|D]|$A|N|B|O|C|D]|$A|P|B|Q|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|R|9|@]|E|@]|F|$]]]]

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;th&gt;Col 1&lt;/th&gt;
        &lt;th&gt;Col 2&lt;/th&gt;
        &lt;th&gt;Col 3&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;3&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p><code>cell-padding</code> can be given by <code>padding</code> in CSS while <code>cell-spacing</code> can be set by setting <code>border-spacing</code> for table.</p>

<pre><code>table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}
</code></pre>

<p><a href="https://jsfiddle.net/8d93cd60/" rel="noreferrer">Fiddle</a>.</p>


entityMap|blocks|key|1i011|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|-4|5|6|7|B|8|@]|9|@]|A|$]]]]

<pre><code>table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}
</code></pre>


entityMap|blocks|key|68bof|text|在HTML表中，cellpadding和cellspacing可以这样设置：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|6vqju|用于单元格填充|3sck9|只需调用简单的td/th单元格padding即可。|cvn4k|示例：|ecj9b|​|cp9cm|e01kr|单元格间距|eb61b|只需调用simple+table+border-spacing|3vluh|7h2nb|cri1h|3fphv|更多表格样式通过CSS源码链接在这里你可以通过CSS获得更多的表格样式。^0|8|B|K|B|0|0|7|5|F|7|0|0|0|0|0|B|5|H|E|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Y|9|@$A|Z|B|10|C|D]|$A|11|B|12|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|13|9|@]|E|@]|F|$]]|$2|I|4|J|6|7|8|14|9|@$A|15|B|16|C|D]|$A|17|B|18|C|D]]|E|@]|F|$]]|$2|K|4|L|6|7|8|19|9|@]|E|@]|F|$]]|$2|M|4|N|6|7|8|1A|9|@]|E|@]|F|$]]|$2|O|4|N|6|7|8|1B|9|@]|E|@]|F|$]]|$2|P|4|Q|6|7|8|1C|9|@]|E|@]|F|$]]|$2|R|4|S|6|7|8|1D|9|@$A|1E|B|1F|C|D]|$A|1G|B|1H|C|D]]|E|@]|F|$]]|$2|T|4|L|6|7|8|1I|9|@]|E|@]|F|$]]|$2|U|4|N|6|7|8|1J|9|@]|E|@]|F|$]]|$2|V|4|N|6|7|8|1K|9|@]|E|@]|F|$]]|$2|W|4|X|6|7|8|1L|9|@]|E|@]|F|$]]]]

<p>In an HTML table, the <code>cellpadding</code> and <code>cellspacing</code> can be set like this:</p>

<p>For <strong>cell-padding</strong>:</p>

<p>Just call simple <code>td/th</code> cell <code>padding</code>.</p>

<p><strong>Example:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
        &lt;tr&gt;
            &lt;th&gt;Head1 &lt;/th&gt;
            &lt;th&gt;Head2 &lt;/th&gt;
            &lt;th&gt;Head3 &lt;/th&gt;
            &lt;th&gt;Head4 &lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;11&lt;/td&gt;
            &lt;td&gt;12&lt;/td&gt;
            &lt;td&gt;13&lt;/td&gt;
            &lt;td&gt;14&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;21&lt;/td&gt;
            &lt;td&gt;22&lt;/td&gt;
            &lt;td&gt;23&lt;/td&gt;
            &lt;td&gt;24&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;31&lt;/td&gt;
            &lt;td&gt;32&lt;/td&gt;
            &lt;td&gt;33&lt;/td&gt;
            &lt;td&gt;34&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;41&lt;/td&gt;
            &lt;td&gt;42&lt;/td&gt;
            &lt;td&gt;43&lt;/td&gt;
            &lt;td&gt;44&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;</code></pre>
</div>
</div>
</p>

<pre><code>table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}
</code></pre>

<p>For <strong>cell-spacing</strong></p>

<p>Just call simple <code>table</code> <code>border-spacing</code></p>

<p><strong>Example:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
        &lt;tr&gt;
            &lt;th&gt;Head1&lt;/th&gt;
            &lt;th&gt;Head2&lt;/th&gt;
            &lt;th&gt;Head3&lt;/th&gt;
            &lt;th&gt;Head4&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;11&lt;/td&gt;
            &lt;td&gt;12&lt;/td&gt;
            &lt;td&gt;13&lt;/td&gt;
            &lt;td&gt;14&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;21&lt;/td&gt;
            &lt;td&gt;22&lt;/td&gt;
            &lt;td&gt;23&lt;/td&gt;
            &lt;td&gt;24&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;31&lt;/td&gt;
            &lt;td&gt;32&lt;/td&gt;
            &lt;td&gt;33&lt;/td&gt;
            &lt;td&gt;34&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;41&lt;/td&gt;
            &lt;td&gt;42&lt;/td&gt;
            &lt;td&gt;43&lt;/td&gt;
            &lt;td&gt;44&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;</code></pre>
</div>
</div>
</p>

<pre><code>/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}
</code></pre>

<p>More table style by CSS source link <a href="http://quirksmode.org/css/css2/tables.html" rel="nofollow noreferrer">here you get more table style by CSS</a>.</p>


entityMap|blocks|key|1od80|text|您可以使用border-spacing和padding在您的CSS中简单地执行以下操作|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|37afj|​|40o5t^0|5|E|K|7|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@$A|K|B|L|C|D]|$A|M|B|N|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|O|9|@]|E|@]|F|$]]|$2|I|4|H|6|7|8|P|9|@]|E|@]|F|$]]]]

<p>You can simply do something like this in your CSS, using <code>border-spacing</code> and <code>padding</code>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;head_1&lt;/th&gt;
    &lt;th&gt;head_2&lt;/th&gt;
    &lt;th&gt;head_3&lt;/th&gt;
    &lt;th&gt;head_4&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;txt_1&lt;/td&gt;
    &lt;td&gt;txt_2&lt;/td&gt;
    &lt;td&gt;txt_3&lt;/td&gt;
    &lt;td&gt;txt_4&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|fkpqo|text|您可以使用CSS填充属性轻松地在表单元格中设置填充。这是一种有效的方法，可以产生与表格的单元格填充属性相同的效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|65lb8|​|82it9|5ph5|同样，您可以使用CSS边框间距属性来应用相邻表单元格边框之间的间距，就像cellspacing属性一样。但是，为了实现边框间距，边框折叠属性的值必须是独立的，这是默认设置。|cl52d|89jud^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|D|6|7|8|L|9|@]|A|@]|B|$]]|$2|F|4|G|6|7|8|M|9|@]|A|@]|B|$]]|$2|H|4|D|6|7|8|N|9|@]|A|@]|B|$]]|$2|I|4|D|6|7|8|O|9|@]|A|@]|B|$]]]]

<p>You can easily set padding inside the table cells using the CSS padding property. It is a valid way to produce the same effect as the table's cellpadding attribute.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Set Cellpadding in CSS&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Row&lt;/th&gt;
        &lt;th&gt;First Name&lt;/th&gt;
        &lt;th&gt;Last Name&lt;/th&gt;
        &lt;th&gt;Email&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;Clark&lt;/td&gt;
        &lt;td&gt;Kent&lt;/td&gt;
        &lt;td&gt;clarkkent@mail.com&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;Peter&lt;/td&gt;
        &lt;td&gt;Parker&lt;/td&gt;
        &lt;td&gt;peterparker@mail.com&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Rambo&lt;/td&gt;
        &lt;td&gt;johnrambo@mail.com&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Similarly, you can use the CSS border-spacing property to apply the spacing between adjacent table cell borders like the cellspacing attribute. However, in order to work border-spacing the value of border-collapse property muse be separate, which is default.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Set Cellspacing in CSS&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Row&lt;/th&gt;
        &lt;th&gt;First Name&lt;/th&gt;
        &lt;th&gt;Last Name&lt;/th&gt;
        &lt;th&gt;Email&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;Clark&lt;/td&gt;
        &lt;td&gt;Kent&lt;/td&gt;
        &lt;td&gt;clarkkent@mail.com&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;Peter&lt;/td&gt;
        &lt;td&gt;Parker&lt;/td&gt;
        &lt;td&gt;peterparker@mail.com&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Rambo&lt;/td&gt;
        &lt;td&gt;johnrambo@mail.com&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|du1jd|text|我建议这和特定表的所有单元格都会受到影响。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

<p>I suggest this and all the cells for the particular table are effected.</p>
<pre class="lang-css prettyprint-override"><code>table.tbl_classname td, th {
    padding: 5px 5px 5px 4px;
 }
</code></pre>


entityMap|blocks|key|c7igf|text|您可以检查以下代码，只需创建一个index.html并运行它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3f5bp|​|1in7|54ukg|输出：|fvaej|agig4^0|G|A|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@$A|O|B|P|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|Q|9|@]|E|@]|F|$]]|$2|I|4|H|6|7|8|R|9|@]|E|@]|F|$]]|$2|J|4|K|6|7|8|S|9|@]|E|@]|F|$]]|$2|L|4|H|6|7|8|T|9|@]|E|@]|F|$]]|$2|M|4|H|6|7|8|U|9|@]|E|@]|F|$]]]]

<p><strong>You can check the below code just create a <code>index.html</code> and run it.</strong></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;style&gt;
    table {
      border-spacing: 10px;
    }
    
    td {
      padding: 10px;
    }
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;table cellspacing="0" cellpadding="0"&gt;
    &lt;th&gt;Col 1&lt;/th&gt;
    &lt;th&gt;Col 2&lt;/th&gt;
    &lt;th&gt;Col 3&lt;/th&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;3&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>
<p><strong>OUTPUT :</strong></p>
<p><a href="https://i.stack.imgur.com/nzzTu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nzzTu.png" alt="enter image description here" /></a></p>


entityMap|blocks|key|7d3mh|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

<p>This worked for me:</p>
<pre><code>table {border-collapse: collapse}
table th, table td {padding: 0}
</code></pre>


entityMap|blocks|key|1kqe9|text|假设我们想要以一种符合HTML5的方式为我们的表分配一个10px的"cellpadding“和一个15px的"cellspacing”。我将在这里展示两种方法，它们的输出非常相似。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|60rgd|两组不同的CSS属性应用于表的相同HTML标记，但具有相反的概念：|flc1i|第一个使用border-collapse的默认值(separate)并使用border-spacing提供单元格间距，|offset|length|style|CODE|eb347|第二个将border-collapse切换为collapse，并使用border属性作为单元格间距。|69v2a|在这两种情况下，单元格填充都是通过将padding:10px分配给td来实现的，并且在这两种情况下，分配给它们的background-color只是为了更清晰的演示。|cpme5|第一种方法：|6ql4s|​|96aea|9fld5|第二种方法：|d8t3f|77cl3^0|0|0|5|F|P|8|11|E|0|4|F|M|8|Y|6|0|I|C|X|2|1K|G|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|X|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|Y|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|Z|9|@$G|10|H|11|I|J]|$G|12|H|13|I|J]|$G|14|H|15|I|J]]|A|@]|B|$]]|$2|K|4|L|6|7|8|16|9|@$G|17|H|18|I|J]|$G|19|H|1A|I|J]|$G|1B|H|1C|I|J]]|A|@]|B|$]]|$2|M|4|N|6|7|8|1D|9|@$G|1E|H|1F|I|J]|$G|1G|H|1H|I|J]|$G|1I|H|1J|I|J]]|A|@]|B|$]]|$2|O|4|P|6|7|8|1K|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1L|9|@]|A|@]|B|$]]|$2|S|4|R|6|7|8|1M|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|1N|9|@]|A|@]|B|$]]|$2|V|4|R|6|7|8|1O|9|@]|A|@]|B|$]]|$2|W|4|R|6|7|8|1P|9|@]|A|@]|B|$]]]]

<p>Say that we want to assign a 10px &quot;cellpadding&quot; and a 15px &quot;cellspacing&quot; to our table, in a HTML5-compliant way. I will show here two methods giving really similar outputs.</p>
<p>Two different sets of CSS properties apply to the same HTML markup for the table, but with opposite concepts:</p>
<ul>
<li><p>the first one uses the default value for <code>border-collapse</code> (<code>separate</code>) and uses <code>border-spacing</code> to provide the cellspacing,</p>
</li>
<li><p>the second one switches <code>border-collapse</code> to <code>collapse</code> and uses the <code>border</code> property as the cellspacing.</p>
</li>
</ul>
<p>In both cases, the cellpadding is achieved by assigning <code>padding:10px</code> to the <code>td</code>s and, in both cases, the <code>background-color</code> assigned to them is only for the sake of a clearer demo.</p>
<p><strong>First method:</strong></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;Header 1&lt;/td&gt;&lt;td&gt;Header 2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>
<p><strong>Second method:</strong></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;Header 1&lt;/td&gt;&lt;td&gt;Header 2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>In an HTML table, the <code>cellpadding</code> and <code>cellspacing</code> can be set like this:</p>

<pre class="lang-html prettyprint-override"><code>&lt;table cellspacing="1" cellpadding="1"&gt;
</code></pre>

<p>How can the same be accomplished using CSS?</p>


Set cellpadding and cellspacing in CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

 在HTML表中，cellpadding和cellspacing可以这样设置：

问在CSS中设置单元格边距和单元格间距？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中设置单元格边距和单元格间距？EN