Atributos de las Tablas – Parte I

Existe una cantidad de atributos aplicables a las tablas, algunos aplicables a la etiqueta <table> en general y otros aplicables a las etiquetas <tr> y <td>.

Atributo Opciones Descripción
border Valor numérico Grosor del borde para la tabla.
Bordercolor Color, nombre, hexadecimal o RGB Color del borde de la tabla o celda.
bgcolor Color, nombre, hexadecimal o RGB Color del fondo: Tabla, filas o celdas individuales
cellspacing Valor numérico pixeles Espacio entre el borde de la tabla y el borde de la celda.
cellpading Valor numérico pixeles Espacio entre el borde de la celda y el contenido.
align left

center

right

Alineación horizontal de la tabla, o del contenido de las celdas
valign top

center

bottom

Alineación vertical del contenido de las celdas
height Valor numérico pixeles

o %

Alto de las celdas
width Valor numérico pixeles

o %

Ancho de la tabla o de las celdas
colspan Numero Numero de columnas que abarca una celda, por defecto es 1.
Rowspan Numero Numero de filas que abarca una celda, por defecto es 1.

Algunos atributos son aplicables a todos los niveles, es decir pueden aplicar a toda la tabla (<table>—-</table>) o pueden aplicarse a nivel de las filas( <tr>—</tr>) o a nivel de cada celda individual (<td>contenido</td>).

Atributo bgcolor

El atributo bgcolor se utiliza para colocar un fondo de color a toda la tabla, a una fila o a una celda en particular.

Por ejemplo, cuando se aplica el atributo bgcolor puede aplicarse en toda la tabla, en una fila o en una celda en particular.

Cuando se aplica un atributo en diferentes niveles, el que tiene preferencia es el último que se declara, si aplicamos el atributo bgcolor y le damos un color azul a la tabla, el color verde a una fila, y un color rojo a una celda, el color que tendrá esa celda es el color rojo, el color de la fila será verde y el resto de la tabla será azul. Es decir, el último cambio es el que se preserva.

tablaborder7
Fragmento de Documento HTML utilizando atributo bgcolor.

 

Esto produce la siguiente salida:

tablaborder8
Salida del navegador. Aplicando bgcolor a diferentes niveles, tabla, fila, celda. Mostrando que el ultimo cambio es el que se preserva.

Atributos border y bordercolor

El atributo border se utiliza para indicar el grosor del borde alrededor de toda la tabla y alrededor de cada celda, su valor expresa expresa el grosor en pixeles de la línea de borde. Si se omite no coloca ningún borde, lo cual equivale a border=”0”.

El atributo bordercolor asigna un color al borde de la tabla o de las celdas. Por defecto coloca un borde de color negro. El color que se le asigna sigue las mismas reglas de color ya discutidas anteriormente. Nombre de color estándar, Numero hexadecimal o números RGB.

tablaborder1
Fragmento de documento HTML. Tabla básica, sin atributos.

 

tablaborder2
Salida de una tabla sin ningún atributo utilizado. Aparece una tabla sin bordes, alineada a la izquierda.

 

En el siguiente ejemplo colocamos el atributo border con un valor de 1.

tablaborder3
Fragmento de documento HTML con border=”1″

Aparece un borde alrededor de la tabla y alrededor de cada celda.

tablaborder4
Salida del navegador. Aparece un borde alrededor de la tabla y alrededor de las celdas.

Los atributos border y bordercolor se aplican solo a nivel de tabla, el grosor del borde de las celdas permanece igual independiente del valor border que estemos utilizando.

tablaborder5
Fragmento de documento HTML utilizando los atributos border y bordercolor.

La salida del navegador se muestra a continuación:

tablaborder6
Salida con tabla con borde de 10 pixeles y color de borde rojo.

En el siguiente articulo abordaremos los atributos cellspacing y cellpadding, es todo por los momentos.

 

 

 

 

 

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