El desconocimiento del uso y la aplicación los
atributos colspan y rowspan conlleva a un creador de páginas
web a pasar largas horas en el diseño
de una tabla. Para evitar tal pérdida de tiempo, identificaremos el
procedimiento para utilizar cada uno de los atributos mencionados.
A fin de unir celdas de datos tabulados con
eficiencia, editaremos tablas en un documento HTML, según las recomendaciones
oficiales de este lenguaje.
Una tabla básica permite mostrar
de forma ordenada una información. Sin embargo, existen diversas modificaciones
posibles para crearlas profesionalmente. Con el lenguaje HTML es posible
agregar etiquetas a una tabla e identificar las cabeceras de columnas y filas,
las cuales son importantes en términos semánticos. Además, es posible unir
filas o columnas entre sí, para mostrar una sola información, como se observa
en la siguiente imagen.
061-01_0906_ilu01. Tabla con
especificaciones precisas
Para lograr la tabla mostrada es necesario
los siguientes pasos:
El encabezado de columnas
Al agregar encabezado en la
primera columna, indicamos el contenido principal o una guía en cada una de
ellas. Para ello, es necesario agregar una primera fila con la etiqueta tr y, dentro de ella, se crea el número
de etiquetas th correspondientes a
las columnas. Con el código a continuación se muestra en negrita la primera
fila.
061-01_0906_ilu02. Código HTML con encabezado de columnas
El encabezado de filas
Las filas también se identificadas
como encabezado para hacer referencias del contenido; por lo tanto, agregamos la
etiqueta th al inicio de cada
definición de filas creadas con la etiqueta tr.
De esta forma, la tabla es mostrada con los encabezados en negrita para así
diferenciarlos. Sin embargo, este estilo es posible cambiarlo mediante un documento
con lenguaje de diseño CSS.
061-01_0906_ilu03. Código HTML con encabezado
de filas
Unir datos en filas
Con la finalidad de unir o
expandir un dato en dos celdas de las filas utilizamos el atributo rowspan y en las columnas colspan. Para observar la unión en filas,
modificaremos las especificaciones de “universidad” y “fiesta” del siguiente
código, a fin de mostrarlas en una misma celda, y aplicaremos el mismo
procedimiento con los valores deporte y práctica, para lo cual:
- Definimos,
en una misma etiqueta td, los números
a mostrar en la misma celda.
- Agregamos
el atributo colspan en la etiqueta td.
- Especificamos,
como valor, el número dos, para indicarle al navegador la cantidad de filas
ocupadas por los datos.
061-01_0906_ilu04. Código de unión de
columnas
Unir datos en columnas
Para expandir las columnas, y
mostrar el “paseo en familia” todo el día domingo:
- Eliminamos
el “paseo con amigo”.
- Agregamos
el atributo rowspan en la etiqueta td correspondiente a paseo en familia.
- Especificamos
como valor el 2, con la finalidad de indicarle al navegador la instrucción de
mostrar las dos filas en una columna.
061-01_0906_ilu05. Código de unión de filas
Es necesario utilizar la definición
de tablas solo cuando sea necesario, debido a la dificultad de entendimiento
cuando especificamos muchas filas y columnas. Además, resulta complicado el
procedimiento de hacerle mantenimiento.
Keynotes
- Con el lenguaje HTML es posible agregar
etiquetas a una tabla e identificar las cabeceras de columnas y filas, las cuales
son importantes en términos semánticos. Además, es posible unir filas o
columnas entre sí, para mostrar una sola información.
- La tabla básica se crea con filas, columnas
y bordes. No obstante, al agregar encabezado en la primera columna, indicamos
el contenido principal o una guía en cada una de ellas.
- Las filas también pueden ser identificadas
como encabezado para hacer referencias del contenido; por lo tanto, agregamos
la etiqueta th al inicio de cada
definición de filas creadas con la etiqueta tr.
- Con la finalidad de unir o expandir un dato
en dos celdas de las filas utilizamos el atributo rowspan y en las columnas colspan.
- Es necesario utilizar la definición de
tablas solo cuando sea necesario, debido a la dificultad de entendimiento
cuando especificamos muchas filas y columnas. Además, resulta complicado el
procedimiento de hacerle mantenimiento.
RetoUne tres celdas de datos tabulados en filas y
columnas mediante un documento HTML. Utiliza el proceso de edición aprendido,
sigue las recomendaciones oficiales de este lenguaje y previamente pregunta a
tus compañeros cómo lo hacen ellos.
¡Comparte el resultado final del reto en tu vPages!
Tiempo disponible: entre 15 y 30 minutos.
CierreLa edición de tablas en un documento HTML, según
las recomendaciones oficiales de este lenguaje, permite optimizar el tiempo,
cuando es necesario aplicar diseños profesionales. Además, controlamos la unión
entre celdas de datos tabulados correctamente. Con organización y disciplina,
lograremos tablas organizadas con eficiencia.
