如何在表td中添加边距

时间:2012-12-20 19:12:57

标签: html css html-table

CSS:

.chash, .java, .php, .jscript, .jQuery, .cplus, .python, .asp, .dotnet, .html,
.objectivec, .iOS, .sql, .css, .rubyr, .c, .xml, .AJAX, .xcode, .linux, .windows,
.vbdotnet, .json, .Apache, .wordpress, .oracle, .Perl, .ActionScript, .flash,
.dothtaccess, .VisualStudio, .GoogleAppEngine, .jsp,. PostgreSQL, .ZendFramework,
.email, .GoogleMaps {  
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
    margin: 10px;
    padding: 5px;
    width: 250px;
    height: 180px;
 }

td {
   padding-right: 20px;
   margin: 10px;
}

HTML:

<div class="Languages">
  <table>
    <tr>
      <td class="chash"></td>
      <td class="java"></td>
      <td class="php"></td >
      <td class="jscript"></td>
    </tr>
    <tr>
      <td class="jQuery"></td>
      <td class="Perl"></td>
      <td class="dothtaccess"></td>
      <td class="flash"></td>
    </tr>
    <tr>  
      <td class="cplus"></td>
      <td class="python"></td >
      <td class="asp"></td>
      <td class="dotnet"></td>
    </tr>
    <tr>
      <td class="html"></td>
      <td class="email"></td >
      <td class="GoogleMaps"></td>
      <td class="ActionScript"></td>
    </tr>
    <tr>
      <td class="objectivec"></td>
      <td class="iOS"></td>
      <td class="sql"></td>
      <td class="ZendFramework"></td>
    </tr>
    <tr>
      <td class="PostgreSQL"></td>
      <td class="oracle"></td >
      <td class="jsp"></td>
      <td class="css"></td>
    </tr>
    <tr>
      <td class="rubyr"></td >
      <td class="c"></td>
      <td class="xml"></td>
      <td class="AJAX"></td>
    </tr>
    <tr>
      <td class="xcode"></td>
      <td class="wordpress"></td>
      <td class="linux"></td>
      <td class="windows"></td>
    </tr>
    <tr>
      <td class="vbdotnet"></td>
      <td class="json"></td >
      <td class="Apache"></td>
      <td class="GoogleAppEngine"></td>
      <td class="VisualStudio"></td>
    </tr>
  </table>
</div>

LIVE DEMO

1 个答案:

答案 0 :(得分:15)

这是在表格单元格之间获得一些间距的一种方法。 View it on JSFiddle

HTML

​<table>
  <tr>
    <td>
      hi
    </td>
    <td>
      hello
    </td>
  </tr>
</table>

CSS

table {
  border-collapse:separate;
  border-spacing:10px 10px;
}​​​​​​​​​​​​​

如果你没有使用HTML5:

HTML4

<table cellspacing="5">