A fin de aplicar diseños vistosos a la información de una página web, implementaremos estilos CSS en listas y tablas, en base a las recomendaciones oficiales de este lenguaje.

En ocasiones, por desconocer la forma de especificar diseños personalizados a una tabla y una lista, mediante el lenguaje CSS, se comete el error de mostrarlas en su estructura básica, y pasan desapercibidas por el usuario. Por lo tanto, definiremos selectores, propiedades y valores a las etiquetas de listas y tablas, para cumplir con las necesidades del proyecto.

Las listas tienen gran importancia a la hora de mostrar diferentes procedimientos. Al crearlas mediante el lenguaje HTML, son visualizadas con un estilo básico, el cual cambiamos con diferentes propiedades del lenguaje CSS, a fin de captar con mayor rapidez la atención del usuario. En la siguiente ilustración, se encuentra la visualización básica de una lista de tipo ul y otra de tipo ol.

061-01_0910_ilu01. Visualización básica de listas            

Para agregar un estilo diferente a cada ítem de una lista, es necesaria la propiedad list-style-type, la cual será agregada al selector li, y:

• En una lista desordenada, tenemos tres diferentes tipos de valor: square para mostrar cuadrados, disc para mostrar círculos rellenos, y circle para mostrar círculos sin relleno.

061-01_0910_ilu02. Estilos diferentes para una lista desordenada

• En una lista ordenada, es posible cambiar los estilos con diferentes valores disponibles en la página oficial de la organización W3C. Por ejemplo, tenemos lower-roman para número romanos en minúsculas, lower-greek para números griegos en minúsculas, y decimal-leading-zero para preceder el decimal por un cero.

061-01_0910_ilu03. Estilos diferentes para una lista ordenada

Para definir estilos a una tabla, creamos el selector con la etiqueta table en el documento CSS. Dentro de las llaves, es posible agregar:

• La propiedad border, con el valor en blue, para definir el color azul en la línea de borde, previamente especificada en el documento HTML.
• La propiedad border-collapse, con el valor en collapse, para unificar todas las líneas de las celdas y mostrar una sola, pues, cuando definimos el borde a una tabla, por defecto se visualiza doble.
• La propiedad text-align, con el valor en center, para alinear el texto al centro. También es posible especificar a la derecha o a la izquierda.
• La propiedad padding, con el valor en ocho píxeles, para agregar espacio a los cuatro lados del texto. Se agregó en el selector de las columnas y celdas, con la finalidad de tener más holgura entre las mismas.

061-01_0910_ilu04. Especificación de estilos a una tabla

Keynotes

• Las listas tienen gran importancia a la hora de mostrar diferentes procedimientos. Al crearlas mediante el lenguaje HTML, son visualizadas con un estilo básico, el cual podemos cambiar con diferentes propiedades del lenguaje CSS, a fin de captar con mayor rapidez la atención del usuario.
• Para agregar un estilo diferente a cada ítem de una lista, es necesaria la propiedad list-style-type, la cual será agregada al selector li.
• En una lista desordenada, tenemos tres diferentes tipos de valor: square para mostrar cuadrados, disc para mostrar círculos rellenos, y circle para mostrar círculos sin relleno.
• En una lista ordenada, es posible cambiar los estilos con diferentes valores disponibles en la página oficial de la organización W3C. Por ejemplo, tenemos lower-roman para número romanos en minúsculas, lower-greek para números griegos en minúsculas, y decimal-leading-zero para preceder el decimal por un cero.

Misión

Para aplicar diseños vistosos a la información de una página web, implementa estilos CSS en listas y tablas, en base a las recomendaciones oficiales de este lenguaje de diseño.

Pasos a seguir:

• Ubica el estándar actual de CSS, y estudia un estilo diferente a los aprendidos.
• Crea un documento HTML con una lista y una tabla.
• Crea un documento CSS externo y especifica los estilos aprendidos.
• Presenta tu código a un experto mediante vKonnect, y anota sus sugerencias al respecto.

Sabrás que has tenido éxito cuando ejecutes tu código, mediante el navegador web de tu preferencia, y se muestren correctamente las especificaciones de estilos realizadas.

Modifica el código con base en las sugerencias, y compártelos tu vPages. Con tus compañeros debate sobre mejorar tu procedimiento.

Tiempo disponible: 3 horas.

La implementación de estilos CSS en listas y tablas, en base a las recomendaciones oficiales de este lenguaje, permite personalizar la presentación de cada una y llamar la atención del usuario de la forma deseada. Por ende, aplicamos diseños vistosos a la información de una página web. La creatividad y la precisión son determinantes para lograr diseños llamativos.