Tablas en HTML5

La etiqueta <table>

Para la construcción de tablas en HTML se emplea el elemento HTML Table, dentro de este se crea la cabecera, el cuerpo y pie de tabla.

• Cabecera: <thead>
• Cuerpo: <tbody>
• Pie: <tfoot>

Dentro de la cabecera de la tabla se colocan los <tr> que son las filas y dentro de estas filas las columnas de las cabeceras que son los <th>

Dentro del cuerpo y/o del pie de la tabla se colocan los <tr> que son las filas y dentro de estas filas las columnas que son los <td>, su puede optar por colocar <th> en el pie de la tabla

Modificaciones básicas

A la etiqueta Table se le agrega una propiedad que es "border" indicando el grosor del borde, si este se omite la tabla aparecerá sin borde.

Por ejemplo el siguiente código consideramos un borde de 1px:

<table border="1">
    <thead>
        <tr>
            <th>Titulo 1</th>
            <th>Titulo 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cuerpo 1.1</td>
            <td>Cuerpo 2.1</td>
        </tr>
        <tr>
            <td>Cuerpo 1.2</td>
            <td>Cuerpo 2.2</td>
        </tr>
        <tr>
            <td>Cuerpo 3.2</td>
            <td>Cuerpo 3.2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Pie 1</th>
            <th>Pie 2</th>
        </tr>
    </tfoot>
</table>

Generaría lo siguiente:

Titulo 1	Titulo 2
Cuerpo 1.1	Cuerpo 2.1
Cuerpo 1.2	Cuerpo 2.2
Cuerpo 3.2	Cuerpo 3.2
Pie 1	Pie 2

Se puede observar que el contenido de los <th> aparece centrado y en negrita, que es una característica de esta etiqueta.

Etiqueta <caption>

A la tabla también se le puede agregar un título general mediante la etiqueta <caption>

Por ejemplo el siguiente código consideramos un borde de 1px:

<table border="1">
    <caption>Título de la tabla</caption>
    <thead>
        <tr>
            <th>Titulo 1</th>
            <th>Titulo 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cuerpo 1.1</td>
            <td>Cuerpo 2.1</td>
        </tr>
        <tr>
            <td>Cuerpo 1.2</td>
            <td>Cuerpo 2.2</td>
        </tr>
        <tr>
            <td>Cuerpo 3.2</td>
            <td>Cuerpo 3.2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Pie 1</th>
            <th>Pie 2</th>
        </tr>
    </tfoot>
</table>

Generaría lo siguiente:

Título de la tabla

Titulo 1	Titulo 2
Cuerpo 1.1	Cuerpo 2.1
Cuerpo 1.2	Cuerpo 2.2
Cuerpo 3.2	Cuerpo 3.2
Pie 1	Pie 2

La propiedad colspan

Mediante esta propiedad una columna puede ocupar el espacio de más de 1 columna.

Por ejemplo el siguiente código consideramos un borde de 1px:

<table border="1">
    <caption>Título de la tabla</caption>
    <thead>
        <tr>
            <th>Titulo 1</th>
            <th>Titulo 2</th>
            <th>Titulo 3</th>
            <th>Titulo 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cuerpo 1.1</td>
            <td>Cuerpo 2.1</td>
            <td colspan="2">Cuerpo 3</td>
        </tr>
        <tr>
            <td colspan="4">Cuerpo 2.1</td>
        </tr>
        <tr>
            <td>Cuerpo 3.1</td>
            <td colspan="3">Cuerpo 3.2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2">Pie 1</th>
            <th colspan="2">Pie 2</th>
        </tr>
    </tfoot>
</table>

Generaría lo siguiente:

Título de la tabla

Titulo 1	Titulo 2	Titulo 3	Titulo 4
Cuerpo 1.1	Cuerpo 2.1	Cuerpo 3
Cuerpo 2.1
Cuerpo 3.1	Cuerpo 3.2
Pie 1		Pie 2