es posible controlar todos los parametros de tablas con css?
7 seguidores
Hola estoy aprendiendo html y css y para presentar datos tabulados me encuentro con que no puedo cambiar todos los parametros de la tabla desde el css, por ejemplo soy incapaz de cambiar el cellpadding o el cellspacing de la tabla... hay alguna forma de hacerlo desde el css o los etngo que definir en mi etiqueta table
también tengo problemas para definir las anchuras de columnas... algún documento que explique esto detalladamente?
Muchas gracias
missha
hola!
para hacer el cellpadding con css, debes poner los siguientes atributos:
td{
padding: 10px;
}
el cellspacing es un poco más complicado, porque hay una propiedad CSS, pero Internet Explorer no lo soporta :(
para Mozilla, Opera y demás navegadores decentes, sería así:
table{
border-spacing: 20px;
}
y además, si utilizas border-spacing, tendrías que tener cuidado con no poner border-collapse: collapse, porque esta propiedad negaría la de border-spacing.
un ejemplo
lo de las anchura de las columnas lo he estado mirando y parece jodiete, porque no funciona lo que sería lógico:
tr{
width: 30px;
}
se podría hacer dándole una clase a los td de cada columna y definirles el width, pero eso es un poco guarrería...
a ver si le doy más vueltas y lo averiguo :)
javito
muchas gracias :)
oye el link que has puesto está muy bien!! justo lo que andaba buscando... no conoces algún documento o tutorial donde traten este tema en profundidad?
muchas gracias de nuevo
missha
no, lo único que he encontrado que fuera decente ha sido un artículo de quirksmode :(
y nada en español...
Hipster
MIRATE ESTO QUE A LO MEJOR TE VALE
;)
meddle
mira esto tambien
https://www.domestika.org/foros/viewtopic.php?t=21470
missha
meddle, es fácil simular el cellspacing="0", pero qué hay si queremos cellspacing="5" de una columna en concreto?
¿sábes cómo se haría sin darle una clase a cada celda de la columna?
meddle
ni puta idea la verdad. eso de arriba lo hice en un momento de estress y por necesidad, creo que era la primera tabla que usaba en 3 años. en realidad puede que no sea posible, quien sabe, pero no tengo las css de tablas por la mano ni mucho menos :)
txuma
para cuándo se podrá tener control global de columnas sin tener que meter clases a todas las celdas de la misma??
meddle
eh chic@s que no soy Eric Meyer (y ademas las tablas no me interesan) ;)
... pero teneis razon, en el tema tablas el CSS esta muy muy atrasado.
de todos modos: ¿habeis probado a darle estilo a las celdas del head? con eso deberia ser suficiente, no? (la columna entera <em>deberia</em> heredar el ancho), pero no me hagais mucho caso.
txuma
meddle
(la columna entera <em>deberia</em> heredar el ancho), pero no me hagais mucho caso.
Si, en ese caso si.... pero no puedes darle un formato de texto, o un color de fondo a toda una columna... Lo dicho, que yo hecho de menos tener mayor control para formatear una tabla, sobre todo que las columnas no se puedan manejar como un conjunto :(
meddle
tamos deacuerdo ;)
albertoromero
txuma
.. pero no puedes darle un formato de texto, o un color de fondo a toda una columna... Lo dicho, que yo hecho de menos tener mayor control para formatear una tabla, sobre todo que las columnas no se puedan manejar como un conjunto :(
¿Conocéis la etiqueta <col>?
Se usa para definir las columnas al principio de la tabla, y mola por que se le pueden poner estilos.
Funciona así:
En el head:
<code><style type="text/css">
.c1{background-color:#F00;font:bold 10px verdana}
.c2{background-color:#00F;font:normal 15px arial}
</style></code>
En el body:
<code><table>
<col class="c1"><col class="c2">
<tbody>
<tr>
<th>Month</th><th>1994</th>
</tr>
<tr>
<td>Jan</td><td>14</td>
</tr>
<tr>
<td>Feb</td><td>13</td>
</tr>
</tbody>
</table></code>
missha
:o
funciona! :)
por cierto, las etiquetas col deben ir dentro de un colgroup y cerradas en xhtml
albertoromero
Me alegro de que funcione.
Yo la verdad es que lo tenía por ahí guardado pero no lo había usado, lo he probado así rápido en ie 5.5 y 6 y firefox y tira, así que guay.
Gracias por lo del xhtml ;)
javito
muchas gracias a todos :D, por lo visto en la proxima especificacion de las CSS el tema de las tablas va a ser mejorado en profundidad, no?
cbp
aquí viene cómo usar el "colgroup" y el "col" en html :)
txuma
Muy bien visto, denegro, muy bien visto ;)
Pero me temo que en Firefox y Netscape no funciona :( (al menos a mi)
Usuario desconocido
excelentes links missha!! :-)
javito
bueno gracias a todos, no he podido controlar toatalmente el aspecto de la tabla pero lo básico está hecho, solo espero que en las proximas versiones de CSS y de los navegadores esto sea mas facil... aunque no venga mucho a cuento el Indesign tiene un problema parecido, a la hora de aplicar estilos a textos y parrafos es extremadamente potente eso si cuando se trata de tablas debes hacerlo celda a celda o columna a columna, vamos que no hay estilos de tablas, estará relacionado?
txuma
javito
Indesign tiene un problema parecido, a la hora de aplicar estilos a textos y parrafos es extremadamente potente eso si cuando se trata de tablas debes hacerlo celda a celda o columna a columna, vamos que no hay estilos de tablas, estará relacionado?
Que va, no tiene nada que ver. Indesign es un programa de maquetación impresa que no usa ningun tipo de 'estandar'. Se rige por el propio funcionamiento del software y las funcionalidades que tenga o deje de tener dependen unica y exclusivamente del fabricante (adobe).
En el caso del HTML estamos hablando de que se echan de menos algunas cuestiones dentro de la propia definición estandar, pero entiendo que eso es normal. Como comentaba una vez con Sergi, siempre las cabezas van por delante de las definiciones ;)
Para denegro:
En tu mensaje ponías que habías probado aplicar estilo a la etiqueta col y que te funcionaba bien en Firefox. ¿estás seguro?. A mi me da la impresión que los que usan Gecko no lo pillan :S
javito
lo digo porque parece que el CCS esta relacionado con las tecnologia de estilos de indesign, cuando exportas a GoLive te crea hojas de estilos y es curioso que el mismo tema este tan poco desarrollado en ambas tecnologías... seguro que cuando haya una forma facil de definir estilos de tablas en CSS Indesign tendra esa funcionalidad :D
albertoromero
txuma
Para denegro:
En tu mensaje ponías que habías probado aplicar estilo a la etiqueta col y que te funcionaba bien en Firefox. ¿estás seguro?. A mi me da la impresión que los que usan Gecko no lo pillan :S
Txuma y demás:
Para que funcione en Firefox, hay que usar el doctype de xhtml:
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"></code>
(supongo que el 'Strict' también valdrá, claro)
Como bien decía missha, las etiquetas <col> deben ir cerradas y dentro de un colgroup.
Para aclararnos, voy a pegar el ejemplo anterior completo. Lo he probado en IE 5.5 y 6, Firefox 0.9.1, Opera 7 y NN 6.2 en w2k. Si alguien ve algo que lo diga, ok?
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Descubriendo la etiqueta col</title>
<style type="text/css">
.c1{background-color:#F00;font:bold 10px verdana}
.c2{background-color:#00F;font:normal 15px arial}
</style>
</head>
<body>
<table>
<colgroup><col class="c1"/><col class="c2"/></colgroup>
<tbody>
<tr>
<th>Month</th><th>1994</th>
</tr>
<tr>
<td>Jan</td><td>14</td>
</tr>
<tr>
<td>Feb</td><td>13</td>
</tr>
</tbody>
</table>
</body>
</html></code>
txuma
mmmm, algo raro pasa. Yo lo estoy probando en Firefox 0.8 y Netscape 7 (W XP) y nada de nada...
albertoromero
Juer, pos esta vez sí que lo he mirado bien... la magia de los navegadores y las plataformas!