Foros del Web » Creando para Internet » CSS »

Solución a problema de dar Estilo a las celdas de una Tabla

Estas en el tema de Solución a problema de dar Estilo a las celdas de una Tabla en el foro de CSS en Foros del Web. Hola, quisiera aprender como darle estilo a todas las celdas deuna tabla, he probado con la propiedad border pero solo da estilo al borde de ...
  #1 (permalink)  
Antiguo 02/10/2008, 11:35
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Solución a problema de dar Estilo a las celdas de una Tabla

Hola, quisiera aprender como darle estilo a todas las celdas deuna tabla, he probado con la propiedad border pero solo da estilo al borde de la tabla, quiere decir si tengo una tabla de 4 columas por 4 filas al dar estilo por ejemplo de 1 pixel y color rojo solo se da formato al borde de la tabla, mas no a todas las celdas yo quisiera que se vea como una grilla y no he podido, gracias por todo.

En caso que lo ponga el estilo de este modo:
Cita:
td{
border:solid #CC6600;
}
No resulta como deseo pues no veo una propiedad para darle tamaño de pixeles y en los borde se ve una tamaño y en las celdas otro.


Algo que me resulto fue darle color de fondo a tabla por ejemplo rojo y a las celdas blanco y la tabla darle un espaciado y relleno de un pixel, queda bien pero esto evita que coloque una imagen de fondo, como se ve esta imagen el fondo de la casita no se puede apreciar en la tabla.


espero su ayuda

Última edición por salvador86; 02/10/2008 a las 13:17 Razón: editar
  #2 (permalink)  
Antiguo 02/10/2008, 12:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas Estilo a las celdas de una Tabla

Podrías probar con

table, td {border:solid 1px #CC6600;}
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 02/10/2008, 13:07
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Problemas Estilo a las celdas de una Tabla

Hola Mikmoro, gracias claro si colocamos ese código sale, pero como le estamos dando borde a la etiqueta TD el borde de la tabla se vera con tamaño de borde de un pixel, pero como las celdas estan juntas se apreciara como si tienen 2 pixeles de gruesor, alguna otra sugerencia, aquí como se muestra
  #4 (permalink)  
Antiguo 02/10/2008, 13:16
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Problemas Estilo a las celdas de una Tabla

Bueno probe con esto y me resulta excelente claro si hay alguna manera mejor estaría mejor es a las celda darle estilo solo a su lado izquierdo y superior, y la tabla su lado derecho y de debajo
Cita:
td{
border-top:1px #006633 solid;
border-left:1px #006633 solid;
}
table{

border-bottom:1px #006633 solid;
border-right:1px #006633 solid;
}
  #5 (permalink)  
Antiguo 02/10/2008, 13:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solución a problema de dar Estilo a las celdas de una Tabla

Mira: pon esto en la css:

table {border-collapse:collapse;border: 1px solid #C60;}

y en la tabla pon además de lo que tengas:

<table border="1">

Y quita el borde que hayas puesto en la css a las celdas.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 02/10/2008, 15:07
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Solución a problema de dar Estilo a las celdas de una Tabla

Excelente Mikmoro, pero solo se ve muy bien en Firefox, mientras que en Explorer 7 que estoy utilizando se aprecia el borde de color #C60 en la tabla, mientras que en el borde de las celdas solo se ve un borde pero sin el color preestablecido (se ve el color parecido a crema que por defecto asume la tabla cuando no tiene estilos), aquí una imagen



Una pregunta es porque debo poner tanto en el css como en la tabla border=1

Última edición por salvador86; 02/10/2008 a las 15:08 Razón: editar
  #7 (permalink)  
Antiguo 02/10/2008, 16:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solución a problema de dar Estilo a las celdas de una Tabla

Cita:
Iniciado por salvador86 Ver Mensaje
Una pregunta es porque debo poner tanto en el css como en la tabla border=1
Lo siento, no sabía que en IE7 se veía así. El problema se soluciona poniendo:

table, td {border-collapse:collapse;border: 1px solid #C60;}


A la tabla debes decirle que tendrá borde (border 1). Luego en la css le dices que será collapse, es decir, que no tendrá cada celda su borde, sino que use un único borde entre ellas, y luego le das las propiedades a ese borde.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 24/10/2008, 17:29
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Solución a problema de dar Estilo a las celdas de una Tabla

Hola Mikmoro, ahora si salio miy bien, aunque en la misma tabla no le coloque borde=1, pues no entendi porque tendria de hacerlo ya que en el css ya había mensionado este parte, aprovecho para saber si en vez de colocar en la tabla estas propiedades: cellpadding="0" cellspacing="0", lo puedo hacer con CSS, he intentado y no pude, pues no me gusta poner atributos en el html, siempre trato de evitarlos. Muchas Gracias.
  #9 (permalink)  
Antiguo 25/10/2008, 16:55
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Solución a problema de dar Estilo a las celdas de una Tabla

Cita:
Iniciado por Mikmoro Ver Mensaje
table {border-collapse:collapse;border: 1px solid #C60;}
Mikmoro, que hace el atributo ese que pusiste ?

Si yo tengo esta tabla:

Código:
<table cellpadding="0" cellspacing="0" border="0">
como hago para que me quede en el HTML solamente: <table>
que es lo que tengo que poner en el CSS para quitar: cellpadding="0" cellspacing="0" ???
  #10 (permalink)  
Antiguo 25/10/2008, 18:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solución a problema de dar Estilo a las celdas de una Tabla

Cita:
Iniciado por Jamati Ver Mensaje
Mikmoro, que hace el atributo ese que pusiste ?
Border-collapse bien a querer decir que cada celda no tendrá su propio borde y por tanto se duplicará en celdas adyacentes (borde derecho de la celda 1 + borde izquierdo de la celda 2), sino que el borde entre ellas será uno sólo, de forma que lo que vemos es una única línea separando las celdas (como se ve en las imágenes que hay más arriba en este hilo).

Cita:
Iniciado por Jamati Ver Mensaje
Si yo tengo esta tabla:

Código:
<table cellpadding="0" cellspacing="0" border="0">
como hago para que me quede en el HTML solamente: <table>
que es lo que tengo que poner en el CSS para quitar: cellpadding="0" cellspacing="0" ???
No estoy del todo seguro pero yo creo que cellspacing no puede ser reemplazado por ninguna propiedad CSS. Cellpaddig puede ser reemplzado por padding en un selector td:

table td {padding: 6px;}
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 06/11/2008, 16:17
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Solución a problema de dar Estilo a las celdas de una Tabla

Yo coloque lo siguiente en el html solo <table></table> y en css
Cita:
table{
border-collapse:collapse;
}
Ya no se ve el relleno ni espaciado de la tabla, en Explorer y Firefox.

EN mi editor de html se sigue mostrando el espaciado y relleno pero cuando lo ejecuto se les dice Adios.

Última edición por salvador86; 06/11/2008 a las 16:20 Razón: editar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:25.