Two general ways of displaying information in tables

When creating tables, you have a choice of where to put the table headings. Both kinds communicate the same information. Choosing one or another is usually a matter of which one is most legible.

Horizontal tables

You can either use horizontal headings across the top of the table:

Heading #1	Heading #2	Heading #3	Heading #4
table data	table data	table data	table data
table data	table data	table data	table data
table data	table data	table data	table data

The code for a horizontal table looks like this:

<table>
    <thead>
        <tr>
            <th>Heading #1</th>
            <th>Heading #2</th>
            <th>Heading #3</th>
            <th>Heading #4</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>table data</td>
            <td>table data</td>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <td>table data</td>
            <td>table data</td>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <td>table data</td>
            <td>table data</td>
            <td>table data</td>
            <td>table data</td>
        </tr>
    </tbody>
</table>

Vertical tables

Or you can use vertical headings along the side:

Heading #1	table data	table data	table data
Heading #2	table data	table data	table data
Heading #3	table data	table data	table data
Heading #4	table data	table data	table data

Here is code to create a vertical table:

<table>
    <thead>
    </thead>
    <tbody>
        <tr>
            <th>Heading #1</th>
            <td>table data</td>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <th>Heading #2</th>
            <td>table data</td>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <th>Heading #3</th>
            <td>table data</td>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <th>Heading #4</th>
            <td>table data</td>
            <td>table data</td>
            <td>table data</td>
        </tr>
    </tbody>
</table>