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