Bordes de tabla en HTML 4

Como ya vimos en nuestro manual de HTML, en los capítulos sobre trabajo con tablas, que se puede asignar un borde a las tablas. Para ello utilizábamos el atributo border, pero en HTML 4 existe otros atributos para definir cómo queremos que sean los bordes de las tablas.

Bordes externos de las tablas

Veamos el atributo que podemos usar para definir distintos tipos de borde externo en una tabla.

El atributo en concreto para definir el tipo de borde externo se llama FRAME y se utiliza en la misma etiqueta TABLE. Sus valores posibles son los siguientes:

frame = void | above | below | hsides | lhs | rhs | vsides | box | border

Paso a describir cada uno de los distintos valores posibles, que afectan sólo al borde externo de la tabla, quedando los bordes de las celdas inalterados:

• void: Ningún borde externo
• above: Sólo aparece el borde superior
• below: Sólo el borde inferior de la tabla
• hsides:Se mostrará sólo el borde de arriba y abajo.
• vsides: Sólo los bordes de los lados izquierdo y derecho
• lhs: Se mostrará tan solo el borde izquierdo
• rhs: Se mostrará solamente el borde derecho
• box: Los 4 bordes
• border: También se mostrarán los 4 bordes

Veamos un par de ejemplos de uso del atributo FRAME en tablas:

Tabla sin bordes externos (frame="void")

1	2	3
4	5	6
7	8	9

Tabla con borde externo arriba y abajo (frame="hsides")

1	2	3
4	5	6
7	8	9

Bordes internos de las tablas

También podemos definir el aspecto de los bordes internos de las tablas con HTML 4. El atributo que debemos utilizar para especificar qué bordes internos deben mostrarse es RULES, que también se utiliza en la etiqueta TABLE.

Como bordes internos nos referimos a los bordes de las celdas de la tabla, puesto que cuando se define un borde en una tabla no sólo tiene borde la parte externa de la tabla, sino también cada una de sus casillas.

Los distintos valores que puede llevar el atributo RULES para definir los bordes internos son los siguientes:

rules = none | groups | rows | cols | all

Cuya explicación podemos ver a continuación:

• none: No se coloca ningún borde interno
• groups: Sólo se mostrarán bordes n los grupos de columnas o filas. (veremos más adelante como agrupar columnas o filas
• rows: Sólo aparecerán bordes entre filas.
• cols: Los bordes internos sólo aparecerán para separar columnas
• all: Se mostrarán todos los bordes internos

Ahora mostramos un par de ejemplos del atributo rules:

Sin ningún borde interno (rules="none")

1	2	3
4	5	6
7	8	9

Con borde interno para separar filas (rules="rows")

1	2	3
4	5	6
7	8	9