6. Tables

Leer en español

In some sections we'll need to show structured and ordered information: a table. Each one can include its own title, a title per column and, of course, its information. The only limitation we'll encounter is that all rows must be made up of the same number of columns.

Among the tags we'll make use of:

Tag <table>
Description Container of the table.
Attributes Global
Type Block
Tag <caption>
Description Title of the table.
Attributes Global
Tag <tr>
Description Definition of rows.
Attributes Global
Tag <td>
Description Cell.
Attributes Global
Tag <th>
Description Cell or column title.
Attributes scope: Indicates the direction of the information row or col (column).
Tag <thead>
Description Header container.
Attributes Global
Tag <tbody>
Description Data container.
Attributes Global
Tag <tfoot>
Description Footer container.
Attributes Global

Simple

<table>
    <thead>
        <tr>
            <th scope="col">Left column title</th>
            <th scope="col">Right column title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Left content</td>
            <td>Right content</td>
        </tr>
    </tbody>
</table>
Left column title Right column title
Left content Right content

For accessibility reasons, and the correct functioning of screen readers, tables must always carry header cells indicating the direction (scope="row" and scope="col").

Add a title

Use the caption tag inside table.

<table>
    <caption>My table</caption>
    <thead>
        <tr>
            <th scope="col">Left column title</th>
            <th scope="col">Right column title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Left content</td>
            <td>Right content</td>
        </tr>
    </tbody>
</table>
My table
Left column title Right column title
Left content Right content

Footer

Use the tfoot tag at the end of table.

<table>
    <thead>
        <tr>
            <th scope="col">Left column title</th>
            <th scope="col">Right column title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Left content</td>
            <td>Right content</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="col">Left column title</th>
            <th scope="col">Right column title</th>
        </tr>
    </tfoot>
</table>
Left column title Right column title
Left content Right content
Left column title Right column title
Activity 1

Build the following web page.

Disney activity

Activity 2

Create a table with the information of your worst enemies or people you don't like.

It will have a title, caption, and the following columns.

  • First name
  • Last name
  • Age
  • Gender
  • Why is it my enemy?
Activity 3

With everything you've learned so far, create your Curriculum Vitae. As a minimum it must show.

  • Image.
  • Basic data.
  • Experience.
  • Skills.

This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.

Building SPAs with Django and HTML Over the Wire: Learn to build real-time single page applications with Python

Building SPAs with Django and HTML Over the Wire: Learn to build real-time single page applications with Python

The HTML over WebSockets approach simplifies single-page application (SPA) development and lets you bypass learning a JavaScript rendering framework such as React, Vue, or Angular, moving the logic to Python. This web application development book provides you with all the Django tools you need to simplify your developments with real-time results.

Buy the book

Help me keep writing

Every coffee gives me a push toward the next article.

Ko-fi donationsSure, it's on me!

Comments

There are no comments yet.