Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add margin to the table td

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

like image 760
sami Avatar asked Dec 20 '12 19:12

sami


People also ask

How do I add a margin in Tbody?

Another way of applying some margin on a <tbody> element is to use a ::before or ::after pseudo element. This way we basically add a new (empty) row which we can use to add some space at the beginning of our <tbody> elements.


1 Answers

Here's one way to get some spacing between your table cells. View it on JSFiddle

HTML

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

CSS

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

and if you're not using HTML5:

HTML4

<table cellspacing="5">
like image 62
jamesplease Avatar answered Oct 01 '22 20:10

jamesplease