Al igual que las listas, las tablas son componentes dedicados a mejorar la visualización de datos tabulados. En este apartado veremos sus principios básicos.
Las tablas se especificarán siempre por filas; es decir, primero se escribirá la fila 1, despues la fila 2, etc. La etiqueta que se utiliza para delimitar una tabla es <table>...</table>.
Para escribir el contenido de la tabla se crea un bloque <tbody>...</tbody> y, dentro de él, cada fila se especifica con la etiqueta <tr>...</tr> y, dentro de ella, cada celda se especifica con la etiqueta <td>...</td>. A su vez, la etiqueta <th>...</th> se usa para que la celda tenga formato de cabecera:
<table> <tbody> <tr><th>Nombre</th><th>Profesión</th><th>Edad</th></tr> <tr><td>Pedro</td><td>arquitecto</td><td>34</td></tr> <tr><td>Javier</td><td>albañil</td><td>30</td></tr> <tr><td>Luis</td><td>fontanero</td><td>43</td></tr> <tr><td>Mariano</td><td>chispas</td><td>39</td></tr> </tbody> </table>
El usuario verá:
Nombre Profesión Edad Pedro arquitecto 34 Javier albañil 30 Luis fontanero 43 Mariano chispas 39
Adicionalmente podemos poner un título de a la tabla. Para ello podemos usar la etiqueta <caption>...</caption>. Esta etiqueta (opcional), si se usa, debe preceder a cualquier otra dentro de la tabla.
Para facilitar al agente la tarea presentar las tablas en distintas páginas, disponemos de las etiquetas <thead>...</thead> y <tfoot>...</tfoot> para definir las filas que forman parte del encabezado y las que forman parte del pie de la tabla. Estas etiquetas deben preceder a <tbody>.
<table> <caption>Cifra neta de negocio 2011 (€)</caption> <thead> <tr><th>Nombre</th><th>Ventas</th></tr> </thead> <tfoot> <tr><td>Total</td><td>4.110.999</td></tr> </tfoot> <tbody> <tr><td>Servicios directos</td><td>2.345.567</td></tr> <tr><td>Servicios subcontratados</td><td>1.765.432</td></tr> </tbody> </table>
El usuario verá:
Cifra neta de negocio 2011 (€) Nombre Ventas Total 4.110.999 Servicios directos 2.345.567 Servicios subcontratados 1.765.432
El aspecto que presenta la tabla se puede indicar de diferentes en función de qué se quiera personalizar: la tabla en conjunto, una columna, una fila o una celda en concreto.
La presencia de bordes en la tabla se especifica con el atributo border de la etiqueta <table>, donde debemos indicar el número de pixels que deseamos tenga el borde. Así que tendremos algo como:
<table border="1">...</table>
Las etiquetas tr, td y th admiten dos atributos de centrado: align para la horizontal y valign para la alineación vertical; donde los valores que pueden tomar son:
right (derecha), left (izquierda), center (centrado horizontal), justify (alineación completa -izquierda y derecha-) y char (entorno al carácter indicado mediante el atributo char).top (superior), bottom (inferior), middle (centrado vertical) y baseline (la línea base de todas las celdas de la misma fila a la misma altura).Podemos utilizar todo esto para mejorar el aspecto general de la tabla anterior. Por ejemplo, para obtener esto:
Cifra neta de negocio 2011
(miles de €)Nombre Ventas Total 3.111,0 Servicios directos 2.345,6 Servicios subcontratados 765,4
Debemos escribir:
<table border="1"> <caption>Cifra neta de negocio 2011<br />(miles de €)</caption> <thead> <tr><th>Nombre/th><th>Ventas</th></tr> </thead> <tfoot> <tr><td>Total</td><td align="right">3.111,0</td></tr> </tfoot> <tbody> <tr><td>Servicios directos</td><td align="right">2.345,6</td></tr> <tr><td>Servicios subcontratados</td><td align="right">765,4</td></tr> </tbody> </table>
En ocasiones podemos desear que una celda es extienda a otras, o lo que es lo mismo, se defina como la unión de varias posiciones de la tabla. Para ello se puede usar los atributos colspan y rowspan de las etiquetas <td> y <th>. Por ejemplo:
<table border="1"> <caption>Ejemplo de unión de celdas</caption> <thead> <tr><th rowspan="2"></th><th colspan="2">Valores</th><th rowspan="2">Precio</th></tr> <tr><th>Peso</th><th>Potencia</th></tr> </thead> <tbody> <tr align="center"><th>Modelo 1</th><td>890</td><td>70</td><td>995</td></tr> <tr align="center"><th>Modelo 2</th><td>1200</td><td>110</td><td>2245</td></tr> </tbody> </table>
El usuario verá:
Ejemplo de unión de celdas Valores Precio Peso Potencia Modelo 1 890 70 995 Modelo 2 1200 110 2245