2012-08-03 13 views
33

Tengo una tabla HTML. Necesito tener espacio entre las columnas de la tabla, pero no las filas de la tabla.La tabla HTML necesita espacio entre columnas, no filas

Si utilizo la propiedad css cellspacing lo hace entre filas y columnas. Tampoco puedo usar CSS en lo que hago. Necesito usar html puro

+2

deja esto a cabo un estilo en línea? –

+2

agregar un td adicional con un espacio sin interrupción ( ) en él? – rene

Respuesta

29

Si puede usar el estilo en línea, puede configurar el relleno izquierdo y derecho en cada td .. O utiliza un td extra entre las columnas y establecer un número de espacios sin ruptura como @rene amablemente sugirió.

http://jsfiddle.net/u5mN4/

http://jsfiddle.net/u5mN4/1/

Ambos son bastante feo; p css ftw

+1

Recomiendo css en línea, el espacio en blanco '' será molesto para las personas que usan la tecnología de asistencia –

+0

Yo también lo haría, simplemente puse el 'td' en blanco allí en caso de que no fuera una opción. –

5
<table cellpadding="pixels"cellspacing="pixels"></table> 
<td align="position"valign="position"></td> 

cellpadding = "longitud en píxeles" ~ El atributo cellpadding, utilizado en la etiqueta <table>, especifica cuánto espacio en blanco para mostrar entre el contenido de cada celda de la tabla y su borde respectivo. El valor se define como una longitud en píxeles. Por lo tanto, un par de valor-atributo cellpadding="10" mostrará 10 píxeles de espacio en blanco en los cuatro lados del contenido de cada celda en esa tabla.

cellspacing = "longitud en píxeles" ~ El atributo cellspacing, también usado en la etiqueta <table>, define la cantidad de espacio en blanco para mostrar en entre celdas de tabla adyacentes y entre celdas de la tabla y el borde de la tabla. El valor se define como una longitud en píxeles. Por lo tanto, un par de valor-atributo cellspacing="10" separará horizontal y verticalmente todas las celdas adyacentes en la tabla respectiva por una longitud de 10 píxeles. También compensará todas las celdas del marco de la tabla en los cuatro lados por una longitud de 10 píxeles.

+0

Nota: También parece funcionar para usar CSS en línea en la etiqueta TABLE.

proporciona 20 píxeles de relleno en el margen derecho. – Jeff

22

El mejor enfoque utiliza la regla css de Shredder: relleno: 0 15px 0 15px solo en lugar de css en línea, defina una regla CSS que se aplique a todos los tds. hacer esto mediante el uso de una etiqueta de estilo en su página:

<style type="text/css"> 
td 
{ 
    padding:0 15px 0 15px; 
} 
</style> 

o dar la mesa de una clase como "paddingBetweenCols" y en el uso CSS del sitio

.paddingBetweenCols td 
{ 
    padding:0 15px 0 15px; 
} 

El enfoque CSS del sitio define una regla centro que puede ser reutilizado por todas las páginas.

Si lo hace para utilizar el enfoque del sitio css, sería mejor definir una clase como la anterior y aplicar el relleno a la clase ... a menos que desee que todas las td en todo el sitio tengan la misma regla aplicada.

Fiddle for using style tag

Fiddle for using site css

Nota si

Cuestiones relacionadas