Establecer cellpadding y cellpacing en CSS?


3317

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

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

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


66
Solo una sugerencia general, verifique si su style.css hace un "reinicio" en sus tablas antes de probar estas soluciones. Ejemplo: si no tiene tablas establecidas, width:autoentonces border-collapsepodría no funcionar como se esperaba.
PJ Brunet

1
Use el espacio entre bordes en la mesa y el relleno en td.
Anubhav

Respuestas:


3555

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 .


27
cellpadding = "0" aún puede marcar la diferencia en Chrome 13.0.782.215, incluso si border-collapse: collapse y border-spacing se aplican a la tabla.
whitneyland

77
@LeeWhitney necesita establecer el relleno: 0 en las celdas de su tabla.
Martin Ørding-Thomsen

77
Está un poco fuera de tema, pero los atributos de espacio entre celdas y celdas se eliminan en HTML5, por lo que CSS es el único camino a seguir ahora.
Ignas2526

12
Hola a todos. He actualizado la respuesta para mayor claridad, incluida una sección sobre el relleno del celular, que pensé que era obvio (solo use "relleno"). Espero que sea más útil ahora.
Eric Nguyen

44
Es cierto, @vapcguy, en cualquiera de las otras situaciones infinitamente variables en las que puede diseñar una tabla, deberá definir selectores más específicos. Los anteriores están marcados como ejemplos.
Eric Nguyen

942

Defecto

El comportamiento predeterminado del navegador es equivalente a:

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

         Ingrese la descripción de la imagen aquí

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

        Ingrese la descripción de la imagen aquí

Espaciamiento celular

Controla el espacio entre las celdas de la tabla.

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

        Ingrese la descripción de la imagen aquí

Ambos

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

        Ingrese la descripción de la imagen aquí

Ambos (especial)

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

        Ingrese la descripción de la imagen aquí

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.


1
¿Cómo está desapareciendo el espacio alrededor de la mesa? Cuando establezco "border-spacing: 8px 12px, agrega el espacio no solo entre, sino entre el borde de la mesa y las celdas exteriores. Pero eso no se representa en las imágenes aquí; están al ras.
Kaz

1
@ 2astalavista Y, desafortunadamente, si alguien quiere eliminar el efecto del espacio exterior, no funcionará de esta manera con estos atributos CSS.
Kaz

@Kaz Es posible que necesite usar un margen negativo para ocultar esa parte molesta.

2
El relleno predeterminado en TD es típicamente 1px, no 0
Jan M

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

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

2
En realidad, esto es lo único que podría hacer para trabajar para mí, aunque apliqué la información a una identificación para evitar ser demasiado general.
Kzqai

20
Eso es cellspacing=0equivalente El equivalente para cellspacing=1es completamente diferente. Ver la respuesta aceptada.
TRiG

3
¿No debería table tdy table thsolo ser tdy threspectivamente? Funciona de cualquier manera, pero un selector más pequeño significa una coincidencia ligeramente más rápida
Cole Johnson

1
@Cole En realidad, creo que debería ser table > tr > tdy table > tr > th. Esto es casi tan rápido como try th, y está garantizado que funcionará si tiene una tabla anidada. Just my 2c
leviathanbadger

@ aboveyou00 pero ¿se tablenecesita el selector? IIRC, a <td>no es válido a menos que esté dentro de a <tr>.
Cole Johnson

114

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.


47
En la era actual, esa realidad es un engaño hasta el enésimo grado.
John K

77
Esto es casi correcto, pero border-collapsesolo funciona en IE 5-7 si la tabla aún no tiene un cellspacingatributo definido. He escrito una respuesta integral que combina todas las partes correctas de las otras respuestas en esta página en caso de que sea útil.
Eric Nguyen

Para ser sincero, ¿a quién le importa Internet Explorer? Cualquiera que lo use debe saber que los sitios web rotos son su culpa, por usar un navegador de tan baja calidad. Los sitios web no deberían tener que lidiar con esto. Deje que Internet Explorer se pierda. Olvídate de tu apoyo. No lo necesitamos, y es difícil desarrollarlo.

99

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 intentan recibir correos electrónicos receptivos, tenga en cuenta que * no es reconocido por Outlook 2007+ (utiliza Word como motor de renderizado) campaignmonitor.com/css
ptim

71

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

54

La solución simple a este problema es:

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

49

Además, si lo desea cellspacing="0", no olvide agregar border-collapse: collapseen su tablehoja de estilo.


43

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.


Desearía poder votar más ... ¡Primer ejemplo que no repitió los otros y uno que muestra cómo limitar el efecto a una sola tabla o celda, en lugar de a todos en la página!
vapcguy

23

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


21

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

20

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.


35
En realidad están en desuso en html5.
Kzqai

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

17

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.


15

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.


77
OP nunca dijo para qué estaba usando la tabla.
Alfabravo


12

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


10

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

9

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.


99
!importantsolo sería necesario para anular otras configuraciones de CSS en una situación compleja (e incluso, en su mayoría, un enfoque incorrecto).
Jukka K. Korpela

1
También una repetición de la respuesta de Dan, solo agrega la !important, que podría haberse incluido como un comentario en lugar de otra respuesta.
vapcguy

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


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


5

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.


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

4

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

Para relleno de celdas :

Simplemente llame al td/thcelular simple padding.

Ejemplo:

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

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


3

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>


La regla de espaciado de borde se ignora cuando los bordes se contraen.
dgrogan

0

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

2
Poner "estilo" en la etiqueta de la tabla es peor que poner "tabla # someId" en su CSS, ya que el estilo debe separarse del contenido. Pero el punto principal de la pregunta es cómo convertir el html en desuso en un CSS apropiado. Lo que ha hecho correctamente, pero realmente no ha agregado nada con su respuesta, y se está centrando en un problema no relacionado.
Teepeemm

1
¿Nada añadido? Lo que agregué fue centrarme en cómo cada otra respuesta aquí básicamente dice usar td { padding: ... }o table { border-spacing: ... }, en lugar de aplicarla directamente a la tabla. Esos no agregan nada. Como dije, cuando tienes varias tablas en tu página y no quieres afectarlas, ¡no quieres hacerlo! No necesitamos una página completa de respuestas que diga "¡Use la hoja de estilo!", Cuando tal vez sea lo último que desea, porque solo desea formatear para una celda o tabla. Eso es cuando aplicarlo tableo tdes indeseable y crear una clase completamente nueva para él es excesivo.
vapcguy

1
Todas las demás respuestas usan una hoja de estilo porque la pregunta original era "¿cómo puedo hacer esto con css". Si la pregunta hubiera sido "¿cómo puedo hacer que css afecte solo a esta tabla?", Entonces su respuesta sería más apropiada (aunque todavía estaría a favor table#someId).
Teepeemm

2
Técnicamente, el estilo en línea sigue siendo CSS, solo que no usa una hoja de estilo, pero entiendo su punto.
vapcguy 01 de

1
Porque la idea detrás de una clase es la reutilización. Para un caso único, eso tiene poco sentido y es excesivo, en mi humilde opinión.
vapcguy

0

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

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


0

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

ingrese la descripción de la imagen aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.