Columnas y hojas de estilo

[roman]

Hola,

¿Cuál se supone que es la forma correcta de dar estilo a las columnas de una tabla html?

Si uso la etiqueta <col>, no todos los atributos se ven reflejados, al menos en FF, en IE parece que sí. Por ejemplo, FF acepta el color de fondo, pero no el color de texto ni la alineación.

¿Hay algún remedio que no sea enlazar cada una de las celdas de la columna a un estilo dado?

// Gracias

[dec]

Hola,

Disculpa Román, pero, yo no he sido nunca muy bueno con las tablas HTML, de hecho acabo de conocer (creo) la etiqueta "COL", y así me cuesta un tanto hacerme a la idea de las etiquetas que compondrían la tabla a la que quieres aplicar cierto estilo. ¿Sería posible que pusieras aquí el código HTML de la tabla (o parte de ella, una buena representación)? Porque me parece que tal vez así podría echarte una mano, lo digo, claro está, o al menos lo intentaría.

[roman]

La tabla puede ser cualquiera, por ejemplo:

<table id='beatles'>
<tr>
  <th>id</th><th>nombre</th>
</tr>
<tr>
  <td>1</td><td>john</td>
</tr>
<tr>
  <td>2</td><td>george</td>
</tr>
<tr>
  <td>3</td><td>paul</td>
</tr>
<tr>
  <td>4</td><td>ringo</td>
</tr>
</table>

Con una hoja de estilo puedo aplicar formato a varios elementos de un sólo golpe:

#beatles
{
  border-collapse: collapse;
  border: none;
}

#beatles th,td
{
  border: 1px solid silver;
}

Aquí todas las celdas tendrán el borde 1px solid silver sin necesidad de especificar un class o id en cada celda.

Pero esto da el aspecto general de todas las celdas. Si queremos, por ejemplo, dar un formato particular a una fila, podríamos hacerlo así:

<table id='beatles'>
<tr>
  <th>id</th><th>nombre</th>
</tr>
<tr>
  <td>1</td><td>john</td>
</tr>
<tr class='george'>
  <td>2</td><td>george</td>
</tr>
<tr>
  <td>3</td><td>paul</td>
</tr>
<tr>
  <td>4</td><td>ringo</td>
</tr>
</table>

y agregando un estilo para .george en la hoja de estilo. Por ejemplo

#beatles tr.george
{
  background-color: yellow;
  color: red;
  text-align: right;
}

hará que todas las celdas de la fila id='george' sean de color amarillo con letras rojas y alineadas a la derecha.

Pero, ¿qué pasa para las columnas? No es nada extraño querer dar un formato particular a una columna. En principio se supondría que para eso esta <col>. Por ejemplo:

<table id='beatles'>
<col class='numero'>
<tr>
  <th>id</th><th>nombre</th>
</tr>
<tr>
  <td>1</td><td>john</td>
</tr>
<tr>
  <td>2</td><td>george</td>
</tr>
<tr>
  <td>3</td><td>paul</td>
</tr>
<tr>
  <td>4</td><td>ringo</td>
</tr>
</table>

Si en la hoja de estilo ponemos:

#beatles col.numero
{
  background-color: yellow;
  color: red;
  text-align: right;
}

sería deseable que, al igual que con las filas, todas las celdas de la columna id='numero' fueran amarillas con letras rojas y alineadas a la derecha.

Así sucede en IE, pero FF sólo toma en cuenta el color de fondo.

¿Qué queda entonces? ¿Poner formato en cada celda:

<table id='beatles'>
<tr>
  <th>id</th><th>nombre</th>
</tr>
<tr>
  <td class='numero'>1</td><td>john</td>
</tr>
<tr>
  <td class='numero'>2</td><td>george</td>
</tr>
<tr>
  <td class='numero'>3</td><td>paul</td>
</tr>
<tr>
  <td class='numero'>4</td><td>ringo</td>
</tr>
</table>

Pero entonces ya llenamos la tabla de attributos que no deberían hacer falta.

¿Me explico?

// Saludos

[[seoane]]

Solo decirte que en el Opera (el que uso yo) tampoco se puede cambiar el color de la fuente con <col>.

He estado buscando por google y encontre una posible explicacion a este comportamiento

http://ln.hixie.ch/?start=1070385285&count=1

[roman]

Gracias seoane. Interesante lectura. Aunque siempre es de notar ese argumento de: en IE se ve bien porque en realidad IE está mal.

// Saludos