Logo

Atributos para filas y celdas de las tablas en HTML

En HTML se puede utilizar cualquier etiqueta dentro de la etiqueta <td>, con ello le podemos dar forma a su contenido. Las etiquetas que coloquemos dentro de la celda no modifican a las demás celdas, ni al resto de la página web. Y por supuesto, las etiquetas que coloquemos fuera de la celda no serán tenidas en cuenta por esta.

A partir de ahora tenemos que tener presente que cada celda es como si fuese una página independiente. Cada celda puede ser modificada por los atributos colocados dentro de su etiqueta, o si queremos que afecte a toda la línea dentro de su etiqueta <tr>. Pero actualmente se esta usando las hojas de estilo en cascada (CSS Styles), que ya veremos, para dar forma a las celdas.

Veamos los atributos que nos permiten modificar una celda o toda una línea:

align

Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.

valign

Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda.

bgcolor

Da color a la celda o línea elegida.

bordercolor

Define el color del borde.

Atributos para las celdas:

background

Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.

height

Define la altura de la celda en píxel o porcentaje.

width

Define la anchura de la celda en píxel o porcentaje.

colspan

Expande una celda horizontalmente.

rowspan

Expande una celda verticalmente.

El atributo height puede que no nos funcione en todos los navegadores, pero no debe preocuparnos porque la celda crece todo lo necesario en altura para que les colocamos les pueda caber.

Veamos un ejemplo con el atributo width, primero le daremos valores absolutos y luego porcentajes, y comprobaremos que el resultado no es el mismo:

<td width="80">
Dará una anchura de 80 píxeles a la celda. Sin embargo,
<td width="80%">
Dará una anchura a la celda del 80% de la anchura de la tabla.

Es necesario explicar que en algunas ocasiones el resultado que vemos en el navegador, de nuestra tabla, puede no ser el previsto. Esto puede deberse a que hemos utilizado dentro de una celda una palabra excesivamente larga, y aumente la anchura de la celda, para que la toda la frase siga en la misma línea. O si el texto es muy largo la celda aumentar en altura para poder mostrarnos todo su contenido.

De la misma manera, si le damos dos anchos diferentes a las celdas de una misma columna, el navegador no sabrá que hacer. Por todo esto tenemos que tener muy claro como es la tabla que queremos diseñar. Nunca esta por demás dibujarla en un papel si es complicada.

El HTML nos ofrece la posibilidad de fusionar celdas, como ya vimos gracias a los atributos rowspan y colspan. El valor que pueden tomar estos atributos es numérico, este número representa la cantidad de celdas fusionadas.

Por ejemplo:

<td colspan=”2”>

Fusiona la celda en cuestión con su vecina de la derecha.

En el navegador veríamos algo así:

Esta celda tiene un colspan="2", y vemos como estan fusionadas las dos celdas.

Celda normal

Otra celda

Veámoslo ahora con el otro atributo,

<td rowspan=”2”>

Expandirá la celda hacia abajo fusionándose con la celda inferior.

En el navegador se vería:

Esta celda tiene rowspan="2", por eso tiene fusionada la celda de abajo.

Celda Normal

Otra celda normal

El resto de los atributos son mucho más obvios y fáciles de utilizar por ello no los explicamos aquí.

 

Siguiente Tema: Las Propiedades de las tablas en HTML

PÁGINA PRINCIPAL DEL CURSO CREACIÓN DE PÁGINAS WEB EN HTML