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	Globales

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>Título columna izquierda</th>
            <th>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

Añadir título

Usa la etiqueta caption dentro de table.

<table>
    <caption>Mi tabla</caption>
    <thead>
        <tr>
            <th>Título columna izquierda</th>
            <th>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>Título columna izquierda</th>
            <th>Título columna derecha</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Contenido izquierdo</td>
            <td>Contenido derecho</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Título columna izquierda</th>
            <th>Título columna derecha</th>
        </tr>
    </tfoot>
</table>

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

6-1 6-2 6-3

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
2 cafés: Respondo a una duda en los comentarios.
4 cafés: Te corrijo una actividad y te envío feedback.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario