Unidad 7. Tablas (IV)

7.5. Formato de tabla

Las propiedades de la tabla se especifican a través de su inspector de propiedades. En este caso, se crearán atributos para la tabla. Pero algunos de estos valores, como el ancho, los podemos especificar mediante CSS.

A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha de la pantalla), el borde de la (en Col. borde) o los valores de relleno y espaciado de la celda.

Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores.

La parte superior del inspector de propiedades nos permite alternar entre las propiedades HTML, que en este caso sirven para especificar las propiedades del texto que se insertará dentro de la celda (o celdas) seleccionada, y la propiedades CSS para definir los estilos.

La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo (que es preferible definir con CSS), la alineación del contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamaño (An. y Al.) (en Fnd). Si no queremos que el tamaño se ajuste al contenido, marcamos la opción No aj. y si queremos convertirla en un encabezado, basta con marcar la opción Enc..

 

• Para practicar puedes realizar el Ejercicio paso a paso Modificar las propiedades de la tabla.

7.6. Formato CSS

Como cualquier elemento, podemos cambiar el aspecto de la tabla definiendo propiedades CSS.

• Los selectores.

Podemos definir una clase y aplicársela a la tabla desde el panel Propiedades, o si es una tabla en concreto, asignarle un ID y definir las propiedades para ese ID.

Pero ¿y si queremos editar las propiedades de las etiquetas que forman la tabla? Fijémonos en el aspecto de la barra de estado cuando tenemos el punto de inserción en una celda:

<table> <tr> <td>

Vemos que con el selector table nos referimos a la tabla completa. Con el selector tr hacemos referencia a las filas y con el selector td hacemos referencia a las celdas. Cuando las celdas sean encabezados, en vez de td, emplearemos el selector th. Observa que no hay un selector para referenciar a las columnas enteras, aunque sí existe un método empleando etiquetas <col />, es más avanzado y no lo veremos en este curso.

Podemos crear clases y asignarlas a la tabla, a una fila o a una columna. Recuerda que podemos emplear selectores compuestos. Así para referirnos a las filas de una tabla con la clase miclase, lo haremos con el selector .miclase tr, y emplearemos .miclase td para referirnos sus celdas.

 

Nota: Si al crear una página definimos las propiedades del texto empleando las Propiedades de la página, Dreamweaver crea una regla con el selector body,td,th. Es decir, aplica el mismo estilo a la página, a las celdas y a los encabezados. Esto hará que por ejemplo, si cambiamos la fuente de la tabla, el cambio no se aplique ya que prevalece la generada por Dreamweaver, por ser más concreta. Esto puede entrar muchas veces en conflicto. Para evitarlo, lo mejor es editar el selector dejándolo sólo como body. Recuerda que para editar un selector, hacemos clic derecho sobre la regla en el panel Estilos CSS, y elegimos Editar selector en el menú contextual.

 

• Propiedades.

Podemos aplicar la mayoría de propiedades que ya hemos empleado a las tablas, filas y columnas: fuente, tamaño, color, imagen de fondo.

Existen algunas propiedades CSS específicas de las tablas, como el borde colapsado. Dreamweaver no nos permite asignar estos estilos con los asistentes, así que los veremos más adelante.

Un estilo muy útil es el que nos permite centrar la tabla en la página. Para ello, debemos editar los márgenes izquierdo y derecho (categoría Cuadro), estableciendo el valor auto para ambos.

Otro aspecto que facilita ver los datos en la tabla son las filas alternas. Para hacerlo, no tenemos más que crear una clase que, por ejemplo, cambie el color de fondo, y aplicarla a filas alternas.

 

• Para practicar puedes realizar el Ejercicio paso a paso Modificar el estilo de la tabla.

Pág. 7.4

Atrás  Inicio  Adelante





Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.