Meaning making the resultant table look less like this:
[===ROW===] [===ROW===] [===ROW===] [===ROW===]
... and more like this:
[===ROW===] [===ROW===] [===ROW===] [===ROW===]
I tried adding
margin-bottom:1em;
to both td and tr but got nothing. Any ideas?
If you stick with the design using tables the best idea will be to give an empty row with no content and specified height between each rows in the table.
You can use div to avoid this complexity. Just give a margin to each div.
table {
border-collapse: collapse;
}
td {
padding-top: .5em;
padding-bottom: .5em;
}
The cells won't react to anything unless you set the border-collapse first. You can also add borders to TR elements once that's set (among other things.)
If this is for layout, I'd move to using DIVs and more up-to-date layout techniques, but if this is tabular data, knock yourself out. I still make heavy use of tables in my web applications for data.
If you don't have borders, or have borders and want the spacing inside the cells, you can use padding, or line-height. As far as I know, margin has no effect on cells and rows.
A CSS property for spacing of cells is border-spacing, but it doesn't work on IE6/7 (so you can use it depending on your crowd).
If all else fails you can use the old cellspacing attribute in your markup - but this will also give you spacing between the columns. Some CSS reset suggest you should set it anyway to get cross-browser support:
/* tables still need
cellspacing="0"in the markup */
You could also just modify the height for each row using CSS.
<head>
<style>
tr {
height:40px;
}
</style>
</head>
<body>
<table>
<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>
</table>
</body>
You could also modify the height of the <td> element, it should give you the same result.