TABLAS

Continua leyendo de seguro 
te sera muy util!

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos. HTML dispone de una gran variedad de etiquetas para crear tablas, con sus atributos, de las cuales veremos una introducción en este artículo.


En un principio nos podría parecer que las tablas son raramente útiles y que pueden ser utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma organizada. En general, sirven para representar información tabulada, en filas y columnas. Esto es una realidad en los últimos años, desde que las tablas se han descartado para fines relacionados con la maquetación.

Además de los atributos específicos de cada celda o línea, las tablas pueden ser adicionalmente formateadas a partir de los atributos que nos ofrece la propia etiqueta <table>. He aquí aquellos que pueden parecernos en un principio importantes:


align: Alinea horizontalmente la tabla con respecto a su entorno.                        
background: Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor: Da color de fondo a la tabla.
border: Define el número de pixels del borde principal.
bordercolor: Define el color del borde.
cellpadding: Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing: Define el espacio entre los bordes (en pixels).
height: Define la altura de la tabla en pixels o porcentaje.
width: Define la anchura de la tabla en pixels o porcentaje.

Tablas en HTML. Atributos de la tabla y conclusión:

Los atributos que definen las dimensiones, height y width, funcionan de una manera análoga a la de las celdas tal y como hemos visto en el capitulo anterior. Contrariamente, el atributo align no nos permite justificar el texto de cada una de las celdas que componen la tabla, sino más bien, justificar la propia tabla con respecto a su entorno.
Vamos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la derecha y a la izquierda.

Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un aspecto más estético. En un principio puede parecernos un poco confuso su uso pero un poco de practica será suficiente para hacerse con ellos.
En la siguiente imagen podemos ver gráficamente el significado de estos atributos. 

Agrupar filas o columnas de tablas con HTML 4:

Con HTML 4 existen dos etiquetas que nos permiten agrupar filas o columnas de una tabla, para crear agrupaciones a las que se les puede definir un estilo de una sola vez, y no fila a fila o celda a celda.
Estas etiquetas son las siguientes:

<TBODY>: Para agrupar conjuntos de filas. 
<COLGROUP> : Para agrupar conjuntos de columnas.

Ambas etiquetas tienen soporte a partir de HTML 4, por lo tanto están disponibles en todos los navegadores modernos más comúnmente utilizados.

Agrupar filas con <TBODY>
Hacer grupos de filas nos sirve para especificar estilos a determinadas filas de la tabla, de una sola vez. El modo de uso es el siguiente:
<table cellspacing="4" cellpadding="4" border="2">
<tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
</tr>
<tbody align="center" bgcolor="#ff8800" valign="top">
<tr>
   <td>4</td>
   <td>
   Esta es una celda
   <br>
   5
   </td>
   <td>6</td>
</tr>
<tr>
   <td>7</td>
   <td>8</td>
   <td>9</td>
</tr>
</tbody>
</table>

Agrupar columnas con <COLGROUP>

Veamos ahora cómo se pueden agrupar varias filas con la etiqueta <COLGROUP>. El objetivo es básicamente el mismo que el de agrupar columnas, es decir, definir de una sola vez estilos específicos para un determinado conjunto de columnas de una tabla. El uso de la etiqueta, no obstante, es un poco diferente.
<table cellspacing="2" cellpadding="2" border="2">
<colgroup span=2 width="40">
</colgroup>
<tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
</tr>
<tr>
   <td>4</td>     
   <td>5</td>     
   <td>6</td>
</tr>
<tr>
   <td>7</td>
   <td>8</td>
   <td>9</td>
</tr>
</table>

Como se puede ver, COLGROUP se utiliza después de abrir la tabla y antes de empezar a meter los contenidos de filas y celdas.

El atributo span indica el número de columnas que se desean agrupar, empezando por la primera. En nuestro ejemplo se han agrupado las dos primeras columnas. Los otros atributos que podemos colocar en COLGROUP son los siguientes: align, id, class, style, valign, width y manejadores de eventos Javascript. Aunque Internet Explorer acepta otros atributos como bgcolor.