Prof. Andrea Delogu – Prof. Fabiana Lorenzo
Lab. Aplicaciones - 6° 12° - 6° 11
TABLAS EN HTML Hoy en día la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar las opciones de diseño. Todos los objetos se alinean por a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar. La tabla, además del uso habitual semejante al de este elemento en los procesadores de texto, se usa como contenedor de las diferentes secciones de nuestra página. Etiqueta
Las tablas están formadas por celdas, que son los recuadros que se obtienen de la intersección entre una fila y una columna. Columna
Imagen y Texto
Fila
Celda
Para crear una tabla hay que insertar las etiquetas . Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla. Etiqueta (tr acrónimo de table row o fila de la tabla) Es necesario insertar las etiquetas
y
por cada una de las filas de la tabla. Estas deberán insertarse entre las etiquetas . Por ejemplo, para insertar una tabla con cuatro filas habría que escribir: Etiqueta (td acrónimo de table data o dato de la tabla) Una celda es el resultado de la intersección entre una fila y una columna, por lo que podemos especificar el número de celdas por fila, que equivale a especificar el número de columnas. Es necesario insertar las etiquetas | y | por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre y
.
1
Entre las etiquetas y | se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla: Lunes Laboratorio de Aplicaciones Laboratorio de Hardware
Martes Laboratorio de Programación Laboratorio de Sistemas Operativos
Habría que escribir: | Lunes | Martes |
| Laboratorio de Aplicaciones | Laboratorio de Programación |
| Laboratorio de Hardware | Laboratorio de Sistemas Operativos |
Título de la tabla Es posible establecer un título para la tabla mediante las etiquetas y . Estas etiquetas han de ir después de la etiqueta , y puede especificarse el valor de los atributos align (con los valores botton, center, left, right y top) y valign (con los valores botton y top). Por ejemplo, si escribiéramos el siguiente código: Título de la tabla | Lunes | ...
Título de la tabla Lunes Laboratorio de Aplicaciones Laboratorio de Hardware
Martes Laboratorio de Programación Laboratorio de Sistemas Operativos
Combinar celdas Para las etiquetas existen los atributos colspan y rowspan, que se utilizan para combinar celdas.
Prof. Andrea Delogu – Prof. Fabiana Lorenzo
Lab. Aplicaciones - 6° 12° - 6° 11
A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda. Para que quede más claro vamos a ver un ejemplo. Para insertar la siguiente tabla: DIFERENCIAS ETRE EL PERRO Y EL HOMBRE DIFERENCIAS PERRO
Duración crecimiento Tiempo de gestación Duración de vida del pelo/cabello
HOMBRE
PEQUEÑO 10 meses 58 a 63 días 1 año
GRANDE 18 a 24 meses
16 años 9 meses 2 a 7 años
Habría que escribir: | DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE | | DIFERENCIAS | PERRO | HOMBRE | | | PEQUEÑO | GRANDE | | | Duración crecimiento | 10 meses | 18 a 24 meses | 16 años | | Tiempo de gestación | 58 a 63 días | 9 meses | | Duaración de vida del pelo/cabello | 1 año | 2 a 7 año | 3
Entre los tags | y | se incluye el contenido que queremos que aparezca en la celda. HTML no permite crear celdas vacías en una tabla, así que, cuando se quiere que una celda aparezca sin contenidos, se debe incluir dentro de ella un espacio en blanco, utilizando la secuencia . El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es cuestión de práctica. Cuidando la presentación de la Tabla Grosor de los bordes Celdas de cabecera. Etiqueta | (th es el acrónimo de table heading o encabezado de la tabla) | | Columna 1 | Columna 2 | Columna 3 | (Nota: Las cabeceras por defecto están centradas) Alineación dentro de las celdas: o Alineación en sentido vertical Arriba | Abajo | o Alineación en sentido horizontal Al centro | A la derecha | Cabecera a la izquierda | Color de fondo en tablas y celdas | Imágenes de fondo en tablas y celdas |
