Índice

El formato de las celdas

1. El ancho de las celdas

Utilice la propiedad width de la categoría Diseño. Recuerde que la suma de los anchos de la primera fila de la tabla debe ser imperativamente igual al ancho total de la tabla para que esta esté bien estructurada y no haya problemas en la vista. Recuerde también que bastará con indicar el ancho de las celdas de la primera fila. Es posible no especificar el ancho de la tabla.

En el siguiente ejemplo, hemos usado el selector de etiquetas <th> para dar formato a la primera fila de la tabla.

images/12OWT-17.png

2. Los bordes de las celdas

Para aplicar bordes a las celdas de la tabla utilice la categoría Borde.

En este ejemplo, se ha creado una clase llamada .celda. Será la clase que se aplicará a las celdas de la tabla. Los bordes son iguales en todos los lados, sólidos, estrechos y negros (border: thin solid #000;). El texto tiene una alineación centrada.

images/12OWT-18.PNG

Para que los bordes de las celdas de la tabla se combinen bien y no aparezcan desdoblados, como es el caso ahora, en el selector .tabla, categoría Borde, utilice la propiedad border-collapse, con el valor collapse.

images/12OWT-19.PNG

Para tener una tabla más « despejada », es posible añadirle un relleno (propiedad padding) a la clase .celda que se aplicará a las celdas.

images/12OWT-20.PNG

Las celdas de encabezado <th> tienen también bordes iguales a las demás celdas.

images/12OWT-21.PNG

3. Resaltar una celda

Es posible crear una clase para resaltar una celda en particular. En este ...