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

[salvador86]

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:

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

[Mikmoro]

Podrías probar con

table, td {border:solid 1px #CC6600;}

[salvador86]

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

[salvador86]

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

td{
border-top:1px #006633 solid;
border-left:1px #006633 solid;
}
table{

border-bottom:1px #006633 solid;
border-right:1px #006633 solid;
}

[Mikmoro]

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.

[salvador86]

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

[Mikmoro]

Iniciado por salvador86

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.

[salvador86]

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.

[Jamati]

Iniciado por Mikmoro

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

[Mikmoro]

Iniciado por Jamati

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

Iniciado por Jamati

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

[salvador86]

Yo coloque lo siguiente en el html solo <table></table> y en css

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.