Tablas: Estilos básicos para bordes

Tal y como se mostró y comprobó en la realización de las prácticas del manual de XHTML, las tablas no muestran ningún borde por defecto, por lo que es necesario especificar ciertos aspectos de presentación.

En el siguiente ejemplo se define una clase que especificará un borde de tipo sólido de 1 px de ancho y color negro. La clase aplicará ese mismo borde para los th y td contenido en ella:

.normal {
width: 250px;
border: 1px solid #000;
}
.normal th, .normal td {
border: 1px solid #000;
}

Ahora se procedería a crear la tabla; por ejemplo:

<table class="normal" summary="Tabla genérica">
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
...
</table>

CSS 2.1 define dos modelos diferentes para el tratamiento de los bordes de las celdas, la fusión de bordes (border-collpase) y la separación de bordes (border-spacing):

fusión de bordes (border-collapse)

El modelo collapse define los siguientes valores:

- border-collapse: collapse: fusiona de forma automática los bordes de las celdas adyacentes.

- border-collapse: separate: fuerza a que cada celda muestre sus cuatro bordes. Es el valor que se utiliza por defecto, tal y como muestra la siguiente imagen:


En general, los diseñadores prefieren el modelo collapse porque estéticamente resulta más atractivo y más parecido a las tablas de datos tradicionales. El ejemplo anterior se puede rehacer para mostrar la tabla con bordes sencillos y sin separación entre celdas:

.normal {
width: 250px;
border: 1px solid #000;
border-collapse: collapse;
}
.normal th, .normal td {
border: 1px solid #000;
}
<table class="normal" summary="Tabla genérica">
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
...
</tr>
</table>

separación de bordes (border-spacing)

Este mecanismo de separación de bordes únicamente será aplicable y tendrá sentido si el border-collapse no se ha definido o si se ha definido como border-collapse: separate (el valor por defecto).

La propiedad border-spacing se utiliza para controlar la separación entre los bordes de cada celda.

border-spacing: 5px 15px; /* Separación vertical de 5px y horizontal de 15px */ border-spacing: 5px; /* Separación vertical y horizontal de 5px */ border-spacing: 0 5px; /* Separación vertical de 0px y horizontal de 5px */


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO