El documento describe dos modelos para el tratamiento de bordes en CSS: border-collapse para fusionar bordes y border-spacing para espaciarlos. También cubre estilos avanzados como empty-cells para ocultar celdas vacías, caption-side para cambiar la posición de los títulos y el uso de pseudoclases como hover para cambiar el estilo cuando el cursor pasa sobre una fila.

1. 10- TABLAS
Estilos CSS

2. TRATAMIENTO DE BORDES

3. • En CSS 2.1 se definen dos modelos diferentes para el tratamiento de bordes:
border-collapse y border-spacing.
• Border-collapse: fusión de bordes.
Cuando los bordes no son iguales se debe tener en cuenta la anchura de cada
borde, su estilo y tipo de celda.
• Toma los valores: Collapse, separate, inherit.
• border.-spacing: espaciado entre bordes.
• Toma los valores: <medida>, <medida><medida>,inherit.
NOTA: el tipo de celda puede ser definido con el atributo scope.
<td scope=“row”> celda de tipo fila
<td scope=“col”> celda de tipo columna
<td scope=“rowgroup”> celda de tipo grupo de filas
<td scope=“colgroup”> celda de tipo grupo de columnas

6. ESTILOS AVANZADOS
• Cuando existen celdas vacías y la
propiedad de los bordes de la
tabla es separate se puede usar
empty-cells.

7. • Puede tener los valores: show, hide, inherit.
• Hide indica que las celdas vacías no se deben mostrar.
NOTA: Internet Explorer 6 y anteriores no lo aceptan

8. • Cuando hay títulos en las tablas se coloca la etiqueta <caption>
• Se puede cambiar la posición de los titulos en CSS con caption-side:
NOTA: Opera 9 e Internet Explorer 6 con sus anteriores versiones no lo aceptan

9. USO DE PSEUDOCLASES
• Se pueden declarar pseudoclases al momento de editar un estilo: link, visited, hover,
active. Internet Explorer 6 y anteriores solo los soportan en enlaces.
• En las tablas se puede utilizar la propiedad hover para especificar un cambio de
atributos cuando el cursor pasa por la celda o fila donde se aplica la propiedad.