TABLAS CON HTML Y CSS

Transcripción

1 TABLAS CON HTML Y CSS Sesión 09 By Ing. David Gil

2 INTRODUCCIÓN Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo. Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos: By: Mg. Ing. David Gil

3 INTRODUCCIÓN Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos. A pesar de que las tablas HTML son fáciles de comprender y utilizar, son uno de los elementos más polémicos de HTML. El problema de las tablas es que no siempre se utilizan adecuadamente. Aunque parezca obvio, las tablas se deben utilizar para mostrar información tabular. Hasta hace unos años, las tablas también se utilizaban para definir la estructura de las páginas web. La cabecera de la página era una fila de una gran tabla, el pie de página era otra fila de esta tabla y la zona de contenidos estaba formada por varias columnas dentro de esa gran tabla. Aunque algunos malos diseñadores siguen utilizando hoy en día las tablas para definir la estructura completa de las páginas web, se trata de una técnica obsoleta y nada recomendable. El motivo es que se complica en exceso el código HTML y su mantenimiento es muy complejo. La solución correcta para definir la estructura de las páginas consiste en la utilización de hojas de estilos CSS. By: Mg. Ing. David Gil

4 ETIQUETAS PARA LA CREACIÓN DE TABLAS Etiqueta <table> <tr> <td> <th> <caption> <thead> <tbody> <tfoot> Descripción Se emplea para definir tablas de datos. Define cada fila de las tablas de datos. Define cada una de las celdas que forman las filas de un tabla, es decir, las columnas de la tabla. Define las celdas que son cabecera de una fila o de una columna de la tabla. Se emplea para definir la leyenda o título de una tabla. Se emplea para agrupar filas en una cabecera de una tabla. Se emplea para agrupar filas en una sección de una tabla. Se emplea para agrupar filas en un pie de una tabla. By: Mg. Ing. David Gil

5 ATRIBUTOS PARA LA CREACIÓN DE TABLAS Atributos abbr = texto Descripción Permite describir el contenido de la celda. headers = lista_de_id Indica las celdas que actúan como cabeceras para esta celda. Se indica como una lista de ID de celdas. scope = col, row, colgroup, rowgroup colspan = numero rowspan = numero Indica las celdas para las que esta celda será su cabecera. Número de columnas que ocupa esta celda. Número de filas que ocupa esta celda. By: Mg. Ing. David Gil

6 PROPIEDADES CSS

7 CSS BACKGROUND Las propiedades CSS Background se utilizan para definir los efectos de fondo de un elemento. Propiedad background backgroundattachment background-color background-image background-position background-repeat Descripción Establece todas las propiedades de fondo en una sola declaración Establece si la imagen de fondo se fija o se desplaza con el resto de la página. Especifica el color de fondo de un elemento. Especifica una imagen para utilizar como fondo de un elemento. Establece la posición de inicio de una imagen de fondo. Especifica como una imagen de fondo debe repetirse. By: Mg. Ing. David Gil

8 PREFIJOS DE COMPATIBILIDAD CSS3 Versión Navegador Prefijo Ejemplo Firefox moz- -moz-linear-gradient Chrome, Safari 4 -webkit- -webkit-gradient Crhome 10+, Safari webkit- -webkit-linear-gradient Opera o- -o-linear-gradient Internet Explorer 10+ -ms- -ms-linear-gradient Estándar W3C Ninguno linear-gradient Navegadores antiguos Sin soporte No soportan etiquetas de CSS3. By: Mg. Ing. David Gil

9 CSS3 BACKGROUNDS CSS3 contiene algunas propiedades nuevas de fondo, lo que permite un mayor control del elemento background. Propiedad background background-clip background-image background-origin background-size Descripción Establece todas las propiedades de fondo en una sola declaración. Especifica el área de pintado del fondo. Especifica una o más imágenes de fondo para un elemento. Especifica donde esta o están situadas las imágenes de fondo. Especifica el tamaño de la imagen o imágenes de fondo. Mg. Ing. David Gil

10 CSS3 COLORS CSS soporta nombre de colores, hexadecimal y colores RGB. Adicionalmente CSS3 introduce Colores RGBA. Son una extensión de los valores de color RGB con un canal alfa que especifica la opacidad de un color. El parámetro alfa (alpha) es un número entre 0.0 (totalmente transparente) y 1.0 (totalmente opaco) Colores HSL. Significa Hue (Tono 0-360), Saturation (Saturación 0% 100%) y Lightness (Luminosidad 0% - 100%) Colores HSLA. Son una extensión de los valores de color HSL con un canal alfa que especifica la opacidad de un color. Opacidad. La propiedad opacity establece la opacidad de un valor RGB especificado. El valor para esta propiedad va desde 0.0 (completamente transparente) y 1.0 (totalmente opaco) Mg. Ing. David Gil

11 CSS3 GRADIENTS Permiten mostrar transiciones suaves entre dos o más colores. CSS3 define dos tipos de gradientes: Gradientes lineales. Para crear un gradiente lineal debe definir al menos dos etapas de color. También se puede establecer un punto de partida y una dirección (o ángulo) junto con el efecto de degradado. Sintaxis background: linear-gradient(dirección/ángulo, color1, color2,..); Gradientes radiales. Un degradado radial se define por su centro. También es necesario definir al menos dos etapas de color. Sintaxis background: radial-gradient(forma, color-inicial,., color-final); Mg. Ing. David Gil

12 CSS3 permite añadir sombra al texto y a los elementos. CSS3 SHADOW Propiedad box-shadow text-shadow Descripción Agrega una o más sombras a un elemento. Agrega una o más sombras a un texto. Mg. Ing. David Gil

13 By Ing. David Gil LABORATORIO 09 Presentando información tabular con HTML y CSS

14 OBJETIVOS Al finalizar este laboratorio, los estudiantes serán capaces de: Presentar información tabular con HTML. Formatear la información tabular con CSS. By Ing. David Gil

15 ENTREGABLES 1) Incluir en su sitio web información tabular estilizada. By Ing. David Gil