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

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario