Vamos a analizar a continuación el ejercicio de manejo de tablas con HTML.
Están listos.
Vamos
el objetivo del ejercicio es crear un proyecto para poner en práctica el concepto de tablas con HTML
y al finalizar deberemos observar lo siguiente según se muestra
como primer paso vamos a crear nuestro proyecto.
El nombre del proyecto es manejo tablas HTML y lo vamos a depositar en la ruta mostrada y damos clic
en Finalizar
como siguiente paso vamos a crear un archivo llamado estilos CSS así que vamos a crear un nuevo archivo
de tipo CSS.
El archivo se llama estilos y se deposita a nivel raíz por lo tanto el campo de folder está vacío.
Recordemos que no es necesario agregar la extensión punto CSS en automático al seleccionar el tipo de
archivo CSS va a agregar la extensión y damos clic en Finalizar
como siguiente paso vamos a modificar nuestro archivo índex punto HTML agregamos el Doctrine.
Iniciamos nuestro documento HTML y agregamos un cabecero.
También el meta de Charged y vamos a agregar un link hacia nuestra hoja de estilos estilos CSS
agregamos un título llamado ejercicio tablas HTML y cerramos nuestro cabecero ahora vamos a comenzar
con nuestro body y agregamos un título de tipo H1 con el texto de ejercicio tablas HTML y vamos a comenzar
a crear nuestra tabla.
En este caso va a ser una tabla con un ancho de 500 píxeles y también vamos a indicar que se va a mostrar
un borde.
En este caso el borde es de un píxel.
Posteriormente podemos agregar un título a esta tabla.
Para ello vamos a utilizar el elemento caption y agregamos el título de tabla.
Lenguajes de Programación y cerramos el título de esta tabla y comenzamos a agregar los renglones de
esta tabla.
Para ello abrimos la etiqueta Borrow y posteriormente este primer renglón va a ser para alimentos de
tipo Gelder.
Por lo tanto vamos a agregar un tipo T y Bolger.
Por lo tanto agregamos un elemento TH de Taiwo el Gelder y el primer Gelder que vamos a agregar es el
nombre.
Cerramos nuestro Bolger.
Posteriormente agregamos otro Gelder que va a contener el texto de descripción.
Cerramos esta etiqueta y agregamos una tercera etiqueta llamada creador y cerramos este Gelder y con
eso cerramos nuestro primer renglón el cual es un renglón que tiene tres columnas pero son de tipo Gelder
con los textos de nombre descripción y creador.
Ahora vamos a agregar un registro pero en este caso ya va a contener datos.
Para ello vamos a declarar un elemento de tipo T R pero vamos a agregar un estilo y en este caso el
estilo va a ser una clase llamada Routh 1.
Este estilo lo vamos a agregar a nuestro archivo estilos puntos CSS posteriormente agregamos una columna
en este caso ya vamos a utilizar la etiqueta de Tibol data y agregamos el texto IAVA y cerramos nuestro
primer dato vamos a continuar modificando nuestro archivo índex punto HTML posteriormente agregamos
otro elemento de tipo TD y en este caso agregamos el texto.
Desarrollo de aplicaciones generales.
Su fuerte está en las aplicaciones empresariales y cerramos nuestra columna y agregamos una tercer columna
en este caso el desarrollador de este lenguaje es James Gosling y cerramos nuestro último dato nuestra
última columna y con eso cerramos nuestro segundo registro ahora vamos a agregar un tercer registro
pero en este caso debido a que es un elemento también de datos vamos a agregar ahora otro registro y
en este caso este registro vamos a utilizar la clase Rog 2 y de esta manera cada uno de los registros
que vayamos agregando podemos ir modificando los estilos para que se vaya viendo el resultado deseado.
Según se mostró al inicio así que en este caso el registro 2 va a tener otro color y vamos a agregar
la siguiente columna con el siguiente texto Ya destruí cerramos nuestra columna la descripción de esta
columna es desarrollo aplicaciones para Internet mayormente enfocadas en el front end de las aplicaciones
web.
Cerramos esta columna y agregamos una tercer columna y el creador es Brendan Aicha y cerramos nuestra
columna y con eso también cerramos nuestro renglón y agregamos un último renglón en este caso vamos
a repetir el estilo.
Por lo tanto vamos a indicar que la clase que se va a utilizar es la clase de rock.
1 agregamos una columna en este caso el lenguaje de PHP póstumamente la descripción es lenguaje para
crear aplicaciones web de rápido desarrollo.
Cerramos esta etiqueta abrimos una columna más y el creador es Rasmus leaguer Dorff y cerramos nuestra
columna y también con eso cerramos nuestro registro y con eso cerramos también nuestra tabla.
Así que vamos a tener cuatro renglones uno es de tipo Gelder y tres de tipo data y cada renglón tiene
tres columnas.
Con eso cerramos también el bodhi y el documento HTML.
Recuerden que para cualquier duda pueden dar clic en el nombre del archivo.
Sin embargo se les solicita codificar línea en línea para que quede claro este ejemplo de tablas con
HTML ahora vamos a modificar nuestro archivo estilos pontos CSS y el primer elemento que vamos a modificar
es el body.
Así que vamos a los siguientes estilos al body de nuestro documento HTML modificamos el background con
el color siguiente.
Recordemos que el color está en código hexadecimal posteriormente indicamos el font family.
En este caso el font family de Comic Sans MS y con eso cerramos el body de nuestro documento HTML.
Ahora vamos a agregar el estilo para nuestro elemento de caption que es el título de nuestra tabla indicamos
que el alto de nuestro título va a ser de 30 puntos también el fondo Waite va a ser Bold y el color
va a ser el indicado.
Recordemos que está en código hexadecimal y con eso cerramos dos estilos para el elemento caption.
Ahora vamos a agregar los estilos para los elementos de h Tex.
Va a ser el centro el color también va a ser el indicado en código hexadecimal y también el color de
fondo.
En este caso también vamos a agregar este color en código hexadecimal y con eso cerramos los estilos
para nuestro elemento Th.
Ahora vamos a agregar los estilos para los elementos de tipo TD Text Line.
En este caso va a ser justificado el color también va a ser el indicado en código hexadecimal y el background
es opcional modificarlo si quitan los comentarios lo va a aplicar pero si lo dejamos entre comentarios
va a dejar el fondo que tenga por default y el 6 va a ser de tipo Smoot.
Así que la fuente va a ser de tamaño pequeño el vertical line se va a poner el texto a la mitad.
Por lo tanto utilizamos la propiedad de el y con eso terminamos los estilos de nuestro elemento de tipo
de posteriormente agregamos los estilos para nuestro registro 1 así que en este caso agregamos la clase
ROV 1.
Por ello utilizamos la notación de punto y agregamos el siguiente estilo agregamos que el color de fondo
va a ser el color indicado en código hexadecimal y también para el renglón 2 vamos a modificar el background
esto para que tengamos una diferencia de color entre cada uno de los registros de nuestra tabla de HTML.
Con esto terminamos nuestro archivo estilos puntos CSS
como siguiente paso vamos a ejecutar nuestro proyecto y el resultado es como sigue.
Podemos observar que hemos modificado el estilo de nuestro título también el estilo de nuestro título
de la tabla HTML y también hemos hecho lo siguiente en nuestra tabla HTML como primer lugar hemos modificado
los estilos de cada uno de los elementos que son de tipo Gelder así que este primer renglón que es un
T.R todos estos van a ser T.R
incluye cada uno de esos registros incluye tres columnas pero en este caso estos elementos son de tipo
Th.
Así que a estos elementos les hemos aplicado un estilo para que parezcan precisamente cabeceros de nuestra
tabla HTML tanto a los textos de nombre descripción y en este caso también el título de creador.
Y podemos observar que en este primer renglón hemos asignado un color en este caso el color blanco y
utilizamos cada uno de los elementos de tipo TD precisamente para ir agregando elementos de tipo dato
a nuestra tabla son tres elementos de tipo tben y a este primer renglón de tipo data le asignamos la
clase de rol 1.
Posteriormente a este segundo renglón de tipo data le hemos agregado la clase de tipo robados y podemos
observar que el color de fondo es distinto y así conforme vayamos agregando elementos a nuestra tabla
podremos ir modificando el estilo para que podamos observar claramente una diferencia entre los registros
y así podamos ir modificando la presentación de nuestra tabla HTML así que la idea de los estilos es
que podamos ir alternando entre un registro y otro y de esta manera poder identificar cada uno de los
elementos de nuestra tabla y poder leer los elementos más fácilmente como tareas extra.
Del ejercicio se deja realizar la inspección con el navegador web y entender cada uno de los elementos
que componen la tabla de la página web.
Además revisar los estilos CSS aplicados a cada elemento de la tabla HTML.
Recordar que la inspección del código HTML consiste en seleccionar una parte del código desde el navegador
web dar clic derecho y seleccionar inspeccionar.
Con esto van a poder realizar la inspección de los elementos de la tabla HTML
como conclusión.
Con este ejercicio hemos puesto en práctica el concepto de tablas con HTML hemos visto cada uno de sus
elementos así como aplicamos algunos estilos para mejorar la apariencia visual de nuestra tabla HTML.