Las tablas son estructuras bastante complejas formadas por filas y columnas. La estructura básica externa de las tablas es siempre el elemento tabla.
<table> ... </table>
La definición real de la tabla tiene lugar dentro de este elemento. Por cierto, es aconsejable asignar un marco a una tabla al convertirla a HTML. Esto facilita la comprensión exacta de cómo están organizadas las filas y columnas. Para ello, asigne la combinación atributo-valor border="1" a la <tabla> introductoria. (Tenga en cuenta que el atributo border no debe utilizarse en HTML. En este caso, se utilizan en su lugar las propiedades CSS correspondientes. Más sobre esto más adelante).
<table border="1"> ... </table>
El siguiente paso es definir las filas de la tabla. Esto se hace utilizando el elemento tr.
<table border="1"> <tr></tr> </table>
Sin embargo, esto todavía no conduce a la salida deseada. El siguiente paso es definir las columnas. Esto se hace de nuevo utilizando el elemento td.
<table border="1"> <tr> <td></td> </tr> </table>
Ahora puede definir el contenido de la primera tabla. Esto se define entre <td> y </td>.
<table border="1"> <tr> <td>Contenido 1</td> </tr> </table>
Sólo ahora merece la pena echar un vistazo al resultado en el navegador.
Ciertamente, no es especialmente espectacular, ya que la tabla actualmente sólo consta de una celda de tabla. Ahora puede añadir otra columna. Esto se hace de nuevo utilizando un elemento td. Asegúrese de definirlo dentro del elemento tr.
<table border="1"> <tr> <td>Contenido 1</td> <td>Contenido 2</td> </tr> </table>
De nuevo, eche un vistazo al resultado.
Para incluir filas adicionales en la tabla, basta con crear otro elemento tr en el que luego se definen los elementos td deseados.
He aquí otro ejemplo:
<table border="1"> <tr> <td>Contenido 1</td> <td>Contenido 2</td> </tr> <tr> <td>Contenido 3</td> <td>Contenido 4</td> </tr> </table>
Un vistazo al resultado en el navegador proporciona el siguiente resultado
También puede crear tablas extensas de esta forma.
Definir encabezado, cuerpo y pie de página
Las tablas se pueden dividir en áreas lógicas. Éstas son un área de cabecera, una o más áreas de datos y un área de pie de página. El siguiente ejemplo muestra cómo puede quedar:
<table border="1"> <thead> <tr> <th>Salida</th> <th>Llegada</th> <th>Plataforma</th> </tr> </thead> <tfoot> <tr> <td>Berlín</td> <td>Stralsund</td> <td>5</td> </tr> </tfoot> <tbody> <tr> <td>Berlín</td> <td>Hamburgo</td> <td>1</td> </tr> <tr> <td>Múnich</td> <td>Berlín</td> <td>3</td> </tr> </tbody> </table>
Y he aquí un vistazo al resultado en el navegador:
Obviamente, la división en las zonas mencionadas no tiene ningún efecto visual. Por supuesto, esto nos lleva a la siguiente pregunta: ¿Por qué debería tomarse la molestia de definir estas áreas? Hay dos buenas razones para ello:
- Utilizando CSS, las áreas pueden formatearse de manera diferente si se desea.
- Al imprimir tablas largas, los navegadores pueden repetir la cabecera y el pie de tabla en cada página.
La cabecera de la tabla se introduce con thead. A continuación aparecen las filas de la tabla que pertenecen al área de cabecera. No olvide volver a cerrar el área de cabecera </thead>.
Si la tabla debe tener un pie de página, éste debe definirse antes del cuerpo de la tabla. El pie de página se introduce mediante < tfoot>. Puede ir seguido de una o varias líneas que pertenezcan a la zona de pie de página. El pie de la tabla se cierra con < /tfoot>.
El cuerpo real de la tabla se define dentro del elemento tbody. Este tbody puede aparecer varias veces. El cuerpo de una tabla se cierra mediante < /tbody>.
¿Por qué utilizar varios elementos tbody en una tabla, por ejemplo? Un buen ejemplo podría ser la tabla de la Bundesliga de fútbol. En una tabla de este tipo suele haber varias zonas.
- Campeones
- Participantes en la Liga de Campeones
- Clasificados para la Liga de Campeones
- Participantes en la Europa League
- El centro del campo gris
- Puesto de descenso
- Equipo descendido
Puede colocar cada una de estas áreas en un elemento tbody distinto y aplicarles estilos diferentes mediante CSS.
Predefinir columnas
La forma en que los navegadores muestran la tabla depende principalmente del número de filas y columnas disponibles. Sin embargo, el proceso de mostrar una tabla no es fácil para el navegador. De hecho, un navegador siempre tiene que leer toda la tabla antes de poder mostrarla. Por supuesto, esto puede llevar algún tiempo, especialmente con tablas muy grandes. Este problema puede evitarse indicando directamente al navegador de cuántas columnas consta realmente la tabla.
<tabla> <colgroup span="2"></colgroup> <tr> <th>ISBN</th> <th>Título</th> <th>Precio</th> </tr> <tr> <td>23223423434</td> <td>Una breve historia de casi todo</td> <td>29,95 euros</td> </tr> </table>
La predefinición de los detalles de las columnas se introduce mediante colgroup. Ten en cuenta que la mayoría de los atributos disponibles para colgroup en versiones anteriores de HTML ya no están permitidos en HTML5. Ahora sólo se permite el atributo span. Este span espera el número de columnas contenidas en la tabla como valor.
El elemento colgroup se coloca directamente después de la introducción <table>. Las propias columnas se definen mediante los elementos col individuales.
Al utilizar colgroup, tiene básicamente dos opciones:
- Con atributo span
- Sin atributo span
Si no se utiliza el atributo span, debe definirse un elemento col dentro del elemento colgroup para cada columna sobre la que se vaya a extender el grupo de columnas. Tenga en cuenta que col es un elemento independiente.
<table> <colgroup> <col /> <col /> </colgroup> <tr> <th>ISBN</th> <th>Título</th> <th>Precio</th> </tr> <tr> <td>23223423434</td> <td>Una breve historia de casi todo</td> <td>29,95 euros</td> </tr> </tabla>
También hay un formulario híbrido.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> ...
Esto siempre es práctico si se quiere predefinir una columna por separado pero se quiere resumir las demás en un grupo.
