Atributos de las Tablas – Parte IV

En este artículo se tratan los atributos que permiten la alineación de la tabla y de los contenidos dentro de las celdas. Estos atributos son:

  • align
  • valign

Atributo align

Este atributo permite la alineación horizontal. Se aplica a las etiquetas:

  • <table>
  • <tr>
  • <td> y <th>

La estructura del atributo es:

<table align=”opción”>

<tr align=”opción”>

<td align=”opción”> o

<th align=”opción”>

Donde opción puede ser:

  • left : alineación a la izquierda. Cuando se omite esta es la opción por defecto.
  • center: alineación al centro.
  • right: alineación a la derecha.

Cuando se aplica a la etiqueta <table> controla el alineamiento horizontal de la tabla.

tablealign1
Ejemplo de atributo align aplicado a la etiqueta <table>

Esto produce la siguiente salida

tablealign2
Diferentes opciones de la alineación de las tablas.

Cuando se aplica a la etiqueta <tr>, <td> y <th> controla la alineación del contenido de las celdas.

<tr align=”opción”>   permite alinear el contenido de todas las celdas de una fila.

<td align=”opción> permite alinear el contenido de una celda en particular.

tablealign3
Ejemplo de aplicación del atributo align a las etiquetas <tr> y <td>.

En el siguiente ejemplo se muestra la aplicación del atributo align a las etiquetas <tr> y <td>.

tablealign4
Salida del ejemplo de aplicación del atributo align a filas y celdas.

 

Atributo valign

Este atributo permite la alineación vertical del contenido de las celdas. Se aplica a las etiquetas:

  • <tr>
  • <td> y <th>

La estructura del atributo es:

<tr valign=”opción”>

<td valign=”opción”> o

<th valign=”opción”>

Donde opción puede ser:

  • top : contenido alineado a la parte superior de la celda.
  • center: contenido alineado en el centro de la celda. Cuando se omite esta es la opción por defecto.
  • bottom: contenido alineado a la parte inferior de la celda.

 

<tr valign=”opción”>   permite alinear el contenido de todas las celdas de una fila.

<td valign=”opción> permite alinear el contenido de una celda en particular.

En el siguiente ejemplo se muestra la aplicación del atributo valign a las etiquetas <tr> y <td>.

tablealign5
Aplicación del atributo valign a las etiquetas <tr> y <td>.
tablealign6
Salida del ejemplo de aplicación del atributo valign a filas y 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