CSS: ¿cómo creo un espacio entre las filas de una tabla?

Lo que significa que la tabla resultante se parece menos a esto:

[=== FILA ===]
[=== FILA ===]
[=== FILA ===]
[=== FILA ===]

... y más como esto:

[=== FILA ===]

[=== FILA ===]

[=== FILA ===]

[=== FILA ===]

Intenté agregar

margin-bottom:1em;

a td y tr pero no obtuve nada. ¿Algunas ideas?

Todo lo que necesita:

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

Eso supone que desea un espacio vertical de 1 em y no un espacio horizontal. Si está haciendo esto, probablemente también debería considerar controlar la altura de su línea.

Es algo extraño que algunas de las respuestas que dio la gente tengan que ver con el colapso de la frontera: colapso, cuyo efecto es exactamente lo contrario de lo que pedía la pregunta.

table {
    border-collapse: collapse;
}

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

Las celdas no reaccionarán a nada a menos que establezca primero el colapso del borde. También puede agregar bordes a los elementos TR una vez que esté configurado (entre otras cosas).

Si esto es para el diseño, pasaría a usar DIV y técnicas de diseño más actualizadas, pero si se trata de datos tabulares, elimínese. Todavía hago un uso intensivo de tablas en mis aplicaciones web para datos.

Si ninguna de las otras respuestas es satisfactoria, siempre puede crear una fila vacía y diseñarla con CSS de forma adecuada para que sea transparente.

Si no tiene bordes, o tiene bordes y desea el espacio dentro de las celdas, puede usar paddingo line-height. Hasta donde yo sé, el margen no tiene ningún efecto en las celdas y filas.
Una propiedad de CSS para el espaciado de celdas es border-spacing, pero no funciona en IE6 / 7 (por lo que puede usarla dependiendo de su grupo).

Si todo lo demás falla, puede usar el cellspacingatributo antiguo en su marcado, pero esto también le dará espacio entre las columnas. Algunos restablecimientos de CSS sugieren que debe configurarlo de todos modos para obtener compatibilidad con varios navegadores:

/ * las tablas aún necesitan cellspacing="0"en el marcado * /

Esta es la forma (pensaba que era imposible):

Primero, asigne a la tabla solo un espaciado de borde vertical (por ejemplo, 5px) y establezca el espaciado de borde horizontal en 0. Luego, debe asignar los bordes adecuados a cada celda de la fila. Por ejemplo, la celda más a la derecha de cada fila debe tener un borde en la parte superior, inferior y derecha. Las celdas más a la izquierda deben tener un borde en la parte superior, inferior e izquierda. Y las otras celdas entre estos 2 solo deben tener un borde en la parte superior e inferior. Como este ejemplo:

<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>

En mi opinión, la forma más sencilla de hacerlo es agregar relleno a su etiqueta.

td {
 padding: 10px 0
}

¡Espero que esto te ayudará! ¡Animar!

Simplemente puede usar padding-topy padding-bottomen un tdelemento.

La unidad puede cualquier cosa de esta lista:

Código de demostración:

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>

el relleno en el TD funciona si quieres que el espacio tenga el mismo color de fondo que el td

en mi caso, el requisito era un espacio en blanco entre la fila del encabezado y lo que estaba encima

Al aplicar este estilo a una sola celda, pude obtener la separación deseada. No fue necesario agregarlo a todas las celdas ... Podría decirse que no es el MÁS elegante, pero posiblemente más elegante que las filas de separación.

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

Si se apega al diseño utilizando tablas, la mejor idea será dar una fila vacía sin contenido y una altura especificada entre cada fila de la tabla.

Puede usar div para evitar esta complejidad. Solo dale un margen a cada div.

También puede modificar la altura de cada fila 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>

También puedes modificar la altura del <td>elemento, debería darte el mismo resultado.

Cree otro <tr>justo debajo y agregue algo de espacio o altura al contenido de<td>

Mira el violín, por ejemplo

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

Agregue la siguiente regla a tr y debería funcionar

float: left

Muestra (Ábralo en IE9 por supuesto :)): http://jsfiddle.net/zshmN/

EDITAR: Esta no es una solución legal o correcta como han señalado muchos, pero si no tiene opción y necesita algo, esto funcionará en IE9.

Entonces, todos aquellos que están dando votos, háganos saber también la solución correcta