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

¿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.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario