Establecer cellpadding y cellpacing en CSS?

En una tabla HTML, el cellpaddingy cellspacingse puede establecer así:

<table cellspacing="1" cellpadding="1">

¿Cómo se puede lograr lo mismo usando CSS?

Lo esencial

Para controlar "cellpadding" en CSS, simplemente puede usar paddingen las celdas de la tabla. Por ejemplo, para 10px de "cellpadding":

td { 
    padding: 10px;
}

Para el "espacio de celdas", puede aplicar la border-spacingpropiedad CSS a su tabla. Por ejemplo, para 10px de "espaciado de células":

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

Esta propiedad incluso permitirá un espaciado horizontal y vertical por separado, algo que no podría hacer con el "espacio de 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 tienes suerte. Digo "casi" porque estos navegadores aún admiten la border-collapsepropiedad, que fusiona los bordes de las celdas de tabla adyacentes. Si está tratando de eliminar el espacio entre celdas (es decir, cellspacing="0") border-collapse:collapsedeberí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 cellspacingatributo HTML existente en el elemento de la tabla.

En resumen: para los navegadores que no son de Internet Explorer 5-7, lo border-spacingmaneja. Para Internet Explorer, si su situación es correcta (desea 0 espacios de celdas y su tabla no lo tiene definido), puede usarlo 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 esta fantástica página de Quirksmode .

Defecto

El comportamiento predeterminado del navegador es equivalente a:

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

Cellpadding

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

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

Espaciamiento 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 está border-spacingconfigurado, indica que la border-collapsepropiedad de la tabla es separate.

¡Inténtalo tú 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 hasta donde yo sé. El verdadero equivalente CSS para cellspacinges border-spacing, pero no funciona en Internet Explorer.

Puede usar border-collapse: collapsepara establecer de manera confiable el espacio entre celdas en 0 como se mencionó, pero para cualquier otro valor, creo que la única forma de navegador cruzado es seguir usando el cellspacingatributo.

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 *declaración es para Internet Explorer 6 y 7, y otros navegadores lo ignorarán correctamente.

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

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

Consulte el enlace Quirksmode publicado en otro lugar para obtener detalles de compatibilidad. Parece que puede no funcionar 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 lo desea cellspacing="0", no olvide agregar border-collapse: collapseen su 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 más amplios de izquierda y derecha:

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 he probado esto con Internet Explorer, porque eso es todo lo que podemos usar en el trabajo.

Solo use border-collapse: collapsepara su mesa, y paddingpara tho td.

Este estilo es para el reinicio completo de las tablas : relleno de celdas , espaciado de celdas y bordes .

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 fannying con CSS, también podrías usarcellpadding="0" cellspacing="0" ya que no están en desuso ...

Cualquier otra persona que sugiera márgenes <td>obviamente no ha intentado esto.

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

Simplemente use reglas de relleno CSS con datos de tabla:

td { 
    padding: 20px;
}

Y para el espacio entre 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 de diferencias del modelo de caja.

Por lo que entiendo de las clasificaciones W3C es que <table>s están destinados a mostrar datos 'solo'.

En base a eso, encontré que era mucho más fácil crear una <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).

Se utilizan márgenes (o significan todos modos) para crear un separador entre elementos de recipiente, como <table>, <div>y <form>, no <tr>, <td>, <span>o <input>. Usarlo para algo que no sea 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 configurar 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 cellpadding 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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</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 celda de la tabla adyacentes como el atributo de espaciado de celdas. Sin embargo, para trabajar el espacio entre bordes, el valor de la propiedad de colapso del borde debe estar separado, lo cual es 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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Prueba esto:

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

O prueba esto:

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

Solía !importantdespués del colapso de la frontera como

border-collapse: collapse !important;

y me funciona en IE7. Parece anular el atributo de espacio de 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-paddingse puede dar paddingen CSS, mientras que cell-spacingse puede configurar estableciendoborder-spacing de la tabla.

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. */
}

Si marginno funciona, intenta establecer displayde tra blocky luego funcionará margen.

Para las tablas, el espacio entre 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 el colapso del borde.

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

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

En una tabla HTML, el cellpaddingy cellspacingse puede establecer así:

Para relleno de celdas :

Simplemente llame al td/thcelular simple 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;
}

Para espaciamiento celular

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 fuente CSS aquí obtienes más estilo de tabla por CSS .

Simplemente puede hacer algo como esto en su CSS, usando border-spacingy 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>

¿Qué tal si agrega el estilo directamente a la tabla en sí? Esto es en lugar de usarlo tableen su CSS, que es un enfoque MALO 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>

Sugiero esto y todas las celdas de la tabla en particular se efectúan.

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

Puede verificar el siguiente código, simplemente cree un index.htmly ejecútelo.

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

SALIDA