Atributos de las Tablas – Parte II

En la parte I de los Atributos de las tablas habíamos mencionado que las tablas tienen atributos que son aplicables a diferentes niveles de la estructura de la tabla, es decir pueden aplicar a la tabla entera o a una celda en particular.

Se trataron algunos atributos como border, bordercolor, bgcolor. En este artículo continuaremos con el uso de otros atributos.

Atributo background

El atributo background se utiliza para colocar una imagen de fondo a toda la tabla, a todas las celdas en una fila o a una celda en particular. La imagen se coloca haciendo referencia a un archivo de imagen.

El formato del atributo es como se muestra a continuación:

<table background=”dirección y nombre del archivo de imagen”> ,

<tr background=”dirección y nombre del archivo de imagen”>

<td background=”dirección y nombre del archivo de imagen”>

Hay que tener en consideración el tamaño en pixeles de la imagen que queremos colocar como fondo de tabla o de celda, si el tamaño de la imagen es muy grande con respecto al tamaño de la tabla, la imagen saldrá incompleta.

En el siguiente ejemplo colocaremos esta imagen dentro de una tabla. El archivo está en la misma carpeta que el documento html y tiene nombre: mex.jpg.

mex
Imagen de 1296 x2304 a ser utilizada como imagen de fondo.

Esta es una imagen de 1296 x 2304 pixeles, lo cual es bastante grande.

tablesatr3
Fragmento de documento HTML para insertar imagen de fondo.

 

Al colocarla como fondo de la tabla, solo la parte superior izquierda de la imagen se colocará como fondo de la tabla tal y como se muestra en la siguiente figura.

tablesatr2
Tabla con imagen de fondo. La imagen es mas grande que la tabla. la imagen aparece recortada.

Si intentamos colocar la imagen a celdas en particular solo aparecería la porción izquierda de cielo gris de la imagen.

tablesatr4
Se esta utilizando la imagen como fondo en la celda inferior izquierda, aparece aun mas recortada.

 

Atributo Width

El atributo width establece el ancho de la tabla o el ancho de cada celda individual. El valor de width puede indicarse en pixeles o como un %.

Cuando se utiliza en la etiqueta <table> establece el ancho de la tabla. Su estructura es:

<table width=”500”>, establece el ancho de la tabla en 500 pixeles.

<table width=”50%”>, establece el ancho de la tabla en 50% de la ventana.

En el siguiente ejemplo se utiliza un ancho de 50% de la ventana.

tablewidth1
Fragmento de documento HTML con asignacion de ancho de la tabla a 50% del tamaño de la ventana.

En la salida se puede notar que la tabla ocupa 50% de la ventana.

tablewidth2
Salida con tamaño de la tabla a 50% del tamaño de la ventana.

Ahora mostraremos el ancho utilizando pixeles.

tablewidth3
Fragmento de documento con asignación de ancho de la tabla a 600 pixeles.

Esto produce la siguiente salida:

tablewidth4
Salida con ancho de tabla en 600 pixeles.

También podemos aplicar width para establecer el ancho celda por celda.

Y tiene la siguiente estructura:

<td width=”50”>, establece el ancho de la celda en 50 pixeles.

<td width=”50%”>, establece el ancho de la celda en 50% del ancho de la tabla.

También se puede utilizar en la etiqueta <th>.

<th width=”50”>, establece el ancho de la celda en 50 pixeles.

<th width=”50%”>, establece el ancho de la celda en 50% del ancho de la tabla.

tablewidth5
Fragmento de documento con atributo width aplicado a las etiquetas <table> y <th>
tablewidth6
Salida con tabla con columnas de 200 y 400 pixeles de ancho.

Si utilizamos diferentes width en la misma columna, se preserva el ancho mayor para todas las celdas en esa columna, por ejemplo, si en la primera fila establecemos un ancho de 200 pixeles para la segunda columna, y en la segunda fila establecemos un ancho de 300 pixeles y en la tercera fila establecemos un ancho de 400 pixeles para la segunda columna, el ancho de la segunda columna se establecerá en 400 pixeles para todas las filas.

tablewidth7
Al aplicar diferentes anchos a la misma columna se preserva el valor maximo.
tablewidth8
Salida de tablas donde se preserva el valor maximo del atributo width.

 

 

Para el ancho de las celdas también se puede utilizar %, en este caso representa el % del ancho de la tabla.

tablewidth9
Fragmento de documento HTML donde se establece ancho de celdas en %

Lo cual produce una tabla con la primera columna con un ancho de 20% del ancho de la tabla y la segunda columna con un ancho de 80% del ancho de la tabla.

tablewidth10
Ancho de celdas en % del ancho de la tabla.

Atributo Height

El atributo height se aplica para asignar el alto de la tabla o de las celdas, el valor se asigna en pixeles. Cuando se aplica a la etiqueta <table> le asigna el alto a toda la tabla.

La estructura de este atributo es:

<table height=”500”>, establece el alto de la tabla en 500 pixeles.

<tr height=”150”>, establece el alto de las celdas en la fila en 150 pixeles.

<td height=”150”>, establece el alto de la celda en 150 pixeles.

<th height=”150”>, establece el alto de la celda en 150 pixeles.

Existen algunas reglas en cuanto al atributo height.

  • Si no se utiliza ningún valor para el atributo height, la tabla se configurará de tal forma que el contenido de las celdas siempre sea visible. El alto de la fila aumentara automáticamente para mostrar el contenido.
  • Cuando se utiliza en la etiqueta <tr> aplica a el alto de todas las celdas en una fila.
  • Cuando se aplica a <td> y <th>, no hay que colocar el valor del atributo en todas las celdas de una fila. Se aplica el valor máximo de height de la celda que se encuentre en esa fila.
  • Si el contenido no ajusta a la celda con el height establecido, el alto de la celda se ajustará automáticamente para que el contenido sea visible.

A continuación, se muestra el uso del atributo height en la etiqueta <tr> y <td>.

tablewidth11
Fragmento de documento HTML donde se establece el atributo height en las etiquetas <tr>, <td>.
tablewidth12
Atributo width aplicado a las etiquetas <tr>, <td> y auto ajuste al contenido.

 

 

 

 

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