how can I do this space between tables?

Question

I'm learning html & css and I downloaded a PSD File to convert to code but I'm having a little problem:
I have my table but I need to know, how can i do one space here?

Sample image

In this link i have the HTML and CSS code: http://jsbin.com/rupih/1/edit

Your code should be contained within your question. Also, this is not what tables are for, tables should be used to display only **tabular data**. For anything else, use the appropriate display properties. — Etheryte, Mar 12 '14 at 23:30
Sorry Nit, im new here, and i dont know how put my code in the question. Tx. — Ethan Rivas, Mar 12 '14 at 23:38
How to include code: http://meta.stackexchange.com/questions/51144/how-do-i-post-code-in-stackoverflow — Jon P, Mar 13 '14 at 01:08
As mentioned don't use a table. Think about what it is you are presenting. You are presenting a list of products, that should give you a clue as to what tag you should consider using. Now look at the options of styling the items in that list using `display:inline-block` or `float:left`. http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ — Jon P, Mar 13 '14 at 01:12
As you are learning HTML and CSS get to know some of the tools of the trade: Firebug for Firefox (download) and Developer Tools for Chrome (inbuild). These give you the ability to inspect html elements, see the styles applied to them and then exeriment with the styles in-place before finalising them (manualy) in your style sheets — Jon P, Mar 13 '14 at 01:17
Next tip: ID should be unique, if you are using an ID more than once, use a class instead. This becomes more inportant when using javascript. — Jon P, Mar 13 '14 at 01:25
@Nit: I used to be in the only for tabular data zone, but my views have softened recently. I think using tables where other methods would be hard to maintain or confusing is, on occasion, ok. Exhibit A: The source code for this question uses tables. — teynon, Mar 13 '14 at 03:09
@Tom: With the introduction of display properties that allow you to create layouts identical in behavior there is exactly zero reason to use tables where they shouldn't be used. Semantics isn't just a fancy word. — Etheryte, Mar 13 '14 at 07:28

score 0 · Accepted Answer · edited May 23 '17 at 12:21

To change the width of that space in a table using CSS you would use

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

For more info see: Set cellpadding and cellspacing in CSS?

However as you haven't realy got tabular data and more of a list, I would use a list:

HTML

<ul class="products">
    <li>
        <h2>Abercrombie &amp; Fitch</h2>
        <img src="http://dotacionesindustriales.net/images/4002%20Camisa%20Manga%20Corta%20Hombre-Oxford.jpg" />
        <div>
            <span class="price"><b>Price:</b> US $65</span>
            <span class="COD"><b>COD:</b> AE001 </span>
        </div>
    </li>
    <li>
        <h2>Hollister</h2>
        <img src="http://dotacionesindustriales.net/images/4002%20Camisa%20Manga%20Corta%20Hombre-Oxford.jpg" />
        <div>
            <span class="price"><b>Price:</b> US $65</span>
            <span class="COD"><b>COD:</b> AE001 </span>
        </div>
    </li>
    <!-- etc -->
</ul>

CSS

ul.products
{
    list-style:none;
    margin:0;
    padding:0;
}


.products li
{
    float:left;
    margin-right:1em; 
    margin-bottom:1.2em;
}

.products li img
{
    padding:6px;
    background-color: #e9f1f8;
    border: 1px solid #d3e6f6;
}

.products li h2
{
    color: #325A8C;
    font-size:16px;
    text-align:center;
    font-family:serif;
}

.products li div
{
    font-weight:bold;
}
.products li div .price
{
    color: #349031;
}

.products li div .COD
{
    color: #44403F;
    float:right;
    padding-right: 1.5em;
}

.products li div .price b, .products li div .COD b
{
    color:#000;
}

The most important part in regards to your original question is:

.products li
{
    float:left;
    margin-right:1em; /*Adjust this value to change the horizontal Spacing*/
    margin-bottom:1.2em;
}

Apart from being more semantic html, you get the added advantage of a fluid layout. If three products don't fit across the page it will adjust the layout accordingly. Similarly it will accomodate more if they will fit.

See it in action here: http://jsfiddle.net/b9evg/

WoW, Tx for this! This is the answer I'm was waiting :D Thanks! — Ethan Rivas, Mar 13 '14 at 03:39
Just make sure you go the list option... you will thank me later. It is much easier to re-style the list than to mess around trying to re-layout the table. — Jon P, Mar 13 '14 at 03:46

how can I do this space between tables?

1 Answers1