tutorial de HTML

Las tablas en HTML son una de las formas más comunes de tabular el contenido alineándolo en filas y columnas.

La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>. Es decir:

<TABLE>
    [resto de las etiquetas]
</TABLE>

En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (table row) de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir que, para una tabla con dos filas:

<TABLE>
    <TR>
        [etiquetas de las celdas primera fila]
    </TR>
    <TR>
        [etiquetas de las celdas segunda fila]
    </TR>
</TABLE>

En el último nivel (dentro de las anteriores) están las etiquetas de cada celda (table data), que son <TD> y </TD> y las de encabezado (table header) que es <TH> y </TH>:

Dentro de las etiquetas TD se coloca el contenido (texto, imágenes, etc.) y dentro de las etiquetas TH un texto que, por defecto, se mostrará en negrita.

Hay que repetir la etiqueta tantas veces como celdas queremos que haya en esa fila:

<TABLE>
    <TR>
        <TH>
            TITULO O ENCABEZADO
        </TH>
    </TR>
    <TR>
        <TD>
            CONTENIDO
        </TD>
    </TR>
</TABLE>

Una etiqueta alternativa, permite añadir un título general a toda la tabla, un texto encima de esta que indica cuál es su contenido. Se consigue con la etiqueta <CAPTION> </CAPTION>:

<TABLE>
    <CAPTION>
        TITULO DE LA TABLA
    </CAPTION>
    [resto de las etiquetas]
</TABLE>

Por último, hay una serie de etiquetas opcionales que se utilizan para agrupar otras etiquetas.

COL (columna de una tabla) y COLGROUP (grupo de columnas de una tabla) se usan para agrupar columnas, mientras que THEAD (cabecera de tabla), TFOOT (pie de tabla) y TBODY (cuerpo de tabla) se usan para agrupar filas.

Este ejemplo es una tabla simple, con dos filas y tres columnas con un encabezado. Dentro de cada celda se incluye un texto:

<TABLE>
    <CAPTION>
        EJEMPLO DE UNA TABLA
    </CAPTION>
    <TR>
        <TH>
            COLUMNA 1
        </TH>
        <TH>
            COLUMNA 2
        </TH>
        <TH>
            COLUMNA 3
        </TH>
    </TR>
    <TR>
        <TD>
            fila1-celda1
        </TD>
        <TD>
            fila1-celda2
        </TD>
        <TD>
            fila1-celda3
        </TD>
    </TR>
    <TR>
        <TD>
            fila2-celda1
        </TD>
        <TD>
            fila2-celda2
        </TD>
        <TD>
            fila2-celda3
        </TD>
    </TR>
</TABLE>

Este es un ejemplo de una tabla simple:

¿Qué pasa si colocamos un número distinto de celdas en las filas? El navegador dibuja la tabla y la completa con espacios en blanco.

En el ejemplo anterior, eliminamos la fila1-celda2 y, para verlo claramente, vamos a agregarle un borde y ampliar el ancho de las celdas:

Como se vé, ese espacio vacío no queda en el medio sino al final de la fila.

Hasta ahora, en los ejemplos las celdas sólo contenían texto pero se puede poner cualquier otro elemento HTML, incluyendo imágenes, vínculos, lista, etc. Incluso, también puede ponerse otra tabla:

<TABLE BORDER=1>
    <TR>
        <TD>
            <IMG SRC="URLimagen">
        </TD>
        <TD>
            <TABLE BORDER=1>
                <TR>
                    <TD>1</TD><TD>2</TD>
                </TR>
                <TR>
                    <TD>3</TD><TD>4</TD>
                </TR>
            </TABLE>
        </TD>
    </TR>
</TABLE>

1 2 3 4

Cada etiqueta de una tabla posee una serie de atributos que le dan una gran flexibilidad.

Estos son los atributos del elemento TABLE:

Vamos a ver algunos de los más utilizados.

Una de las característica más evidentes de las tablas es los datos pueden ir enmarcados por un borde. Para esto le agregamos el atributo BORDER a la etiqueta TABLE, y ponemos un valor que indicará su ancho:

<TABLE BORDER=ancho>

Por defecto, el valor a BORDER es 1 por lo que, si no queremos verlo, debemos escribir BORDER=0.

Normalmente es el navegador el que se encarga de dimensionar el tamaño total de la tabla de acuerdo con el número de filas y columnas y, fundamentealmente, de acuerdo al contenido de las celdas, espesor de los bordes, etc. Sin embargo, a veces es necesario forzarlo para que la tabla tenga unas dimensiones totales mayores o menores de las que le corresponden, tanto en ancho como en alto. Esto se consigue añadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT, y dándoles un valor que puede ser un porcentaje, o a una cifra expresada en pixeles.

<TABLE WIDTH=400 HEIGHT=200>

Por defecto, las tablas son transparentes pero pueden tener un color de fondo, para ello usamos el atributo BGCOLOR="#XXYYZZ".

<TABLE BGCOLOR="#000000">

También es posible utilizar una imagen como fondo, para ello usamos el atributo BACKGROUND="URLimagen".

<TABLE BACKGROUND="URLimagen">

Por defecto, la separación entre las distintas celdas de una tabla es de dos pixeles pero eso puede modificarse con el atributo CELLSPACING. De forma similar, por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel pero se puede cambiar con el atributo CELLPADDING.

<TABLE CELLSPACING=10 CELLPADDING=5>

Estos son los atributos del elemento TR:

Y estos son los atributos de los elemento TH y TD:

Algunos de los atributos de las celdas son similares a los del elemento TABLE, tanto el ancho como el alto pueden establecerse añadiendo los atributos WIDTH y HEIGHT.

<TD WIDTH=400 HEIGHT=200>

Así mismo pueden tener un color o una imagen de fondo:

<TD BGCOLOR="#000000">
<TD BACKGROUND="URLimagen">

Normalmente, el contenido de una celda está alineado a la izquierda, el atributo ALIGN es el que se usa para modificarlo. Estos son los valores utilizados habitualmente:

<TD ALIGN="left">alineado a la izquierda</TD>
<TD ALIGN="right">alineado a la derecha</TD>
<TD ALIGN="center">centrado</TD>
<TD ALIGN="justify">texto justificado</TD>

Un par de atributos permiten que una celda se "expanda" abarcando otras. Medainte COLSPAN la extendemos horizontalmente y con ROWSPAN verticalmente:

Este es el modelo de una tabla con seis celdas, dos filas y tres columnas:

<TABLE BORDER=1>
    <TR>
        <TD>CELDA 1</TD>
        <TD>CELDA 2</TD>
        <TD>CELDA 3</TD>
    </TR>
    <TR>
        <TD>CELDA 4</TD>
        <TD>CELDA 5</TD>
        <TD>CELDA 6</TD>
    </TR>
</TABLE>

Ahora, vamos a extender la celda 1 para que abarque la celda 2:

<TABLE BORDER=1>
    <TR>
        <TD COLSPAN="2">CELDA 1</TD>
        <TD>CELDA 3</TD>
    </TR>
    <TR>
        <TD>CELDA 4</TD>
        <TD>CELDA 5</TD>
        <TD>CELDA 6</TD>
    </TR>
</TABLE>

Y también extendemos la celda 4 para que abarque la celdas 5 y 6:

<TABLE BORDER=1>
    <TR>
        <TD COLSPAN="2">CELDA 1</TD>
        <TD>CELDA 3</TD>
    </TR>
    <TR>
        <TD COLSPAN="3">CELDA 4</TD>
    </TR>
</TABLE>

En el otro sentido, extendemos la celda 1 para que abarque la celdas 4:

<TABLE BORDER=1>
    <TR>
        <TD ROWSPAN="2">CELDA 1</TD>
        <TD>CELDA 2</TD>
        <TD>CELDA 3</TD>
    </TR>
    <TR>
        <TD>CELDA 5</TD>
        <TD>CELDA 6</TD>
    </TR>
</TABLE>

Por último, combinamos ambos atributos y extendemos la celda 5 para que abarque la celdas 6:

<TABLE BORDER=1>
    <TR>
        <TD ROWSPAN="2">CELDA 1</TD>
        <TD>CELDA 2</TD>
        <TD>CELDA 3</TD>


    </TR>
    <TR>
        <TD COLSPAN="2">CELDAS 5 y 6</TD>
    </TR>
</TABLE>

Estos son los atributos de los elementos COL y COLGROUP que se verán más adelante:

Estos son los atributos de los elementos TBODY, TFOOT y THEAD que se verán más adelante:

Por último, el elemento CAPTION sólo tiene un atributo: align=alineamiento.