Tablas

Las tablas son una de las herramientas más potentes del lenguaje Html ya que, además de crear las típicas tablas de datos, permite distribuir el texto y las imágenes en nuestra página con una infinidad de posibilidades pero con un sencillo formato.

Para crear una tabla sencilla sólo necesitamos tres etiquetas:

<table> para definir la tabla
<tr> para definir las filas
<td> para definir las celdas de cada fila

A continuación tienes un resumen de las propiedades de estas etiquetas y sus principales atributos.

Etiquetas

<table> </table> Inicio y fin respectivamente de la tabla

<tr> </tr> Inicio y fin de una fila

<td> </td> Inicio y fin de una celda

<th> </th> Inicio y fin de una celda de encabezado. No es obligatoria pudiéndose utilizar en su lugar <td>

<caption> </caption> Indica el título de la tabla. Por defecto se representa encima de esta, aunque puede cambiarse usando hojas de estilo.
Su uso no es obligatorio, pero si se utiliza ha de ir necesariamente después de la etiqueta <table>

Ejemplo Estructura

Encabezado 1	Encabezado 2
Celda 1.1	Celda 1.2
Celda 2.1	Celda 2.2

 <table>

  <tr>

    <th>Encabezado 1</th>

    <th>Encabezado 2</th>

  </tr>

  <tr>

    <td>Celda 1.1</td>

    <td>Celda 1.2</td>

  </tr>

  <tr>

    <td>Celda 2.1</td>

    <td>Celda 2.2</td>

  </tr>

</table>

Es conveniente estructurar la escritura del código Html metiendo las líneas hacia la derecha al crear tablas, esto ahorrará posteriormente tiempo de búsqueda y permitirá trabajar mucho mejor con las páginas

Actividad 9.1

Crea un nuevo archivo horario.htm
Escribe el encabezado de la página HORARIO DE y tu grupo
Crea una tabla con tu horario escribiendo en la primera fila los días de la semana como encabezado y a la izquierda las horas según el modelo siguiente:
Guarda la página y ábrela en el navegador para ver el resultado. Puedes observar que la tabla no tiene líneas de separación, a continuación aprenderás a hacer esto y otros efectos.

A continuación tienes un resumen de los posibles atributos con los que personalizar una tabla. Recuerda que puedes, como siempre, utilizar el atributo style para añadir más efectos, por ejemplo con background-color para cambiar el color de fondo de las celdas.

Atributos opcionales para `<table>`
`border[="número"]`	Indica si tiene borde y el grosor, si se omite no se muestra. `border` - muestra el borde por defecto `border="10"` - muestra un borde de 10 pixels
`sumary="texto"`	Indica un resumen o una explicación del contenido de la tabla.
`width="anchura"`	Indica la anchura de la tabla. Si indicamos un número indica pixels, podemos indicar porcentage poniendo el símbolo `%` a continuación `width="250"` - tabla de 250 pixels de ancho `width="90%"` - tabla de 90% del ancho de la ventana del navegador Si no se indica este atributo, el navegador establecerá el ancho de tabla que crea oportuno según su contenido.
`cellpadding="número" cellspacing="número"`	Indican respectivamente el espacio entre el borde de las celdas y el contenido de estas y el espacio entre celdas contiguas La imagen de la izquierda representa estos atributos.
`frame="valor"`	Indica que bordes del marco de la tabla se mostrarán. Sus posibles valores son: `void` - Ningún lado. Este es el valor por defecto. `above` - Sólo el borde superior. `below` - Sólo el borde inferior. `hsides` - Sólo los bordes superior e inferior. `vsides` - Sólo los lados derecho e izquierdo. `lhs` - Sólo el lado izquierdo. `rhs` - Sólo el lado derecho. `box` - Los cuatro lados. `border` - Los cuatro lados.
`rules="valor"`	Indica que bordes de la tabla serán visibles: `none` - Ninguna línea de división. Este es el valor por defecto. `groups` - Sólo aparecerán líneas de división entre grupos de filas y grupos de columnas. Más tarde veremos como se definen estos grupos. `cols` - Sólo aparecerán líneas de división entre filas. `rows` - Sólo aparecerán líneas de división entre columnas. `all` - Se mostrarán todas las líneas.
Atributos opcionales para `<tr>`
`align="posición"`	Indica la posición horizontal del texto dentro de las celdas de la fila. Sus posibles valores son: `left` - Alineado a la izquierda. Este es el valor por defecto. `right` - Alineado a la derecha. `center` - Centrado. `justify` - Justificado a izquierda y derecha. `char` - Alineado alrededor de un caracter. Por defecto es la coma decimal, aunque puede especificarse con el atributo `char`
`valign="posición"`	Indica la posición vertical del texto dentro de las celdas de la fila. Sus posibles valores son: `top` - Alineado con la parte superior de la celda. `middle` - Centrado verticalmente dentro de la celda. Este es el valor por defecto. `bottom` - Alineado con la parte inferior de la celda. `baseline` - La primera línea de cada celda de la fila es común.
`char="carácter"`	Indica el carácter alrededor del cual se alineará el texto de las celdas. Por defecto es la coma decimal.
`charoff="longitud"`	Establece la distancia entre el borde y el caracter de alineación.
Atributos opcionales para `<td>` y `<th>`
`align="posición" valign="posición"`	Indica la posición horizontal y vertical del texto dentro de las celdas como se explica en atributos de `<tr>` La alineación horizontal por defecto de `<th>` es `center`
`char="carácter" charoff="longitud"`	Lo mismo que para los atributos de `<tr>`.
`rowspan="número" colspan="número"`	Se utiliza para fusionar celdas de la misma columna o de la misma fila respectivamente indicando el número de celdas a fusionar. Por ejemplo, en esta tabla la celda de más arriba “Atributos opcionales para `<td>` y `<th>`” tiene un valor `colspan="2"`

Actividad 9.2

Abre el archivo horario.htm que creaste en la Actividad 9.1
Establece el ancho de la tabla al 90%
Selecciona un borde de tabla de grosor 2.
Junta horizontalmente las cinco celdas de cada recreo.
Junta verticalmente las celdas de dos horas consecutivas cuando sean de la misma asignatura.
Establece un color de fondo para las celdas de encabezado. Para ello crea una hoja de estilo en el encabezado.
Crea una clase de estilos con un color de fondo distinto del anterior para la celdas con las horas y los recreos.
Crea otras tres clases de estilos llamadas comun, troncal y optativa para la etiqueta <td> con colores de fondo y de fuente distintos, y asígnalos a las celdas de las asignaturas según corresponda.
Guarda la página y ábrela en el navegador para ver el resultado. Observa como mejora el resultado.

Es posible agrupar las filas para facilitar la comprensión de estas, sobretodo cuando se trata de tablas largas. Podemos definir un encabezado de tabla, un pie de tabla y una o varias secciones del cuerpo de la tabla, todos ellos con una o más filas. Esto permite, por ejemplo, que a la hora de imprimir una tabla larga los encabezados y pies de página se repitan en cada hoja impresa. Otra posibilidad es utilizar dentro de la etiqueta <table> el atributo rules="groups" que vimos más arriba, con lo que sólo dibujará líneas de separación entre los distintos grupos de filas.

Las etiquetas son:

<thead> - para el encabezado de la tabla
<tfoot> - para el pie de la tabla
<tbody> - para las secciones del cuerpo de la tabla

La etiqueta de cierre es opcional, aunque, como siempre, es recomendable usarlas.

Si decidimos usar estas etiquetas para agrupar filas el orden correcto es el anterior, es decir, primero definiremos el encabezado y el pie de página y a continuación las secciones. De no ser así el navegador podría no interpretarlo correctamente.

Los atributos opcionales para estas etiquetas son los mismos que para <tr>

El agrupamiento en columnas es más potente que el que acabamos de ver para las filas. Nos permite, entre otras cosas, definir individualmente las propiedades de cada columna, estableciendo por ejemplo la anchura o la alineación.

La etiqueta para definir un grupo de columnas es <colgroup>, y dentro de esta podemos definir subgrupos de una o más columnas con la etiqueta <col>.

Los atributos opcionales para estas etiquetas son los mismos que para <tr>, y dos propios de estas que son span para indicar el número de columnas y width para indicar la anchura de las columnas.

Estos grupos de columnas han de definirse inmediatamente después de la etiqueta <table> y antes de definir las filas.

Veamos un cuadro resumen de todo esto con ejemplos de su uso.

Etiqueta	Explicación
`<colgroup>`	Define un grupo de columnas No necesita etiqueta de cierre aunque sí es recomendable
`<col>`	Define las propiedades de una o varias columnas dentro de un grupo. Los atributos definidos para esta etiqueta prevalecen sobre los de `<colgroup>`
Atributos opdionales
`align="valor" valign="valor" char="valor" charoff="longitud"`	Igual que para `<tr>`
`span="numero"`	Indica el número de columnas
`width="anchura"`	Indica la anchura de las columnas. Se puede indicar de tres maneras: Fija `width="40"`: indicando el número de píxels Porcentual `width="40%"`: indicando el porcentage sobre el ancho total disponible Proporcional `width="2"`: indicando la proporción sobre el ancho total disponible. Si, por ejemplo, para dos columnas indicamos anchos `2` y `3`, la primera columna ocupa 2 partes y la segunda 3 partes sobre un total de 5, así para un ancho total de 500 píxels la primera columna ocupará 200 y la segunda 300. Indicando `0` escogerá la anchura mínima necesaria según el contenido.

A continuación tienes varios ejemplos.

Ejemplo	Explicación
`<colgroup span="15" width="40"> </colgroup>`	La tabla tendrá 15 columnas de 40 píxels de anchura cada una
`<colgroup align="center"> <col span="3" width="50%"> <col> </colgroup>`	La tabla tendrá 3 columnas que ocuparán cada una un 10% del total y otra columna que ocupará el resto. El contenido de todas ellas estará centrado.
`<colgroup span="2" width="50"> </colgroup> <colgroup span="3"> <col width="3"> <col width="1"> <col width="2*"> </colgroup>`	El primer grupo de columnas tiene dos de 50 píxels cada una. El resto del espacio lo divide en 6 partes, (3+1+2*=6 partes) y asigna 3 partes a la tercera columna, una parte a la cuarta y 2 a la quinta.

Actividad 9.3

Abre el archivo horario.htm
Establece para la columnas de las horas la anchura mínima necesaria.
Reparte el espacio restante entre las 5 columnas restantes.
Guarda la página y ábrela en el navegador para ver el resultado.

9. Tablas

Crear una tabla sencilla

Personalizar los atributos de una tabla

Agrupar filas

Agrupar columnas