Ver Mensaje Individual
  #3  
Antiguo 26-04-2006
Avatar de roman
roman roman is offline
Moderador
 
Registrado: may 2003
Ubicación: Ciudad de México
Posts: 20.269
Reputación: 10
roman Es un diamante en brutoroman Es un diamante en brutoroman Es un diamante en bruto
La tabla puede ser cualquiera, por ejemplo:

Código:
<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:

Código:
#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í:

Código:
<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

Código:
#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:

Código:
<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:

Código:
#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:

Código:
<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
Responder Con Cita