CSS: como faço para criar uma lacuna entre as linhas em uma tabela?

Significa fazer a tabela resultante parecer menos com isto:

[=== LINHA ===]
[=== LINHA ===]
[=== LINHA ===]
[=== LINHA ===]

... e mais como este:

[=== LINHA ===]

[=== LINHA ===]

[=== LINHA ===]

[=== LINHA ===]

Eu tentei adicionar

margin-bottom:1em;

para td e tr, mas não obteve nada. Alguma ideia?

Tudo que você precisa:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

Isso pressupõe que você deseja uma lacuna vertical de 1em e nenhuma lacuna horizontal. Se você estiver fazendo isso, provavelmente também deve controlar a altura da linha.

É meio estranho que algumas das respostas que as pessoas deram envolvam o colapso da fronteira: colapso, cujo efeito é exatamente o oposto do que a pergunta pedia.

table {
    border-collapse: collapse;
}

td {
    padding-top: .5em;
    padding-bottom: .5em;
}

As células não reagirão a nada a menos que você defina primeiro o colapso da borda. Você também pode adicionar bordas aos elementos TR depois de configurados (entre outras coisas).

Se for para layout, eu mudaria para o uso de DIVs e técnicas de layout mais atualizadas, mas se isso for dados tabulares, deixe-se levar. Ainda faço uso intenso de tabelas em meus aplicativos da web para dados.

Se nenhuma das outras respostas for satisfatória, você pode apenas criar uma linha vazia e estilizá-la com CSS de forma adequada para ser transparente.

Se você não tem bordas, ou tem bordas e deseja o espaçamento dentro das células, pode usar paddingou line-height. Pelo que eu sei, a margem não tem efeito nas células e linhas.
Uma propriedade CSS para espaçamento de células é border-spacing, mas não funciona no IE6 / 7 (portanto, você pode usá-la dependendo do seu grupo).

Se tudo mais falhar, você pode usar o cellspacingatributo antigo em sua marcação - mas isso também fornecerá espaçamento entre as colunas. Algumas redefinições de CSS sugerem que você deve defini-lo de qualquer maneira para obter suporte para vários navegadores:

/ * tabelas ainda precisam cellspacing="0"na marcação * /

Este é o caminho (estava pensando que é impossível):

Primeiro, dê à tabela apenas o espaçamento das bordas verticais (por exemplo 5px) e defina o espaçamento das bordas horizontais para 0. Então você deve dar as bordas adequadas para cada célula da linha. Por exemplo, a célula mais à direita em cada linha deve ter uma borda superior, inferior e direita. As células mais à esquerda devem ter uma borda superior, inferior e esquerda. E as outras células entre essas 2 devem ter apenas borda superior e inferior. Como este exemplo:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

Em minha opinião, a maneira mais fácil de fazer é adicionar preenchimento à sua tag.

td {
 padding: 10px 0
}

Espero que isso ajude você! Torça!

Simplesmente você pode usar padding-tope padding-bottomem um tdelemento.

A unidade pode qualquer coisa desta lista:

Código de demonstração:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

o preenchimento no TD funciona se você quiser que o espaço tenha a mesma cor de fundo do td

no meu caso, o requisito era um espaço em branco entre a linha do cabeçalho e o que quer que estivesse acima dela

aplicando esse estilo a uma única célula, consegui a separação desejada. Não foi necessário adicioná-lo a todas as células ... Possivelmente não o MAIS elegante, mas possivelmente mais elegante do que as linhas separadoras.

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

Se você seguir o design usando tabelas, a melhor ideia será fornecer uma linha vazia sem conteúdo e a altura especificada entre cada linha da tabela.

Você pode usar div para evitar essa complexidade. Basta dar uma margem para cada div.

Você também pode simplesmente modificar a altura de cada linha usando 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>

Você também pode modificar a altura do <td>elemento, deve dar o mesmo resultado.

Crie um outro <tr>logo abaixo e adicione algum espaço ou altura ao conteúdo de<td>

Verifique o violino, por exemplo

https://jsfiddle.net/jd_dev777/wx63norf/9/

Adicione a seguinte regra a tr e deve funcionar

float: left

Amostra (abra-o no IE9 offcourse :)): http://jsfiddle.net/zshmN/

EDIT: Esta não é uma solução legal ou correta como apontado por muitos, mas se você ficar sem opção e precisar de algo, isso funcionará no IE9.

Então, todos aqueles que estão dando votos, por favor, nos digam a solução correta também