Manual de HTML para principiantes - Tablas (II)

ASPECTOS VISUALES DE LAS TABLAS
En XHTML los aspectos visuales de las tablas deben definirse con hojas de estilo, la razón es muy simple: si lo hacemos con html cada vez que queramos cambiar algo tendremos que hacerlo documento a documento. En una web de tipo personal con 5 o 6 documentos, la situación es manejable, pero imaginaros una web de un periódico por ejemplo, con miles de páginas ¿De verdad alguien sería capaz de cambiar miles de páginas sólo porque quiere alinear una celda a la derecha en vez de a la izquierda?

---

Posicionamiento de los contenidos dentro de las tablas
Por defecto, los contenidos de las celdas están alineados a la izquierda, pero podemos cambiarlo utilizando el atributo ALIGN.
Para centrar el contenido de una celda: align="center"
Para alinear a la derecha: align="right"
Para alinear a la izquierda: align="left"

---

Este atributo align se lo podemos aplicar tanto a la tabla , para centrar la tabla entera, como a las celdas en sí para centrar su contenido.

---

Para el posicionamiento vertical dentro de las tablas, se utiliza el atributo VALIGN. Por defecto el contenido se posiciona al centro. Vamos a ver cómo se cambia:
Para alinear arriba: valign="top"
Para alinear abajo: valign="bottom"
Para alinear al centro: valign="middle"

---

---

Espacio entre celdas
Podemos controlar el espacio entre las celdas con el atributo cellspacing.

---

Espacio alrededor del contenido de la celda
Podemos controlar el espacio entre el contenido de la celda y el borde con la etiqueta cellpading

---

Cambiando el tamaño de las tablas
En el tamaño de las tablas, sólo podemos controlar el ancho. Antes también se podía controlar el alto, pero ha sido rigurosamente prohibido y muchas veces ni siquiera es posible hacerlo funcionar. Por lo que ahora, el alto de las tablas depende del contenido que pongamos en ellas.
Sólo vamos a ver el ancho. Para definir el ancho de una tabla, utilizamos el atributo width. Podemos definir el ancho de una tabla tanto en píxeles como en tantos por ciento. Si lo hacemos con píxeles estaremos definiendo tablas inamovibles, si lo definimos de forma relativa, estamos definiendo tablas relativas que se amoldan al tamaño de la ventana.

---

Tabla con el tamaño definido en pixeles:

---

Tabla con el tamaño definido en tantos por ciento:


Para comprobar la diferencia real entre una y otra tabla cambia el tamaño de la ventana empequeñeciéndola, verás cómo en el primer caso, el tamaño de la tabla permanece inalterable y te sale una barra de scroll horizontal. En el segundo, en cambio, el tamaño de la tabla cambia y se ajusta al tamaño de la ventana.

---

EL ATRIBUTO SUMMARY
El atributo summary es fundamental para todas aquellas personas que acceden a nuestros contenidos con navegadores especiales. Summary significa resumen y exactamente eso: un resumen del contenido de la tabla. Los navegadores especiales, por ejemplo de voz, acceden al contenido de las tablas celda por celda, consecutivamente. Si les proporcionamos al principio de la tabla un pequeño resumen del contenido sabrán si les interesa o no sin tener que leer celda por celda.