CSS: how do I create a gap between rows in a table?
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.
All you need:
table {
border-collapse: separate;
border-spacing: 0 1em;
}
That assumes you want a 1em
vertical gap, and no horizontal gap. If you're doing this, you should probably also look at controlling your line-height.
Sort of weird that some of the answers people gave involve border-collapse: collapse
, whose effect is the exact opposite of what the question asked for.