Dreamweaver CC 2017 esencial

Creación de tablas con Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
Las tablas se usan cada vez menos para maquetar los contenidos, pero se siguen utilizando constantemente como forma de organizar datos complejos. Veremos en este vídeo cómo crear tablas en Dreamweaver y cómo formatearlas.

Transcripción

(hombre) Una forma tradicional de guardar información compleja siempre ha sido la utilización de tablas. Hoy en día las tablas se utilizan mucho menos se suelen utilizar más elementos de listas, ordenadas o desordenadas, y sobre estos, pues aplicando diferentes clases. Pero de todas formas sigue siendo útil para cierto tipo de datos. Vamos a ver cómo añadir tablas. Voy a irme al DOM, voy a seleccionar el último elemento de la sección en este artículo y después de esta lista voy a añadir una tabla. Para ello me me voy al menú "Insertar" y dentro de insertar, el botón "Table". Selecciono que la añada después y me nuestra un menú para definir cómo se va a ver la tabla. En realidad me la va a dar prácticamente hecha. Las tablas tienen filas, que son las líneas horizontales y columnas, que son las verticales, entonces lo primero que me pide es definir cuántas filas y cuántas columnas. Por ejemplo, cuatro filas y cinco columnas. En segundo lugar me pide el "Ancho de la tabla", aquí puedo definir con un ancho fijo, por ejemplo, de "x" píxeles o puedo pedir que, por ejemplo, ocupe el total de la página o, por ejemplo, en mi caso el 80 % del ancho en porcentaje. Me pide si quiero que tenga borde, ese borde va a ser un borde que va a aparecer alrededor de la tabla. Todo esto se va a definir dentro de la HTML. Si yo le pongo que tenga 0 píxeles va a aparecer sin ningún borde. El "Relleno" de celdas que significa que es una especie de "padding" que va a tener cada una de las celdas interno a ellas, por ejemplo, puedo pedir que tenga 2 píxeles. El "Espacio" entre las celdas, o sea, que haya una distancia entre una celda y otra celda de tal manera que va a haber un espacio vacío entre una celda y otra celda. Voy a mantenerlo como 0 para que salgan todas ellas pegadas. Luego como características de "Accesibilidad" pues hay que añadir un "Texto" y un "Resumen" de lo que se va a mostrar, por ejemplo, "Tabla de datos" y aquí, pues pondría una explicación un poquito más larga acerca de ello. Pulsaría en "Aceptar" y aquí me ha generado esa tabla, como la ha hecho sin borde, entonces no aparece absolutamente nada pero si lo pongo en la vista de "Diseño" pues se ven, efectivamente, cada una de las celdas que voy a tener. Yo puedo escribir en la parte superior "nombre", aquí podría poner "apellidos" en el siguiente podría poner "puesto" en el siguiente podría poner "tiempo" y en el siguiente pues, podría poner si "tiene premio" o "no tiene premio". Luego aquí iría añadiendo "Valores", por ejemplo, Jorge, Juan y Pedro. Podría añadir diferentes apellidos, y podría ir poniendo las distintas posiciones. Si me vuelvo otra vez a la vista, "En vivo" veo como queda efectivamente toda esta tabla. Haciendo clic sobre esta tabla, puedo también ver sus opciones, de hecho al hacer clic sobre ello veo que, en realidad, me permite visualizar esa tabla con líneas o visualizarla sin líneas, no es que vaya a verse así en la página web final, sino que va a hacerlo solamente para permitirme trabajar más fácilmente. Si me voy al DOM, podemos ver cuál es la estructura HTML de esta tabla. Tenemos, por un lado "Caption", que sirve para añadir el título, es el título que le puse, aquí en realidad, no está dentro estrictamente de la tabla. La tabla empieza con el "tbody" que es el cuerpo de esa tabla. Cada fila va a venir como una etiqueta "tr" y cada celda como una etiqueta "td". De hecho también podría tener etiquetas "th" que sirven para añadir encabezamientos y que suelen servir para esto que pone de nombre, apellidos y tal... Así que podría volverme a la vista de "Código" y hacer que aquí, en vez de "td" apareciesen como "th". Podría sustituir uno solo, pero, para hacerlo mucho más cómodo, puedo utilizar el soporte para múltiples vectores, que se llama, y que permite, pulsando, con la tecla "Control" o con la tecla "Comando" en Mac hacer una selección múltiple, aquí lo podemos ver, voy seleccionando uno por uno cada uno de estos elementos, no estoy soltando la tecla, y estoy pinchando y arrastrando. Y cuando termine de hacer toda esta selección puedo escribir "th" y me lo sustituye en todos a la vez. Cuando lo pongo en la vista "En vivo" vemos que aparecen en negrita y eso es debido a que lo interpreta pues como, efectivamente, los encabezamientos de cada una de esas columnas. A partir de aquí, el siguiente paso tiene que ser organizar el aspecto de esa tabla y, para hacerlo, utilizamos el "Diseñador CSS", y lo vamos a hacer con propiedades que no tienen ninguna diferencia con el resto de las que conocemos. Por ejemplo, para trabajar con anchos, altos para trabajar con bordes, para trabajar con colores de relleno. Pero básicamente, esta sería la idea, ir seleccionando elementos e ir aplicándoles estilos. Por ejemplo, si yo quiero que toda la tabla del encabezamiento tenga un color determinado, pues necesito simplemente hacer una selección sobre este primer "tr" esa primera fila, una vez que lo tengo listo, me voy al "Selector", añado un selector, aquí vemos que efectivamente, me selecciona ese "tr", y ya solo me queda seleccionar el color de fondo, seleccionar un color blanco, por ejemplo y con esto me pone el color blanco, pero, me pone el color blanco en ella y en todas las otras, bueno eso es debido a que todos estos elementos, voy a volverme al "Código" todas estas filas son etiquetas "tr". Dentro de Dreamweaver podemos aplicar modificadores sobre los selectores y en esta caso el modificador que me interesa utilizar va a ser el modificador ":first-child". ¿Para qué sirve? Pues para hacer que este estilo en concreto se aplique solamente sobre la primera fila o mejor dicho, sobre la primera ocurrencia de ese selector en concreto, y así ya he conseguido que tenga una "tr", solamente una, que es la que tenga ese color,

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.