html - significa - Establecer cellpadding y cellspacing en CSS?

como usar cellpadding en html

Question

En una tabla HTML, el cellpadding y cellspacing se pueden configurar de la siguiente manera:

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

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

Answer 1

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 celular

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

Espaciamiento de celdas

Controla el espacio entre celdas de la tabla.

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

Ambos

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

Ambos (especiales)

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

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

¡Inténtalo tú mismo!

Here puedes encontrar la antigua forma html de lograr esto.

Answer 2

¿Qué hay de agregar el estilo directamente a la tabla en sí? Esto es en lugar de usar la table en 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>

Answer 3

Además, si desea cellspacing="0" , no se olvide de agregar border-collapse: collapse en la hoja de estilos de su table .

Answer 4

CSS:

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

Answer 5

En una tabla HTML, el cellpadding y cellspacing se pueden configurar de la siguiente manera:

Para relleno de celdas : simplemente llame al relleno simple de celda td/th

EX:

/******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 el espaciamiento celular

Simplemente llame a la table simple border-spacing

EX:

/********* 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 el enlace de la fuente CSS aquí obtiene más estilo de tabla por css

Answer 6

Envuelve el contenido de la celda con un div y puedes hacer lo que quieras, pero debes envolver cada celda en una columna para obtener un efecto uniforme. Por ejemplo, para simplemente ampliar los márgenes izquierdo y derecho:

Así que 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 IE. De hecho, solo he probado esto con IE, porque eso es todo lo que podemos usar en el trabajo.

Answer 7

Establecer márgenes en las celdas de la tabla realmente no tiene ningún efecto por lo que sé. El verdadero equivalente en CSS para el cellspacing de cellspacing es border-spacing , pero no funciona en Internet Explorer.

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

Answer 8

Este estilo es para reinicio completo de tablas : relleno de celdas , espacios 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*/
}

Answer 9

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 ellos serán evaluados.

Answer 10

La solución simple a este problema es:

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

Answer 11

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

Answer 12

Para la tabla, el espacio entre celdas y el relleno de celda están obsoletos en HTML 5. Ahora, para el espaciado entre celdas, debe usar el espaciado de los bordes Y para el relleno de celda, debe usar el contrapunto de bordes.

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

Answer 13

Por lo que entiendo de las clasificaciones W3C es que <table> 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, IE (6 y posteriores) y Mozilla (2 y posteriores).

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

Answer 14

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

Answer 15

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 de relleno de tabla 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 bordes de CSS para aplicar el espaciado entre los bordes de celdas de la tabla adyacente como el atributo de espacio de celdas. Sin embargo, para trabajar el espacio entre los bordes, el valor de la propiedad border-collapse 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>[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>

Answer 16

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>

Answer 17

Solo utilizando border-collapse: collapse para su tabla y padding para th o td

Answer 18

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

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

Answer 19

Utilicé !important después del colapso de la frontera como

border-collapse: collapse !important;

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

Answer 20

Lo esencial

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

td { 
    padding: 10px;
}

Para el "espacio de celdas", puede aplicar la propiedad CSS de border-spacing a su tabla. Por ejemplo, para 10px de "cellspacing":

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

Esta propiedad incluso permitirá el espaciado horizontal y vertical por separado, algo que no podría hacer con el "espacio de celda" de la vieja escuela.

Problemas en IE <= 7

Esto funcionará en casi todos los navegadores populares, excepto en el uso de Internet Explorer a través de Internet Explorer 7, donde casi no tiene suerte. Digo "casi" porque estos navegadores aún admiten la propiedad de border-collapse , que combina los bordes de las celdas de la tabla contigua. Si está tratando de eliminar el espaciado de celdas (es decir, el cellspacing="0" ), a continuación border-collapse:collapse debería tener el mismo efecto: no hay espacio entre las celdas de la tabla. Sin embargo, este soporte es defectuoso, ya que no anula un atributo HTML de cellspacing existente en el elemento de la tabla.

En resumen: para los navegadores que no sean Internet Explorer 5-7, border-spacing maneja. Para Internet Explorer, si su situación es la correcta (quiere que haya un espacio de 0 celdas y que su tabla no lo tiene ya 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 esta fantástica página de Quirksmode .

Answer 21

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

td { 
    padding: 20px;
}

Y para el espaciado de la frontera:

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

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

Answer 22

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

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

Answer 23

<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 se puede proporcionar mediante el padding en CSS, mientras que cell-spacing se puede configurar configurando border-spacing de los border-spacing para la tabla.

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

Fiddle

Answer 24

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

Answer 25

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

Answer 26

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

Si el margin no funcionó, intente configurar la display de tr a block y luego el margen funcionará.