Creación de tablas

La información mostrada en una página web es muy valiosa, sin embargo, su distribución, diseño y colocación en la pantalla, juega un papel importante, por ello, es necesario la creación de una tabla. Teniendo la gran ventaja de diseñar la estructura conforme a las necesidades requeridas para publicar los datos de la página web.

Cabe mencionar que la intersección de una fila con una columna, da lugar a una celda de la tabla y cada una de ellas posee propiedades individuales, característica idónea para poder colocar y distribuir información (textos, imágenes, animaciones y videos) dentro de un archivo html.

Entre las ventajas de una tabla se destaca: colocación de texto, imagen, animación y vídeo con relación a un texto requerido; otra característica es la facilidad de aplicar formato a cada celda sin afectar a la adjunta, algo relevante en el manejo de las celdas es el espacio entre cada una de ellas (cellspacing) o incluso el espacio del texto de la celda con respecto al borde de la misma (cellpadding), otro factor importante es poner una imagen como fondo de la tabla.

Después de crear una tabla, existe la posibilidad de modificar fácilmente su aspecto y estructura, puede llevar a cabo cualquiera de las operaciones siguientes:

 

Actividad de aprendizaje 6 parte 1

Creación de una tabla por medio de etiquetas

En el video 56 se explica brevemente el procedimiento para elaborar una tabla, empleando las etiquetas del lenguaje html en la vista código de Dreamweaver CS6, que permita una distribución, un diseño idóneo para la animación y video insertados previamente en el archivo presentacion.htm, la tabla consiste de 2 renglones y 2 columnas, en el primer renglón se escriben los encabezados de columna, en el segundo se incrusta en la primera columna la animación (portada.swf) y en la siguiente columna el video (presentacion.mp4), el ancho de la tabla es de 98%, se indica ver los bordes de la tabla, el espaciamiento entre celdas y el relleno de celdas.

 

Video 56. Creación de una tabla en el archivo presentacion.htm empleando etiquetas html.

 

Creación de una tabla por medio de etiquetas html

 

Actividad de aprendizaje 6 parte 2

Creación de una tabla usando software Dreamweaver CS6

Continuando con el manejo de las tablas dentro de una página web se realiza la actividad de aprendizaje que consiste en crear una tabla en cada especialidad de la escuela, mostrando el campo ocupacional del egresado al término de su Nivel Medio Superior. La tabla consiste de 6 renglones y dos columnas, el ancho de la tabla es de 98% del tamaño de la pantalla, el relleno de celdas es 4, el espaciamiento entre celdas tiene el valor 1 y el grosor del borde de la tabla es 1. En la columna izquierda de la tabla se escribe el nombre de la empresa y en la columna derecha se inserta una imagen con el logo (Negrino y Smith, 2012, pp. 267 - 294).

Al finalizar, la tabla debe estar centrada y se le da formato mediante la creación de clases (formatoencabezadotabla, formatocontenidotabla y formatoimagen) creada previamente y que lleva por nombre formatodocumentos.css

El procedimiento se realiza empleando la vista diseño de Dreamweaver CS6 con cada uno de los siguientes archivos:

aeronautica.htm

automotriz.htm

construccion.htm

electricidad.htm

mantenimiento.htm

soldadura.htm

En el video 57 se visualiza la creación de una tabla en la especialidad de técnico en aeronáutica para la distribución adecuada de la animación y video.

 

Video 57. Creación de una tabla en el archivo aeronautica.htm empleando el software Dreamweaver CS6.

 

Los nombres de empresas, imágenes, iconos y figuras (Interjet, Aeroméxico, American Airlines, Aviacsa, Volaris) utilizadas en el contenido del presente material didáctico digital (polilibro), son propiedad de cada autor intelectual y se respeta el derecho de autor de cada una de ellas, haciendo hincapié que el presente material es de uso académico y sin afán de lucro.

 

Creación de una tabla usando software Dreamweaver CS6

 

Continuar creando otra tabla en la vista diseño, mostrando el campo ocupacional del egresado al término del Nivel Medio Superior en el área de técnico en sistemas automotrices y las otras especialidades.

 

Creación de las tablas de las especialidades de la escuela, usando Dreamweaver CS6

Los nombres de empresas, imágenes, iconos y figuras (Ford, General motors, Nissan, Volkswagen, Peuget, Secretaría de Comunicaciones y Transporte, Aeropuerto y Servicios Auxiliares, Ingenieros Civiles Asociados, Gobierno del Distrito Federal, Casas Geo, Comisión Federal de Electricidad, Teléfonos de México, Siemens, Square de México, Cutler Hammer, Maquinaria Pesada, Constructura Nacional de Ferrocarriles, Petróleos Mexicanos, Sistema de Transporte Colectivo Metro, Lincoln Electric, American Welding Society) utilizadas en el contenido del presente material didáctico digital (polilibro), son propiedad de cada autor intelectual y se respeta el derecho de autor de cada una de ellas, haciendo hincapié que el presente material es de uso académico y sin afán de lucro.