Advanced css/html table styling

Question

I'm trying to achieve table similar to this using css/html only. Is it possible ?

http://img687.imageshack.us/img687/6139/11717002.png

So the white area is the 'places' table. This is the HTML for the table :

<table class="places">
    <tr>
        <td class="solid">K</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="solid">P</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="solid">25</td>
        <td class="solid">26</td>
        <td>&nbsp;</td>
        <td class="solid">47</td>
        <td class="solid">48</td>
    </tr>

    (...)

</table>

And my css :

.places{
    position:relative;
    background:white;
    width:160px;
    margin:0 auto;
    text-align:left;
    padding:5px;
    border-collapse: collapse;
}
    .places tr {
    }
        .places td {
            width:22px;
            height:22px;
            text-align:center;
        }
            .solid {
                border: 1px solid #d2cdd1;
                border-top:none;
                background-color:#e7e7e7;
                text-align:center;
                cursor:pointer;
            }

I was pretty sure, that although tables are a bit different than other html objects, padding should work here. But it looks that I was wrong. Cellspacing/cellpading have no effect. Currently I was able to get something looking like this :

http://img704.imageshack.us/img704/8897/12406038.png

Answer 1

The reason you can't set any spacing between the cells is that you have border-collapse set to collapse in the styles for your table. If you use border-collapse:separate instead, you should be able to add margins to your table cells and put spacing between them.

Using border-collapse:collapse makes it so that adjacent table cells use the same border; naturally, you wouldn't be able to put space between two elements when they're attached to each other.

Answer 2

You need the border-spacing property.

Table cells are not like other elements, because while div and p gets are block level elements, and span and input are inline, table cells and rows get their own table-cell and table-row display values.

Using border-spacing with border-collapse: separate will give you what you'd need. Have a look: http://jsfiddle.net/kjag3/1/

PS. I've also taken the liberty of cleaning up the HTML by separating them into two tables, so you won't need the fillers for the empty cells.

Answer 3

I wonder whether a table structure is appropriate for what you're trying to achieve?

To me, it looks like the 'K' and 'P' are headings, and the gap between the 'K' and 'P' numbers suggests that 'K' and 'P' are separate and shouldn't be part of the same table. So I suggest getting rid of the table and restructuring your HTML to use simple headings and div tags like this:

HTML:

<div class="places">
    <h2>K</h2>
    <div>25</div>
    <div>26</div>
    <div>23</div>
    <div>24</div>
    <div>21</div>
    <div>22</div>
</div>

<div class="places">
    <h2>P</h2>
    <div>47</div>
    <div>48</div>
    <div>45</div>
    <div>46</div>
    <div>43</div>
    <div>44</div>
</div>

CSS:

.places {
    width: 55px;
    float: left;
    margin: 0 25px 0 0;

}

.places h2, .places div {
    width: 22px;
    height: 22px;
    margin: 0 3px 3px 0;
    border: 1px solid #d2cdd1;
    border-top:none;
    background-color:#e7e7e7;
    text-align:center;
    cursor:pointer;
    font-weight: normal;
    font-size: 12pt;
}

.places div {
    float: left;
}