How to make tables look like Excel worksheet?

[PowerUp]

In my HTML

<table>
<tr><td><div style="text-align:left">Month</div></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td><div style="text-align:left">Car</div></td><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td><td>100</td></tr>
<tr><td><div style="text-align:left">Credit Card</div></td><td>300</td><td>300</td><td>300</td><td>300</td><td>300</td><td>300</td><td>300</td><td>300</td><td>300</td><td></td><td></td><td></td></tr>
<tr><td><div style="text-align:left">Total</div></td><td>400</td><td>400</td><td>400</td><td>400</td><td>400</td><td>400</td><td>400</td><td>400</td><td>400</td><td>100</td><td>100</td><td>100</td></tr>
</table>

In my CSS

table {
border: #000000 solid 2px;
font-size: 0.8em;
text-align: center;
}

td {
border: 1px solid #000000;
margin: 0;
padding: 3px;
}

How can I make the cells join together like in Excel worksheet so that there's no space in between the cells?

[Fotiman]

For today's browser, there isn't a reliable replacement for cellspacing, so you'll need to include that as a table attribute.

<table cellspacing="0">

Hope that helps.

[katana_one]

Try adding this to your CSS:

table {
border-collapse:collapse;
}

That should do the trick.

[Setek]

For today's browser, there isn't a reliable replacement for cellspacing, so you'll need to include that as a table attribute.

There is. It's below. Asiding the fact that the border, cellspacing and cellpadding attributes on tables are deprecated, there's also just a far better way to do it.

Try adding this to your CSS:

table {
border-collapse:collapse;
}

If you set all your

th

's and

td

's to have a border with 1px (or however thick) width on all sides, and then set the borders on the table to collapse, browsers will only draw the borders as that maximum width, irrespective of whether it's sitting next to another

td

.

It has the effect of "collapsing margins", just with borders.

[PowerUp]

Thank you all. I added table {border collapse: collapse;} and it works.

[Fotiman]

My bad. I thought this wasn't supported yet by IE. :-)

I'm sure it's probably NOT supported by IE < 6, though, if that matters to you. I could be wrong, but I don't think so.

[Ingolemo]

Perhaps you were thinking of

border-spacing

?