¿Establecer el relleno de celdas y el espacio de celdas en CSS?

conceptos básicos

Para controlar el "relleno de celda" en CSS, simplemente puede usar padding en las celdas de la tabla. Por ejemplo, para 10 píxeles de "relleno de celda":

td { 
    padding: 10px;
}

Para el "espacio entre celdas", puede aplicar el border-spacing Propiedad CSS a su tabla. Por ejemplo, para 10 píxeles de "espacio entre celdas":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

Esta propiedad incluso permitirá un espaciado horizontal y vertical separados, algo que no podría hacer con el "espacio entre celdas" de la vieja escuela.

Problemas en IE ≤ 7

Esto funcionará en casi todos los navegadores populares, excepto en Internet Explorer hasta Internet Explorer 7, donde casi no tiene suerte. Digo "casi" porque estos navegadores aún admiten la border-collapse propiedad, que fusiona los bordes de las celdas de tabla contiguas. Si está intentando eliminar el espaciamiento celular (es decir, cellspacing="0") entonces border-collapse:collapse debería tener el mismo efecto: no hay espacio entre las celdas de la tabla. Sin embargo, este soporte tiene errores, ya que no anula un cellspacing Atributo HTML en el elemento de tabla.

En resumen: para los navegadores que no son de Internet Explorer 5-7, border-spacing te maneja. Para Internet Explorer, si su situación es la correcta (desea 0 espacio entre celdas y su tabla aún no lo tiene definido), puede usar border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Nota: Para obtener una excelente descripción general de las propiedades CSS que se pueden aplicar a las tablas y para qué navegadores, consulte este fantástica página de Quirksmode.

Predeterminado

El comportamiento predeterminado del navegador es equivalente a:

table {border-collapse: collapse;}
td    {padding: 0px;}

Acolchado celular

Establece la cantidad de espacio entre el contenido de la celda y la pared de la celda.

table {border-collapse: collapse;}
td    {padding: 6px;}

Espacio celular

Controla el espacio entre las celdas de la tabla.

table {border-spacing: 2px;}
td    {padding: 0px;}

Ambos

table {border-spacing: 2px;}
td    {padding: 6px;}

Ambos (especial)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Nota: Si hay border-spacing conjunto, indica border-collapse propiedad de la tabla es separate.

Pruébelo usted mismo!

Aquí puede encontrar la antigua forma HTML de lograr esto.

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

Establecer márgenes en las celdas de la tabla realmente no tiene ningún efecto que yo sepa. El verdadero equivalente de CSS para cellspacing is border-spacing - pero no funciona en Internet Explorer.

Puedes usar border-collapse: collapse para establecer de manera confiable el espaciado de celda en 0 como se mencionó, pero para cualquier otro valor, creo que la única forma entre navegadores es seguir usando el cellspacing atributo.

Este truco funciona para Internet Explorer 6 y versiones posteriores, Google Chrome, Firefox y Opera:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

LA * La declaración es para Internet Explorer 6 y 7, y otros navegadores la ignorarán correctamente.

expression('separate', cellSpacing = '10px') devoluciones 'separate', pero se ejecutan ambas declaraciones, ya que en JavaScript puede pasar más argumentos de los esperados y todos serán evaluados.

Para aquellos que quieren un valor de espacio de celdas distinto de cero, el siguiente CSS funcionó para mí, pero solo puedo probarlo en Firefox.

Consulte las En modo capricho aquí publicado en otro lugar para obtener detalles de compatibilidad. Parece que no funciona con versiones anteriores de Internet Explorer.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

La solución simple a este problema es:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Además, si quieres cellspacing="0", no olvides agregar border-collapse: collapse en tu tablehoja de estilo.

Envuelva el contenido de la celda con un div y puede hacer lo que quiera, pero debe envolver cada celda en una columna para obtener un efecto uniforme. Por ejemplo, para obtener márgenes izquierdo y derecho más amplios:

Entonces el CSS será,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

Sí, es una molestia. Sí, funciona con Internet Explorer. De hecho, solo lo he probado con Internet Explorer, porque eso es todo lo que podemos usar en el trabajo.

Sólo tiene que utilizar border-collapse: collapse para tu mesa, y padding para th or td.

Este estilo es para reinicio completo para tablas - relleno de celdas, espaciamiento celular y fronteras.

Tenía este estilo en mi archivo reset.css:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

TBH. Para todos los fanáticos con CSS, también puede usar cellpadding="0" cellspacing="0" ya que no están en desuso ...

Alguien más sugiera márgenes en <td>Obviamente, no ha intentado esto.

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

Simplemente use las reglas de relleno CSS con los datos de la tabla:

td { 
    padding: 20px;
}

Y para el espaciado de bordes:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

Sin embargo, puede crear problemas en versiones anteriores de navegadores como Internet Explorer debido a la implementación diferencial del modelo de caja.

Por lo que entiendo de las clasificaciones del W3C es que <table>Los s están diseñados para mostrar datos 'solo'.

En base a eso, me resultó mucho más fácil crear un <div> con los fondos y todo eso y tener una tabla con datos flotando sobre ella usando position: absolute; y background: transparent;...

Funciona en Chrome, Internet Explorer (6 y posterior) y Mozilla Firefox (2 y posterior).

Los márgenes se utilizan (o significan de todos modos) para crear un espaciador entre los elementos del contenedor, como <table>, <div> y <form>no, <tr>, <td>, <span> or <input>. Usarlo para cualquier otra cosa que no sean elementos de contenedor lo mantendrá ocupado ajustando su sitio web para futuras actualizaciones del navegador.

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

Puede establecer fácilmente el relleno dentro de las celdas de la tabla utilizando la propiedad de relleno CSS. Es una forma válida de producir el mismo efecto que el atributo de relleno de celda de la tabla.

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

De manera similar, puede usar la propiedad de espaciado de borde de CSS para aplicar el espaciado entre los bordes de las celdas de la tabla adyacente como el atributo de espaciado de celdas. Sin embargo, para trabajar el espaciado de bordes, el valor de la propiedad de colapso de borde debe estar separado, que es el valor predeterminado.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Prueba esto:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

O pruebe esto:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

solía !important después del colapso de la frontera como

border-collapse: collapse !important;

y me funciona en IE7. Parece anular el atributo de espacio entre celdas.

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-padding puede ser dado por padding en CSS mientras cell-spacing se puede configurar configurando border-spacing para mesa.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Violín.

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

If margin no funcionó, intente configurar display of tr a block y luego el margen funcionará.

Para las tablas, el espacio de celdas y el relleno de celdas son obsoletos en HTML 5.

Ahora, para el espaciado de celdas, debe usar el espaciado de bordes. Y para el relleno de celdas, debe usar border-collapse.

Y asegúrese de no usar esto en su código HTML5. Intente siempre utilizar estos valores en un archivo CSS 3.

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

En una tabla HTML, el cellpadding y cellspacing se puede configurar así:

Si relleno de celda:

Solo llama simple td/th (NGF por sus siglas en inglés), padding.

Ejemplo:

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

Si espaciamiento de celdas

Solo llama simple table border-spacing

Ejemplo:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

Más estilo de tabla por enlace de fuente CSS aquí obtienes más estilo de tabla por CSS.

Simplemente puede hacer algo como esto en su CSS, usando border-spacing y padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

Puede verificar el código a continuación, simplemente cree un index.html y ejecutarlo.

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      border-spacing: 10px;
    }
    
    td {
      padding: 10px;
    }
  </style>
</head>

<body>
  <table cellspacing="0" cellpadding="0">
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
</body>

</html>

PRODUCCIÓN :

¿Qué tal agregar el estilo directamente a la mesa? Esto es en lugar de usar table en tu CSS, que es un BAD enfoque si tiene varias tablas en su página:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

Esto funcionó para mí:

table {border-collapse: collapse}
table th, table td {padding: 0}

Sugiero que esto y todas las celdas de la tabla en particular se realicen.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px;
 }

Digamos que queremos asignar un "espacio de celda" de 10px y un "espacio de celda" de 15px a nuestra tabla, de una manera compatible con HTML5. Mostraré aquí dos métodos que dan resultados realmente similares.

Se aplican dos conjuntos diferentes de propiedades CSS al mismo marcado HTML para la tabla, pero con conceptos opuestos:

• el primero usa el valor predeterminado para border-collapse (separate) y usos border-spacing para proporcionar el espacio celular,

• el segundo cambia border-collapse a collapse y usa el border propiedad como el espacio entre celdas.

En ambos casos, el relleno de celda se logra asignando padding:10px En el correo electrónico “Su Cuenta de Usuario en su Nuevo Sistema XNUMXCX”. tdsy, en ambos casos, el background-color asignado a ellos es sólo por el bien de una demostración más clara.

Primer método:

table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}

<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>

Segundo método:

table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}

<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>