Proyecto Web

En el tutorial de hoy, os enseñare a crear tablas y sus propiedades. En el diseño web de hoy en día, poco usamos las tablas, pero es importante saber crearlas y modificar sus propiedades,  porque para cosas concretas nos pueden sacar de algunos apuros.

Hace unos años, el diseño web de toda la estructura se hacía con tablas, así como la maquetación del contenido. Aún hoy, hay personas que las siguen usando, pero ya es una práctica un poco obsoleta.

Bueno, empecemos con la parte más importante la creación

Os voy a enseñar dos formar de crear las tablas, desde la ventana insertar y desde el menú principal, opción insertar.

En la primera opción, observamos en la ventana insertar en la pestaña común, el símbolo de tablas, para crear una, solo tenemos que hacer click en él. La venta insertar, resulta muy intuitiva para realizar nuestro diseño, ya que los símbolos son muy concretos.

Para la segunda opción, nos colocamos en el menú principal, insertar y vemos que la quinta opción es tabla, hacemos click y ya pasamos a crear la tabla.

Tras hacer click en una de las dos opciones anteriores, nos aparece la ventana siguiente, donde daremos las propiedades a la tabla,  algunas de ellas podrán ser modificadas después si no nos convence como la hemos creado.

Empezaremos explicando las propiedades de esta ventana, como vemos se separan en apartados, Tamaño de tabla, Encabezado, Accesibilidad.

Tamaño de tabla: resulta muy intuitivo, lo primero que vemos es el número de filas y columnas que queremos, el ancho de la tabla en el que podemos utilizar diferentes medidas, yo las que más uso son los píxeles y el %. Continuando, encontramos el grosor del borde, si queremos que al visualizar se vean los bordes en la tabla, indicamos su grosor. Relleno de celda, para dar un margen interno con los bordes de las celdas y por último espacio entre celdas, como el propio nombre indica es para dejar un margen entre las celdas, es el que utilizaremos en los ejemplos siguientes.

Como podéis ver en la imagen siguiente, encontramos dos imágenes, una con encabezado y otra que no, la diferencia es significativa. En una nos aparece alineado a la izquierda y sin negrita por defecto y en la otra aparece centrado y en negrita. La segunda imagen le hemos puesto un encabezado superior para que vieseis la diferencia de una y otra.

Continuamos con las propiedades de las tablas, en nuestro diseño web en muchas ocasiones manipularemos las propiedades de nuestras tablas desde esta ventana ya que nos facilita su modificación después de haberla creado.

Las opciones que encontramos son las mismas que en la ventana anterior, solo que más reducidas. La diferencia está en que aquí podemos aplicar una clase CSS a nuestro diseño de la tabla, lo que nos permite mejorar nuestro diseño y personalizarlo aún más.

Por último os enseñaré algunas de las opciones encontradas al hacer click con el botón derecho cuando tenemos seleccionada una tabla o unas celdas.

Si tenemos seleccionadas dos o más celdas nos permite combinarlas, es decir convertir las celdas seleccionadas en una sola.

También nos permite incluir filas y columnas, así como eliminarlas y modificarlas.

Bueno, eso es todo en este tutorial, espero os sea útil y os despeje alguna duda.