html - Establecer cellpadding y cellspacing en CSS?




13 Answers

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.

cellpadding y cellspacing en html

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?




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 .




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



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




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




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



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



CSS:

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



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.




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




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.




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




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





Related