En primer lugar, me gustaría mostrarle cómo las celdas de una fila pueden unirse columna a columna. Esto significa que una columna de la fila correspondiente se extiende por varias columnas.
Un ejemplo:
<table border="1"> <tr> <th colspan="2">Fechas</th> </tr> <tr> <td>11.4.2014</td> <td>12.4.2012</td> </tr> <td> <td>13.4.4.2014</td> <td>14.4.2014</td> </tr> <td>15.4.2014</td> <td>16.4.2014</td> </tr> </table>
Primero unas palabras sobre el elemento th utilizado aquí. Este elemento se utiliza para identificar las celdas de encabezado. Los navegadores suelen mostrar estas celdas en negrita y centradas. Y aquí está el resultado en el navegador:
El atributo colspan se establece dentro de la introducción th. El valor esperado es el número de columnas sobre las que debe extenderse la celda actual. Asegúrese siempre de que el número de columnas especificado es correcto, de lo contrario puede obtener resultados antiestéticos. En este ejemplo, la fila de cabecera marcada con th debe extenderse sobre dos columnas. Las dos filas restantes contienen dos filas cada una.
Nota sobre la unión de filas. Asigne unborde a las tablas durante la fase de desarrollo. De esta forma siempre podrá ver directamente si la unión funciona como se desea.
Unir celdas de una columna fila a fila
El atributo rowspan puede utilizarse para unir varias celdas de una columna. La celda en cuestión se extiende entonces por varias filas dentro de la columna. He aquí otro ejemplo:
<table border="1"> <tr> <th rowspan="2">Color</th> <td>Azul</td> </tr> <tr> <td>Verde</td> </tr> <tr> <th rowspan="2">Tamaño</th> <td>1,70</td> </tr> <trd> <td>1,80</td> </tr> </tabla>
En el navegador se ve así:
Al atributo rowspan se le asigna un valor numérico. Esto determina en última instancia el número de filas dentro de una columna sobre la que una celda debe extenderse. De nuevo, por supuesto, el número de filas especificado debe ser realmente correcto.
Unir celdas en filas y columnas al mismo tiempo
Los dos atributos rowspan y colspan también pueden combinarse entre sí. Esto permite definir celdas que abarcan varias filas y columnas al mismo tiempo. Esto también se demuestra mejor con un ejemplo.
<table border="1"> <tr> <th colspan="2" rowspan="2">Apartamento</th> <td>5 habitaciones</td> </tr> <tr> <td>154 metros cuadrados</td>./td> </tr> <tr> <td>Charlottenburg</td> <td>Parking</td> <td>Calefacción por suelo radiante</td> </tr> </table>
Un vistazo en el navegador ofrece el siguiente resultado:
Al combinar los dos atributos, por supuesto también hay que tener cuidado de que el número de celdas sea realmente correcto al final.
Etiquetado de tablas
El elemento caption ofrece una forma muy interesante de facilitar la comprensión de las tablas. En efecto, permite añadir un título o una leyenda a una tabla. El contenido de caption se muestra fuera de la tabla, aunque esté definido en ella.
He aquí una aplicación típica de la leyenda:
Encima de la tabla aparece un título. Por defecto, el título está centrado encima de la tabla. Por supuesto, esto puede personalizarse mediante CSS.
El elemento caption se define directamente después de la introducción <table>.
Esta es la sintaxis completa del ejemplo anterior
<table border="1"> <caption>Datos multimedia</caption> <colgroup><col /><col /><col /><colgroup> <thead> <tr> <th>Theme</th> <th>Llamadas</th> <th>Tendencia</th> </tr> <head> <tfoot> <tr> <td colspan="3">A junio de 2014</td> </tr> <tfoot> <tbody> <tr> <td>HTML5</td> <td>12.245</td> <td>+</td> </tr> <tr> <td>CSS3</td> <td>12123</td> <td>+</td> </tr> <td>JavaScript</td> <td>11.546</td> <td>+</td> </tr> </tbody> </table>
Diseño de tablas
En versiones anteriores de HTML existían numerosos atributos para dar estilo a las tablas. He aquí algunos ejemplos de cosas que podían controlarse mediante atributos. (Por supuesto, los navegadores siguen soportando estos atributos hoy en día. Sin embargo, ya no deberían utilizarse en HTML5).
- Marcos exteriores
- Marcos internos de la tabla
- Especificaciones de anchura y altura
- Líneas de cuadrícula
- Alineación del contenido de las celdas
- Colores
- Imágenes de fondo
Como puede ver, todo puede controlarse mediante los atributos HTML correspondientes. El siguiente ejemplo muestra una tabla en la que se han utilizado ampliamente estas opciones:
<table border="1"> <tr> <td width="200" height="100" bgcolor="#999933">Uno</td> <td width="200" bgcolor="#00ffff">Dos</td> <td width="200">Tres</td> <td width="200">Tres</td>./tr> <tr bgcolor="#ff00ff"> <td height="100">Cuatro</td> <td bgcolor="#996666">Cinco</td> <td bgcolor="#003333">Seis</td> </tr> </table>
Mirando el resultado da el resultado deseado.
Pero incluso si esto se ve como debería, la sintaxis subyacente es cualquier cosa menos eficaz. Es mejor controlar las propiedades de la tabla mediante CSS. Gracias a las nuevas propiedades CSS, no sólo es posible sustituir los antiguos atributos por una sintaxis moderna. También se pueden implementar funcionalidades adicionales. Por ejemplo, ahora las filas de la tabla se pueden colorear fácilmente de forma alterna.
En los primeros tiempos de HTML y CSS, a veces había que hacer enormes contorsiones de código para lograr ese resultado. Ahora, si se utilizan de forma coherente las posibilidades que ofrece CSS, se puede conseguir fácilmente.
tr:nth-child(even) { background-color: #fd9d5d; } tr:nth-child(odd) { background-color: #c0f390; } table { border-spacing: 0px; }
Como ya se ha descrito varias veces, voy a entrar en CSS en detalle en esta serie.
