Lección 6: Tablas | Curso HTML

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>
Título columna izquierda Título columna derecha
Contenido izquierdo Contenido derecho
Título columna izquierda Título columna derecha
Actividad 1

Realiza la siguiente página web.

Actividad disney

Actividad 2

Crea una tabla con la información de tus peores enemigos o personas que no te gusten.

Contará con un título, caption, y las siguientes columnas.

  • Nombre
  • Apellidos
  • Edad
  • Género
  • ¿Por qué es mi enemigo?
Actividad 3

Con todo lo aprendido hasta ahora, crea tu Curriculum Vitae. Como mínimo debe de mostrar.

  • Imagen.
  • Datos básicos.
  • Experiencia.
  • Habilidades.

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?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario