La finalidad original de las tablas es la de contener y organizar información pero como habrás leído en el curso, y además varias veces, las tablas han sido y son utilizadas para poder distribuir texto e imágenes en nuestras páginas Web ya que HTML no tiene un gran control sobre el posicionamiento de los mismos. Hoy día el uso de hojas de estilo y capas nos permite colocar texto e imágenes en cualquier posición de la pantalla por lo que hemos de procurar el utilizarlas para el fin para el que fueron creadas.
Las etiquetas imprescindibles para definir correctamente una tabla son solamente tres: <TABLE> y </TABLE> que abren y cierran la definición de una tabla; entre la etiqueta de apertura y cierre de la tabla podemos incluir: <TR> y </TR> cada pareja creará una fila en la tabla; dentro de las etiquetas que definen las filas introduciremos: <TD> y </TD> que definen cada una de las celdas existentes en cada fila.
| ETIQUETA | FUNCIÓN |
| <CAPTION> </CAPTION> | Es opcional, con el ponemos título a la tabla. Admite el atributo <ALIGN> que puede tomar los valores TOP o BOTTOM (arriba o abajo de la tabla). |
| BACKGROUND | Establece una imagen como fondo de la tabla. No es un elemento estándar HTML pero es admitido tanto por Nestcape como por Explorer. Su valor es la URl de la imagen. |
| BGCOLOR; | Define el color del fondo de la tabla, su valor puede especificarse con el nombre del color o con el foramto hexadecimal. |
| BORDER | Indica el grosor del borde de la tabla expresado en pixel. Si le asociamos el valor 0 el borde desaparecerá. |
| BORDERCOLOR | Establece el color del borde de una tabla. No es un elemento estándar HTML pero es admitido tanto por Nestcape como por Explorer, aunque su comportamiento es distinto, en el primero colorea solamente el borde externo de la tabla y el segundo el de la tabla y de las celdas. Admite como valores el nombre del color o su formato hexadecimal. |
| ALIGN | Alinea la tabla en relación con la ventana; su contenido puede ser LEFT(izquierda), RIGHT (derecha) o CENTER(centro). |
| CELLSPACING | Establece la separación entre el borde de la celda y el de la tabla. |
| CELLPADDING | Indica la separación entre el borde y su contenido. |
| WIDTH | Define la anchura de la tabla, se puede expresar en porcentaje o en pixel. |
| HEIGHT | Establece la altura de la tabla, se puede expresar en porcentaje o en pixel. aunque es admitido tanto po Explorer como por Nestcape no es un elemento incluido en el standard HTML 4.01. |
| ETIQUETA | FUNCIÓN |
| VALIGN | Alinea el contenido de las filas en sentido vertical. Admite los valores BASELINE TOP, BOTTOM y MIDDLE. |
| ALIGN | Ajusta el contenido de las filas en sentido horizontal. Admite los valores LEFT, RIGHT, CENTER y JUSTIFY (este último sólo en algunos navegadores). |
Las celdas admiten la mayor parte de los atributos especificados en los apartados de fila y tabla, por lo que no vamos a repetirlos. Podemos modificar el borde, las separaciones entre contenido y borde, las separaciones entre bordes, el color de fondo, la alineación, etc.
Atributos específicos de celda son aquellos que nos permiten expandir el tamaño de una celda de forma que ocupe el espacio de varias filas o columnas.
| ETIQUETA | FUNCIÓN |
| ROWSPAN | Permite extender la celda hacia abajo
tantas filas como le indiquemos. <td ROWSPAN="3"> ... </td>. |
| COLSPAN | Permite extender la celda hacia la derecha
tantas columnas como le indiquemos. <td COLSPAN="3"> ... </TD>. |
HTML 4.0 ha incluido varios elementos nuevos para poder controlar mejor el formato de las tablas, estos nuevos elementos son los siguientes:
| ETIQUETA | FUNCIÓN |
| TABLE | Misma etiqueta que la explicada anteriormente pero admite dos atributos más frame (indica que lados del marco que rodea la tabla serán visibles) y rules (determina los bordes que aparecerán en el interior de la celda). |
| THEAD | Agrupa las filas especificadas en el encabezado de la tabla para poder aplicarles rápidamente alineaciones y estilos . |
| TBODY | Agrupa las filas especificadas en el cuerpo de la tabla para poder aplicarles rápidamente alineaciones y estilos . |
| TFOOT | Agrupa las filas especificadas en el pie de la tabla para poder aplicarles rápidamente alineaciones y estilos. |
| COLGROUP | Crea un grupo de varias columnas para poder aplicarles un mismo formato. |
| COL | Define una columna dentro de una tabla. Debe de ir dentro de una etiqueta <colgroup>. |
Microsoft ha introducido recientemente una serie de elementos para generar tablas automáticamente a partir de un origen de datos (fichero de texto, fichero xml, etc.) para poder realizarlo necesitamos utilizar un objeto llamado Tabular Data Control (TBC) que es un control Active X que Microsoft proporciona. Para construir automáticamente nuestra tabla además del TBC necesitamos usar dos atributos más, el primero de ellos se denomina datasrc y es un atributo de la etiqueta tabla, su valor será el identificador utilizado en el TBC el segundo atributo se llama datafld y relaciona los datos con las celdas de la tabla, generalmente se incluye en una etiqueta <span> el código para una celda sería: