<Código-Web>
Elementos HTML
y Reglas CSS

  1. TEXTOS
  2. ENLACES
  3. LISTAS
  4. IMÁGENES
  5. TABLAS
  6. FORMULARIOS
  7. MAQUETACIÓN

TABLAS > Complejas

 

Veamos ahora como crear tablas algo más sofisticadas.

En ocasiones necesitamos que nuestras tablas tengan un título y que las celdas que encabezan las filas y/o las columnas se muestren resaltadas de alguna manera.

La etiqueta <caption> coloca la leyenda o título de la tabla. La etiqueta <th> resalta los encabezados de filas y columnas.

código HTML

<table>
<caption>Título de la tabla</caption>
<tr>
<th>...</th> <!-- esquina superior-izquierda -->
<th>Columna 1</th> <!-- encabezado de columna 1 -->
<th>Columna 2</th> <!-- encabezado de columna 2 -->
<th>Columna 3</th> <!-- encabezado de columna 3 -->
</tr>
<tr>
<th>Fila 1</th> <!-- encabezado de fila 1 -->
<td>celda 11</td>
<td>celda 12</td>
<td>celda 13</td>
</tr>
<tr>
<th>Fila 2</th> <!-- encabezado de fila 2 -->
<td>celda 21</td>
<td>celda 22</td>
<td>celda 23</td>
</tr>
<tr>
<th>Fila 3</th> <!-- encabezado de fila 3 -->
<td>celda 31</td>
<td>celda 32</td>
<td>celda 33</td>
</tr>
</table>

Código CSS

table {
background: #f1f1f1;
margin: 50px auto;
padding: 5px 10px;
border: 1px solid #333333;
border-spacing: 8px;
text-align: center;
}
td {
background: #f5f5f5;
width: 100px;
border: 1px solid #999999;
padding: 2px 4px;
}

En el navegador vemos:

*

De manera que añadiendo simplemente estas 2 reglas CSS:

th {
background: #D65600;
padding: 4px;
color: #ffffff;
box-shadow: 1px 1px 2px #555555;
}
caption {
font: 1.2em/2 Verdana, sans-serif;
color: #D65600;
}

En el navegador vemos:

*

Y puede que necesitemos que las filas y/o las columnas se marquen, por ejemplo de otro color (tipo cebra) para que se puedan leer mejor.

Nota: para poder presentar tablas con apariencia distinta en el mismo documento es necesario identificarlas, en este ejemplo la tabla lleva el atributo id="T2" en el código HTML

Código CSS

#T2 {
background: #f1f1f1;
margin: 50px auto;
padding: 0;
border: 1px solid #c5c5c5;
border-spacing: 1px;
text-align: left;
}
#T2 caption {
font: 1.5em/2 Verdana, sans-serif;
color: #999999;
}
#T2 td {
background: transparent;
width: auto;
border: none;
padding: 0;
}
#T2 th {
background: #c5c5c5;
padding: 0 8px;
font: 0.8em Verdana, sans-serif;
color: #ffffff;
box-shadow: 1px 1px 1px #555555;
}
#T2 td {text-align: right;}
#T2 tr:nth-child(2n+1) {background: #e1e1e1;} /* marca cebra filas impares */

En el navegador vemos:

*

También es posible que tanto filas como columnas o incluso celdas individuales cambien de aspecto cuando el cursor pasa sobre ellas.

Código CSS

tr:hover {color: #0000ff;}   /* cambia la fila entera la pasar el cursor */
#T2 td:hover {background: #666666; color: #ffffff;} /* cambia la celda de la tabla T2 */

Aquí tienes el ejemplo completo.

 


- (cc) 2012, 3con14 -