Tablas y columnas

Progreso de Lección:

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Un sitio web puede tener mucha información en texto, imágenes y otros archivos multimedia
Pero también existe información que necesitaremos colocar en tablas
Las tablas únicamente deben ser usadas para mostrar información tabulada, en el pasado se usaban para crear estructuras de diseño en el sitio web, pero no deben ser usadas para ese propósito
Para añadir la estructura en el diseño de tu sitio web debes usar HTML y CSS
Existen casos muy especiales en los que podemos usar las tablas para el diseño en HTML, por ejemplo en el caso de los e-mails, cuando envías e-mails en HTML, pero definitivamente no debemos usar así las tablas en un sitio web normal
Para crear nuestra primera tabla, vamos a añadir la etiqueta table y su etiqueta de cierre
Y vamos a crear algunas filas de información y añadir una lista de frutas y colores, pero antes añadiremos a nuestra etiqueta table el atributo border
Con este atributo podremos añadir un borde a nuestras celdas, de modo que podamos distinguirlas, en este caso el borde será de un pixel
Ahora añadiremos la etiqueta tr dentro de la etiqueta table
Tr viene de table row, que en español sería fila de la tabla
Así que creamos nuestra primer a fila con esta etiqueta
Y dentro de esta etiqueta podemos usar dos diferentes etiquetas más para añadir información
La primera es td que viene de table data, o dato de la tabla, aquí colocaremos nuestra información, o el contenido de esta celda
Así que vamos a iniciar con nuestra lista de frutas, vamos a iniciar colocando la primera que será manzana
Luego simplemente copiaremos esta fila, recuerda que la fila inicia en la etiqueta tr, así que copiamos desde la etiqueta tr y la pegaremos dos veces más
Ahora modificaremos la información dentro de td, para añadir nuestras otras frutas, colocaremos naranjas y uvas
Ahora guardamos nuestros cambiamos, vamos al navegador y al refrescar podremos  ver nuestra tabla
La cual tiene 3 filas, dentro de cada fila existe una celda y dentro de la celda tenemos en este caso nombres de frutas
Como mencione anteriormente, existen dos tipos de etiquetas que podemos añadir dentro de la etiqueta tr, así que vamos a regresar al editor para ver cuál es la otra etiqueta
Vamos a colocar una nueva etiqueta tr arriba de la primera fruta
Y colocaremos la nueva etiqueta llamada th, th viene de table header, o encabezado de la tabla
Como adivinaras, con th podemos añadir el nombre de una columna
Así que en este caso, el encabezado para esta lista será frutas
Ahora guardamos nuestros cambios y regresamos al navegador.
Al actualizar el navegador podremos ver que ahora tenemos el encabezado en la parte de arriba y tiene un estilo diferente al de las otras celdas
Este estilo es aplicado automáticamente por el navegador, pero al igual que como hemos mencionado con otras etiquetas, podremos cambiar el estilo usando css
Ahora vamos a crear otra columna en nuestra tabla
Para ello, únicamente debemos añadir más etiquetas dentro de nuestras actuales etiqueta tr, que representan nuestras filas
Así que debajo de frutas, colocaré una nueva etiqueta th y esta será la del color
Ahora vamos a guardar nuestros cambios y regresaremos al navegador
Si refrescamos podremos ver que se ha creado otra columna pero no las otras celdas
Estos se debe a que cuando colocas una nueva etiqueta dentro de la etiqueta tr, se crea automáticamente una nueva columna
Como puedes ver nos encontramos aún en la misma fila donde se encuentra el título frutas, y se ha creado otra celda a la par que es la de color, creando a su vez una nueva columna
Así que regresaremos a nuestro editor y vamos a seguir añadiendo los datos para las otras celdas que nos faltan
Así que vamos a ir añadiendo por ejemplo aquí en donde se encuentra la manzana, colocaremos otra etiqueta td y colocaremos roja
En naranja igualmente añadiremos otra etiqueta td, y colocamos naranja y en uva hacemos lo mismo y colocamos morado
Ahora guardamos nuestros cambios, regresamos al navegador y refrescamos
Y como puedes ver ahora tenemos completa la columna para los colores
Muy bien, ahora intentemos algo más, supongamos que deseamos añadir otra celda con información en la columna de los colores
Vamos a regresar al editor de texto y añadiremos otra fila usando la etiqueta tr, ahora añadiremos una etiqueta td y colocaremos nuestro nuevo dato, esta vez será verde
Guardamos nuestros cambios, regresamos al navegador y actualizamos
Y como puedes ver el color se ha colocado bajo la columna de las frutas, y no bajo los colores como nosotros lo deseábamos
Entonces, como podemos añadir esta celda a la columna de los colores sin añadir información en la columna de las frutas
Bien, para esto podemos simplemente añadir una etiqueta td vacía donde debe ir la columna de las frutas
Ahora guardamos nuestros cambios, regresamos al navegador y refrescamos
Y como puedes ver ahora el color verde se encuentra bajo la columna correspondiente

One Comment on “Tablas y columnas”

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