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

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Acepto la política de Protección de Datos.

Escribe el primer comentario