Las tablas pueden sernos muy útiles, incluso más que útiles necesarias, para representar información de una forma clara, concisa y precisa. El ejemplo típico es el calendario escolar:
| Lunes | Martes | Miércoles | Jueves | Viernes | |
|---|---|---|---|---|---|
| 08:00 | Historia | Geografía | Matemáticas | ||
| 09:00 | Matemáticas | Lengua | Religión | Biología | Química |
| 10:00 | Química | Matemáticas | Religión | ||
| 11:00 | Lengua | Matemáticas | Química | Biología | |
| 12:00 | Religión | Biología | Lengua | ||
| 13:00 | Química | Biología | Tutoría | ||
Si queremos representar toda esta información mediante texto resultaría todo bastante más confuso y quedaría bastante menos claro. El código que he empleado es el siguiente:
<table border="1"> <thead> <tr><th></th> <th>Lunes</th> <th>Martes</th> <th>Miércoles</th> <th>Jueves</th> <th>Viernes</th> </tr> </thead> <tbody> <tr> <td><b>08:00</b></td><td align="center" colspan="3">Historia</td><td>Geografía</td><td>Matemáticas</td> </tr> <tr> <td><b>09:00</b></td><td rowspan="2">Matemáticas</td><td>Lengua</td><td>Religión</td><td rowspan="3">Biología</td><td>Química</td> </tr> <tr> <td><b>10:00</b></td><td>Química</td><td>Matemáticas</td><td>Religión</td> </tr> <tr> <td><b>11:00</b></td><td rowspan="2">Lengua</td><td>Matemáticas</td><td>Química</td><td>Biología</td> </tr> <tr> <td><b>12:00</b></td><td rowspan="2">Religión</td><td rowspan="2">Biología</td><td colspan="2">Lengua</td> </tr> <tr> <td><b>13:00</b></td><td>Química</td><td>Biología</td><td>Tutoría</td> </tr> </tbody> </table>
Vamos a ir paso a paso para dejar claros los conceptos necesarios. La etiqueta fundamental para crear tablas es <table>. Como podéis ver tiene una etiqueta de cierre asociada </table>. Hay tres elementos principales que podemos introducir dentro de una tabla.
- En primer lugar tenemos los datos de la cabecera. En el ejemplo anterior estos datos serían los días de la semana. Para definir una cabecera utilizaremos las etiquetas <thead> y </thead>. Con esto, lo único que hacemos es definir la cabecera pero no añadimos ningún elemento a la misma. Cada día de la semana, esto es, cada elemento de la cabecera tiene que ser declarado entre las etiquetas <th> y </th>. La primera celda de la tabla, es una celda vacía y en ella podríamos representar el texto "Días/Horas" (o algún similar) o no escribir nada porque la relación es fácilmente visible. Sino queremos escribir nada tendremos que declarar la celda escribiendo las etiquetas de inicio y de cierre juntas: <th></th>.
- En segundo lugar tenemos el cuerpo de la tabla. Para declarar esta sección tendremos que utilizar las etiquetas <tbody> para iniciar el cuerpo y </tbody> para cerrarlo. La forma de añadir celdas a nuestra tabla pasa por ir declarando en primer lugar las filas (rows) y en segundo lugar las columnas (column). Si nos fijamos en el código del ejemplo, mediante la etiqueta <tr> declaramos una fila y con </tr> la cerramos. Dentro de cada fila tendremos que ir declarando celdas una por una. Para ello tenemos las etiquetas <td> y </td>. Cualquier cosa que declaremos entre estas dos etiquetas pasará a estar dentro de una celda. En el ejemplo hemos añadido texto, pero podríamos incrustar imágenes, enlaces, enlaces con imágenes o con texto, texto con formato...
- En tercer lugar estaría la sección del pie, es decir, la última fila de la tabla. No aparece en el ejemplo anterior porque no siempre tiene sentido colocar esta sección. Para declararla utilizaremos la etiqueta <tfoot> y para cerrarla como es costumbre </tfoot>. Añadiremos celdas a esta sección utilizando un mecanismo similar al empleado en el cuerpo con las etiquetas <tr> y <td>. Para comprender su significado mostraremos el ejemplo de alguien que expone un listado de tareas y el número de horas que le ha llevado completarlas:
| Tareas | Horas empleadas |
|---|---|
| Programación | 3 h. |
| Identificación | 3 h. |
| Instrucción | 3 h. |
| Fijación | 3 h. |
| Ejecución | 3 h. |
| Evaluación | 3 h. |
| TOTAL | 18 h. |
<table> <thead><th>Tareas</th><th>Horas empleadas</th></thead> <tbody> <tr><td>Programación</td><td>3 h.</td></tr> <tr><td>Identificación</td><td>3 h.</td></tr> <tr><td>Instrucción</td><td>3 h.</td></tr> <tr><td>Fijación</td><td>3 h.</td></tr> <tr><td>Ejecución</td><td>3 h.</td></tr> <tr><td>Evaluación</td><td>3 h.</td></tr> </tbody> <tfoot> <tr><td>TOTAL</td><td>18 h.</td></tr> </tfoot> </table>
- Como podemos ver en el ejemplo <tfoot> y </tfoot> delimitan la zona del pie de la tabla donde se ha expresado el total de horas requerido para todas las tareas.
- colspan: nos permitirá expandir las columnas de una celda. Podremos posicionarlo tanto con la etiqueta <th> como con la etiqueta <td>. Como valor le tendremos que pasar el número de columnas que queremos que ocupe nuestra celda. Podemos ver un ejemplo en la tabla del calendario. Si nos fijamos a primera hora de lunes, martes y miércoles estudiamos Historia (de 3 celdas hemos pasado a 1).
- rowspan: con este atributo expandiremos las filas que ocupa una celda. El procedimiento es idéntico. Podremos ubicarlo en las etiquetas <th> o en <td> y su valor tiene que coincidir con el número de filas que queremos que ocupe la celda. Hay varios ejemplos similares al anterior en el calendario.
width: al igual que sucedía con la etiqueta align cuando vimos como tratar imágenes en HTML no es recomendable utilizar este atributo desde HTML. Lo suyo es hacerlo con CSS. De utilizarlo, su valor coincidirá con el ancho en píxeles de la celda (si lo incrustamos en <table>) o de la celda (si lo incrustamos en <td>). De ser este último el caso, con modificar la anchura de la primera celda bastará para que el resto de celdas de la columna tomen la misma anchura establecida.cellpadding: es preferible ajustar este atributo mediante las hojas de estilo (CSS). Permite añadir espacio extra para cada celda. Se puede utilizar únicamente sobre <table>.cellspacing: es preferible ajustar este atributo mediante las hojas de estilo (CSS). Permite añadir espacio extra entre celdas. Al igual que sucedía en cellpadding, sólo se puede aplicar sobre la etiqueta <table>.border: es preferible ajustar este atributo mediante las hojas de estilo (CSS). Permite especificar el tamaño en píxeles del borde de la tabla (si lo aplicamos sobre <table> o de una celda en particular (al aplicarlo sobre <td>).bgcolor: es preferible ajustar este atributo mediante las hojas de estilo (CSS). Permite especificar el color de fondo de la tabla (si se aplica sobre <table>) o de una única celda (al aplicarlo sobre <td>).
| OBJETIVOS | Vamos a ver las etiquetas necesarias para crear tablas. |
| DIFICULTAD | Fácil/Intermedio. |
| REQUISITOS | Tener en cuenta lo que hemos visto con anterioridad. |
| CONSEJOS | Para crear tablas se necesitan bastantes etiquetas más que para trabajar con texto o con imágenes. No agobiarse, con un poco de práctica podremos crear todas las tablas que necesitemos. Cuando veamos CSS veremos como crear tablas "vacilonas". Con HTML a secas quedarán algo "cutres" xD. |
| PRÓXIMAMENTE | Seguiremos viendo elementos básicos de HTML y etiquetas importantes. Más adelante comprobaremos cómo añadir fragmentos de HTML a nuestras entradas e introduciremos alguna de las herramientas más utilizadas para crear páginas web. Cuando hablemos de CSS veremos cómo cambiar la fuente y el color del texto junto a varias opciones a mayores similares. |
No hay comentarios:
Publicar un comentario