Atributos de las Tablas – Parte III

Ahora veremos algunos atributos que controlan la forma en que se presentan los contenidos dentro de la tabla y las celdas: Cellspacing y cellpadding.

Atributo Cellspacing

Cellspacing es el espacio que existe entre los bordes de las celdas, es un espacio exterior a la celda. El valor de cellspacing se expresa en pixeles.

Cellspacing afecta a toda la tabla, así que se aplica únicamente a la etiqueta <table>, no tiene ningún efecto al aplicarla a las etiquetas <tr>, <td> o <th>.:

<table cellspacing=”valor numérico en pixeles”>

cellpadding1
Aplicación del atributo cellspacing a la etiqueta <table>

En el siguiente ejemplo se muestra la aplicación el atributo cellspacing y cómo afecta la presentación de las celdas dentro de la tabla.

cellpadding2
Efecto del atributo cellspacing en la apariencia de la tabla.

 

 

Atributo Cellpadding

Cellpadding establece la distancia que existe entre el borde de la celda y el contenido dentro de la celda. El valor de cellspadding se expresa en pixeles.

Cellpadding controla la apariencia interna dentro de la celda, crea una especie de almohadilla (pad) alrededor del contenido.

En el siguiente ejemplo se ve el efecto de utilizar o no cellpadding.

cellpadding3
Fragmento de documento HTML, donde se muestran 2 tablas para ver la diferencia entre cellspacing y cellpadding.

Cuando no se utiliza el atributo, este por defecto toma el valor de 0. En la tabla 1 se coloca un valor de cellpadding=”10” y no se coloca atributo de cellspacing. En la segunda tabla se coloca un valor de cellspacing=”20” y no se coloca valor a cellpadding. La salida es la que se muestra a continuación:

cellpadding4
Salida con diferencia entre cellspacing y cellpadding.

Al aumentar el valor del atributo cellpadding aumenta la separación entre el borde de la celda y el contenido.

cellpadding5
Efecto de incremento del atributo cellpadding en la apariencia de la tabla y de las celdas.

 

 

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s