Lección 6: Tablas

En algunas secciones necesitaremos mostrar información estructurada y ordenada: una tabla. Poden incluir a cada una su propio título, un título por columna y, claro, su información. La única limitación que nos encontraremos es que todas las filas deben estar formadas del mismo número de columnas.

Entre las etiquetas que haremos uso:

Etiqueta	`<table>`
Descripción	Contenedor de la tabla.
Atributos	Globales
Tipo	Bloque

Etiqueta	`<caption>`
Descripción	Título de la tabla.
Atributos	Globales

Etiqueta	`<tr>`
Descripción	Definición de filas.
Atributos	Globales

Etiqueta	`<td>`
Descripción	Celda.
Atributos	Globales

Etiqueta	`<th>`
Descripción	Título de celda o columna.
Atributos	`scope`: Indica la dirección de la información `row` (fila) o `col` (columna).

Etiqueta	`<thead>`
Descripción	Contenedor de cabecera.
Atributos	Globales

Etiqueta	`<tbody>`
Descripción	Contenedor de datos.
Atributos	Globales

Etiqueta	`<tfoot>`
Descripción	Contenedor de pie.
Atributos	Globales

Simple

<table>
    <thead>
        <tr>
            <th scope="col">Título columna izquierda</th>
            <th scope="col">Título columna derecha</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Contenido izquierdo</td>
            <td>Contenido derecho</td>
        </tr>
    </tbody>
</table>

Título columna izquierda	Título columna derecha
Contenido izquierdo	Contenido derecho

Por razones de accesibilidad, y el correcto funcionamiento de los lectores de pantalla, las tablas deben llevar siempre celdas de encabezado indicando la dirección (scope="row" y scope="col").

Añadir título

Usa la etiqueta caption dentro de table.

<table>
    <caption>Mi tabla</caption>
    <thead>
        <tr>
            <th scope="col">Título columna izquierda</th>
            <th scope="col">Título columna derecha</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Contenido izquierdo</td>
            <td>Contenido derecho</td>
        </tr>
    </tbody>
</table>

Mi tabla
Título columna izquierda	Título columna derecha
Contenido izquierdo	Contenido derecho

Pie

Usa la etiqueta tfoot al final de table.

<table>
    <thead>
        <tr>
            <th scope="col">Título columna izquierda</th>
            <th scope="col">Título columna derecha</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Contenido izquierdo</td>
            <td>Contenido derecho</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="col">Título columna izquierda</th>
            <th scope="col">Título columna derecha</th>
        </tr>
    </tfoot>
</table>