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 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
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?

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 liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario