Tables

A table is another option for organizing short pieces of information. It is especially useful for information that has a type and value (or values). A table has rows, and can have any number of columns within each row. Traditionally, to create a “grid-style” table, every row should have the same number of columns. Each cell can be a data cell or a header cell (header cells are typically displayed with bold text). You will use a combination of these to create tables: table tag, table row tag, header cell tag, data cell tag.

The Table Tag

The table tag defines a container, which can have rows and cells, forming a table of data. The table tag automatically adds space above and below, ensuring that nothing else is on the same line.

The Table Row Tag

The table row tag creates a row, which can be filled with cells. The table row tag can only be used within a table tag. The table row tag automatically adds space above and below, ensuring that nothing else is on the same line.

The Header Cell Tag

The table header cell tag creates a cell within a table row, which is intended to be displayed as a title. Header cells are usually displayed with bold and centered text. The header cell tag can only be used within a table row.

The Data Cell Tag

The table data cell tag creates a cell within a table row, which is intended to be displayed as unformatted data. The data cell tag can only be used within a table row.

Example: Table with Header Row

The following code:

<table>
    <tr>
        <th>Sample No.</th>
        <th>Distance (m)</th>
        <th>Weight (kg)</th>
        <th>Color</th>
    </tr>
    <tr>
        <td>1</td>
        <td>4.6</td>
        <td>65</td>
        <td>Red</td>
    </tr>
    <tr>
        <td>2</td>
        <td>12</td>
        <td>36</td>
        <td>Red</td>
    </tr>
    <tr>
        <td>3</td>
        <td>32.4</td>
        <td>89</td>
        <td>Blue</td>
    </tr>
</table>

Would produce the following result:

Note: Because of the styling used on this website, tables are displayed with borders and colors. On your webpage (which does not yet have styling information), the table will look plainer.

Summary