html usar Establecer cellpadding y cellspacing en CSS?




td padding (21)

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

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?


CSS:

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

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 .


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>


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.


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


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>


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

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 .


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.


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


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

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

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.


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


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.


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

<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


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

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

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.


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.





alignment