html - usar - td padding




Establecer cellpadding y cellspacing en CSS? (18)

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.

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?


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

CSS:

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

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


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 .


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

La solución simple a este problema es:

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

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

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.


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

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>


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


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.


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 .


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

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

<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-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}

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





alignment