Tablas en HTML

Las tablas permiten representar información tabular, en filas y columnas, con cabeceras. Cada elemento de la tabla puede ser simple, o una agrupación de filas, columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos

Como las tablas permiten un control muy detallado, a veces se usan para organizar la estructura general de una página web

Esta práctica no es recomendable, aunque era muy usada en el diseño hace algunos unos años

Es más recomendable utilizar elementos div para la estructura general de la página web

Una tabla se define mediante el elemento table

Las filas se definen con el elemento tr (table row)

Por cada fila se define una celda de elementos td (table data) para contener otros elementos, incluidas otras tablas (aunque no se recomienda, ya que puede obtenerse un resultado visualmente confuso)

<table>
    <tr>
        <td>Número</td>
        <td>Ordinal</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Primero</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Segundo</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Tercero</td>
    </tr>
    <tr>
       <td>4</td>
       <td>Cuarto</td>
     </tr>
     <tr>
        <td>5</td>
        <td>Quinto</td>
     </tr>
     <tr>
         <td>6</td>
         <td>Sexto</td>
     </tr>
     <tr>
         <td>7</td>
         <td>Séptimo</td>
    </tr>
    <tr>
        <td>8</td>
        <td>Octavo</td>
    </tr>
    <tr>
        <td>9</td>
        <td>Noveno</td>
    </tr>
</table>

En el ejemplo se han listado los números naturales del 1 al 9, rellenado con la primera fila una descripción y las siguientes con los datos

Quedando como resultado:

Spanning

En ocasiones necesitaremos combinar celdas, a esta práctica se la denomina spanning

Para agrupar o combinar celdas de una fila concreta (se aplican a elementos td), usaremos el atributo colspan asignandole como valor el número de celdas que serán usadas

<table>
    <tr>
        <td colspan='3'>Lenguajes</td>
    </tr>
    <tr>
        <td>HTML5</td>
        <td>CSS</td>
        <td>JavaScript</td>
    </tr>
</table>

En el ejemplo se han listado tres lenguajes y para resaltar la descripción se ha aplicado spanning sobre la primera fila

Quedando como resultado:

Para agrupar o combinar filas de una columna concreta (se aplican a elementos tr), usaremos el atributo rowspan asignandole como valor el número de filas que serán usadas

<table>
    <tr>
        <td rowspan='3'>Lenguajes</td>
        <td>HTML5</td>
    </tr>
    <tr>
        <td>CSS</td>
    </tr>
    <tr>
        <td>JavaScript</td>
    </tr>
</table>

En el ejemplo se han listado tres lenguajes y para resaltar la descripción se ha aplicado spanning sobre la primera columna, obteniendo una tabla similar a la del ejemplo anterior pero con los valores colocados en la segunda columna

Quedando como resultado:

Elementos de una tabla

Para añadir complejidad a la tabla podemos añadir más elementos a la misma:

• caption

  es el título o leyenda de la tabla

  Se muestra fuera de la tabla, por defecto arriba de la misma

  Se suele poner normalmente después del elemento table

• thead

  sirve como cabecera de la tabla

• th

  son unas celdas especiales que se usan sólo dentro de la cabecera de la tabla

• tbody

  se suele usar después del elemento thead para distinguir la cabecera del cuerpo de la tabla

• tfoot

  sirve como pie de la tabla

  Curiosamente, debe definirse antes de definir un elemento tbody

<table>
    <caption>Números naturales del 1 al 9</caption>
    <thead>
        <tr>
            <th>Número</th>
            <th>Ordinal</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>10</td>
            <td>Décimo</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Primero</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Segundo</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Tercero</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Cuarto</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Quinto</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Sexto</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Séptimo</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Octavo</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Noveno</td>
        </tr>
    </tbody>
</table>

En el ejemplo se han aplicado todos los elementos que acabamos de definir, como puede apreciarse no hay mucha diferencia con la primera tabla que hemos puesto de ejemplo

Sin embargo, ahora todas sus partes están mejor localizadas y usando hojas de estilo CSS podemos darle un aspecto más atractivo para el usuario

En el ejemplo sólo se ha un valor más a la tabla que originalmente no existía

Gracias al elemento tfoot ahora tenemos la posibilidad de usando JavaScript, añadirle el resultado de cálculos o totales de los valores del resto de celdas

También podemos observar que las celdas dentro del elemento thead aparecen con un tamaño de fuente mayor y en negrita, porque son parte de la cabecera

Al igual que al inicio, gracias al elemento caption, tenemos una breve descripción de nuestra tabla

Quedando como resultado: