Headers y footers

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Podemos añadir más que filas y columnas en nuestras tablas. Podemos añadir etiquetas que le darán un mejor significado semántico a nuestra tabla. Como encabezados, cuerpos de tablas y pies.
Vamos a seguir usando la tabla que teníamos al inicio, y vamos a añadir más elementos en ella.
Primero añadiremos un encabezado para nuestra tabla, como lo imaginas, la etiqueta usada para el encabezado de la tabla debe ir en la parte superior de la misma
Así que haremos algo de espacio y añadiremos la etiqueta theader y la cerraremos donde terminan nuestros títulos que sería encerrando esta etiqueta tr
Como puedes ver la etiqueta theader se encuentra envolviendo nuestra primera etiqueta tr
¿Porque necesitamos la etiqueta theader?
En realidad esta etiqueta no añade información extra que sea visible para nuestro visitante, pero añade un significa semántico a nuestra tabla. Esto será útil en el caso de que nuestra tabla sea muy grande y compleja, añadir significado semántico a nuestro HTML ayuda a los buscadores como Google a indexar correctamente nuestras páginas
Haciendo más fácil que google entienda nuestro contenido y nos muestre como resultado en sus búsquedas
Adicionalmente, al igual que el atributo alt en las imágenes, ayuda a las personas con dificultades visuales, las cuales usan lectores de pantalla para acceder a la información en nuestro sitio web
Y por último nos ayudará cuando deseemos aplicar estilos usando css, ya que podremos aplicar un estilo únicamente a la etiqueta theader de la tabla
Ahora, así que como tenemos un encabezado para la tabla, también existe un pie para nuestra tabla
Esta etiqueta, al contrario de como supondrías, se coloca después de la etiqueta theader y no al final de la tabla, sin embargo aunque la debemos colocar aquí, cuando veamos la tabla en el navegador, esta etiqueta si aparecerá al final
Vamos a colocarla para ver cómo usarla, colocamos la etiqueta tfoot y la cerraremos
Crearemos una etiqueta tr para nuestra fila y dentro una etiqueta td y dentro de esta etiqueta td, colocaremos nuestro contenido, en este caso escribiré gracias por visitarnos
Guardamos nuestros cambios, regresamos al navegador y refrescamos la página
Y como puedes ver nuestro pie de tabla aparece en la parte inferior de la tabla, pero únicamente aparece en la columna de las frutas
Y en este caso deseamos que aparezca en ambas columnas
Así que para hacer esto, usaremos un atributo que se puede aplicar a nuestras celdas llamado column span
Así que regresamos al editor, y dentro de la etiqueta td añadiremos el atributo columnspan, y lo que deseamos es que esta celda se encuentre en dos columnas, así que el valor de este atributo será dos
Guardamos nuestros cambios y regresamos al navegador
Al refrescar podremos ver como ahora nuestro pie de tabla se encuentra dentro de las dos columnas
Existen dos atributos más de los que hablaremos en este video
El atributo aling o alineación y el atributo v-aling o alineación vertical
Regresemos al editor de texto, y lo que haremos es primero alinear nuestro pie en la tabla
Vamos a dejarla centrada en lugar de hacia la izquierda como se encuentra actualmente
Así que vamos a colocar el atributo aling dentro de la etiqueta td, y en el valor le colocamos center para centrarlo
Guardamos los cambios y regresamos al navegador
Y como puedes ver ahora el pie de la tabla se encuentra centrado
Podemos añadir otro tipo de alineación, como por ejemplo left para la izquierda, right para la derecha e incluso justify para justificado
Ahora veremos la alineación vertical, para ello debemos crear una celda con espacio suficiente para que se visualice correctamente la alineación vertical
Así que vamos a modificar la celda de th frutas, y añadiremos más texto, colocaremos, estas son mis frutas favoritas y añadiremos una etiqueta br antes de frutas para añadir un salto de línea
Ahora guardaremos el documento y vamos al navegador
Al refrescarlo podremos ver que tenemos la celda de color alineado verticalmente, la alineación de esta celda puede ser top hacia arriba, middle para el centro y bottom para abajo
Vamos a ver como añadir estas alineaciones
Regresamos al editor de texto y añadiremos el atributo valing y como valor añadiremos primero top, vamos a regresar al navegador y al refrescar podremos ver que ahora el texto color se encuentra alineado verticalmente arriba dentro de la celda
Regresamos al editor y cambiaremos el valor por bottom, guardamos y regresamos al navegador, al refrescar podremos ver que la alineación ha cambiado y ahora se encuentra en la parte inferior de la celda
Y por último regresaremos nuevamente al navegador y cambiaremos la alineación una vez más, ahora escribimos middle y al regresar al navegador podremos ver que el texto se encuentra ahora alineado verticalmente al centro de la celda
Ahora aprenderemos sobre el atributo borde, el cual añadimos al inicio del tutorial anterior
Vamos a cambiarlo hacia un valor exagerado para verlo más claramente, lo cambiaremos a 5, vamos al navegador lo refrescamos y como puedes ver al incrementar el borde, se aprecia en el área exterior de la tabla los 5 pixels de ancho del mismo
Pero no se incrementa el borde o el espacio dentro de las celdas, únicamente alrededor de la tabla
Para incrementar este espacio, necesitamos usar el atributo cell padding y cell spacing
Así que añadiremos primero el atributo cell padding a nuestra tabla, el cual se aplicara a todas las celdas en nuestra tabla y le daremos un valor de 5
Guardamos y refrescamos el navegador
Y como puedes ver ahora tenemos un pequeño relleno dentro de las celdas, es como una espacie de margen interno entre el contenido de la celda y el contorno de la misma
Además podemos incrementar el espacio entre las celdas, para ello usaremos el atribut cellspacing, añadiremos el valor de 5, guardamos, vamos al navegador y refrescamos
Y ahora como puedes ver tenemos este espacio extra entre las celdas y un margen interior en cada una de ellas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image