Bordes de tabla en HTML 4

  • Por
Mostramos algunos atributos de table, válidos en HTML 4, para definir el borde de las tablas: especificar bordes de varios tipos, externos e internos.
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

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

yoxs

16/4/2009
como lo coloco para solo ciertas filas
Como puedo colocar la linea pero solo para cirtas filas. Gracias

salva-navas

10/7/2009
Bordes de tabla
¿Hasta qué punto son importantes los bordes de las tablas ahora que con CSS podemos hacer todas estas cosas aplicando estilos?

manuel

08/3/2010
gracias q bien me funciono claro q si y my facil...
gracias q bien me funciono claro q si y my facil...

gracias! de veras gracias..

Guillermo

31/3/2010
utilidad
Yo creo que para cosas muy simples en las que solo necesitas una tabla sin mas, es mas cómodo el lenguaje base que CSS

Ulises R

30/6/2010
Tablas HTML
Muy bien explicado, me sirvio bastante. Gracias

Shuberth

16/8/2010
Buena informacion
Excelente, es bueno saber que se puede colocar bordes a tablas a nuestro gusto,
Shuberth Chi Balam