Tables in HTML

Tables allow you to represent tabular information, in rows and columns, with headers. Each item in the table can be simple, or a grouping of rows, columns, table headers and feet, subdivisions, multiple headers, and other complex elements

Because tables allow for very detailed control, they are sometimes used to organize the overall structure of a web page

This practice is not recommended, although it was widely used in design a few years ago

It is more advisable to use elements div for the general structure of the web page

A table is defined by the element table

The rows are defined with the element tr (table row)

For each row defines a cell of elements td (table data) to contain other elements, including other tables (although not recommended, as a visually confusing result can be obtained)

<table>
    <tr>
        <td>Number</td>
        <td>Ordinal</td>
    </tr>
    <tr>
        <td>1</td>
        <td>First</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Second</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Third</td>
    </tr>
    <tr>
       <td>4</td>
       <td>Fourth</td>
     </tr>
     <tr>
        <td>5</td>
        <td>Fifth</td>
     </tr>
     <tr>
         <td>6</td>
         <td>Sixth</td>
     </tr>
     <tr>
         <td>7</td>
         <td>Seventh</td>
    </tr>
    <tr>
        <td>8</td>
        <td>Eighth</td>
    </tr>
    <tr>
        <td>9</td>
        <td>Ninth</td>
    </tr>
</table>

The example lists the natural numbers from 1 to 9, filled with the first row a description and the following with the data

Remaining as a result:

Spanning

Sometimes we will need to combine cells, this practice is called spanning

To group or merge cells in a particular row (they apply to items td), we'll use the attribute colspan asignandole as the value of the number of cells that will be used

<table>
    <tr>
        <td colspan='3'>Languages</td>
    </tr>
    <tr>
        <td>HTML5</td>
        <td>CSS</td>
        <td>JavaScript</td>
    </tr>
</table>

In the example you have listed three languages, and to highlight the description has been applied spanning on the first row

Remaining as a result:

To group or merge rows from a particular column (they apply to items tr), we'll use the attribute rowspan assigning it as a value the number of rows to be used

<table>
    <tr>
        <td rowspan='3'>Languages</td>
        <td>HTML5</td>
    </tr>
    <tr>
        <td>CSS</td>
    </tr>
    <tr>
        <td>JavaScript</td>
    </tr>
</table>

The example has listed three languages and to highlight the description has been applied spanning on the first column, getting a table similar to that of the previous example but with the values placed in the second column

Remaining as a result:

Elements of a table

To add complexity to the table we can add more elements to it:

• caption

  is the title or caption of the table

  Shown outside the table, by default above it

  It is usually put normally after the item table

• thead

  serves as the head of the table

• th

  are some cells for special use only within the table header

• tbody

  it is usually used after the element thead to distinguish the header from the body of the table

• tfoot

  serves as the foot of the table

  Interestingly, it must be defined before defining an element tbody

<table>
    <caption>Natural numbers 1 to 9</caption>
    <thead>
        <tr>
            <th>Number</th>
            <th>Ordinal</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>10</td>
            <td>Tenth</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>First</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Second</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Third</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Fourth</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Fifth</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Sixth</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Seventh</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Eighth</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Ninth</td>
        </tr>
    </tbody>
</table>

In the example all the elements that we have just defined have been applied, as can be seen there is not much difference with the first table that we have set as an example

However, now all its parts are better located and using CSS style sheets we can give it a more attractive look for the user

In the example only has a value more to the table that originally did not exist

Thanks to the element tfoot now we have the possibility to use JavaScript, add the result of calculations or totals of the values of the other cells

We can also observe that the cells within the element thead appear with a larger font size and bold, because they are part of the header

As at the beginning, thanks to the element caption, we have a brief description of our table

Remaining as a result: