Cuando dejamos de identificar la
cabecera, el cuerpo y el pie de página en una tabla, carece de sentido
semántico importante, por ejemplo, al momento de ser impresa en una navegador web. Por lo tanto, para asegurar una
correcta presentación de tablas, identificaremos su estructura mediante
etiquetas de HTML.
Con la finalidad de identificar semánticamente la
estructura de datos tabulados, crearemos tablas avanzadas en un documento HTML,
según las recomendaciones oficiales de este lenguaje.
Al marcar tablas en un proyecto dedicado
a internet, es importante prestar
atención a las etiquetas semánticas, para facilitar su entendimiento a otro
programador y a los diferentes navegadores web.
Para comprender su uso, en HTML se
identifica la cabecera con la etiqueta head,
el cuerpo con body y el pie de página
con footer.
061-01_0908_ilu01. Estructura básica de
código HTML
Tales etiquetas también se aplican
al utilizar tablas, con la diferencia de anteponerles la letra t; así, semánticamente, son
interpretadas por el navegador de forma similar a la humana. En este sentido,
para marcar la estructura de forma semántica:
- La
cabecera de una tabla se identifica con la etiqueta thead.
- El cuerpo
de una tabla se identifica con la etiqueta tbody.
- El pie de
página de una tabla se identifica con la etiqueta tfoot.
061-01_0908_ilu02. Código de tabla identificada
En el código anterior, la cabecera
son los días de la semana; por lo tanto, la etiqueta va a englobar el primer tr del código. El cuerpo es marcado en
la segunda fila de la tabla, con el cierre correspondiente, y el pie de página esta
conformado por la última fila de la tabla creada.
Mediante el navegador la tabla se muestra
sin ningún cambio aparente, esto se debe a su funcionamiento de forma
semántica, es decir, le da sentido al fragmento de código. Sin embargo, cuando
en lugar de identificar el pie de página en la última fila del código, lo
hacemos en la segunda, la tabla cambia al momento de presentarla al usuario y,
por ende, se muestra de última.
Tal cambio se debe a la
interpretación del navegador web, la
cual es:
- Primero,
la cabecera.
- Segundo,
el cuerpo.
- De último,
el pie de página.
La identificación de tfoot, thead y tbody a un tabla, también facilita el momento de agregar estilo,
mediante la creación del selector correspondiente en el domuento CSS. En el
ejemplo siguiente, observamos la especificación de background en color blue, para
todo thead del documento HTML.
061-01_0908_ilu04. Aplicación de estilo
al thead de una tabla
Keynotes
- Al marcar tablas en un proyecto dedicado a internet, es importante prestar atención a las
etiquetas semánticas, para facilitar su entendimiento a otro programador y a
los diferentes navegadores web.
- En HTML se identifica la cabecera con la
etiqueta head, el cuerpo con body y el pie de página con footer. Tales etiquetas también se
aplican al utilizar tablas, con la diferencia de anteponerles la letra t; así, semánticamente, son
interpretadas por el navegador de forma similar a la humana.
- La cabecera de una tabla se identifica con
la etiqueta thead.
- El cuerpo de una tabla se identifica con la
etiqueta tbody.
- El pie de página de una tabla se identifica
con la etiqueta tfoot.
- La identificación de tfoot, thead y tbody a un
tabla, también facilita el momento de agregar estilo, mediante la creación del
selector correspondiente en el domuento CSS.
RetoIdentifica semánticamente la estructura de una
tabla creada en un documento HTML, según las recomendaciones oficiales de este
lenguaje.
¡Comparte el resultado final del reto en tu vPages y pide a tus compañeros realizar
un debate sobre la importancia de tal procedimiento!
Tiempo disponible: entre 15 y 30 minutos.
CierreMediante la creación de tablas avanzadas en un
documento HTML, según las recomendaciones oficiales de este lenguaje, aportamos
sentido semántico a la página web en
creación; también, identificamos eficientemente la estructura de una tabla. Con
práctica y paciencia, crearemos correctamente tablas avanzadas para proyectos
de internet.
