ZetCode

HTML Table Types

last modified March 3, 2025

HTML Table Types tutorial shows how to create different structural forms of tables in HTML, including horizontal, vertical, nested, and more.

HTML Tables

HTML Tables are used to organize and display data in a grid format. Introduced in HTML 1.0, tables remain a fundamental part of web development for structuring data, though CSS is often preferred for layout purposes.

Table Structures

Tables can be structured in various ways depending on how data is organized. This tutorial covers horizontal, vertical, nested, and other layouts with examples rendered below each code snippet.

HTML Table Types Examples

In the following examples, we explore different table structures with sample data. Basic CSS is included in the head to ensure visibility.

1. Horizontal Table

The standard table layout where each row represents a record and columns represent attributes.

Horizontal Table Example 
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>30</td>
        <td>London</td>
    </tr>
    <tr>
        <td>Mike</td>
        <td>28</td>
        <td>Paris</td>
    </tr>
    <tr>
        <td>Emma</td>
        <td>27</td>
        <td>Tokyo</td>
    </tr>
</table>

Rendered output:

Name Age City
John 25 New York
Jane 30 London
Mike 28 Paris
Emma 27 Tokyo

2. Vertical Table

A table where attributes are listed in rows and each column represents a record.

Vertical Table Example 
<table>
    <tr>
        <th>Name</th>
        <td>John</td>
        <td>Jane</td>
        <td>Mike</td>
        <td>Emma</td>
    </tr>
    <tr>
        <th>Age</th>
        <td>25</td>
        <td>30</td>
        <td>28</td>
        <td>27</td>
    </tr>
    <tr>
        <th>City</th>
        <td>New York</td>
        <td>London</td>
        <td>Paris</td>
        <td>Tokyo</td>
    </tr>
</table>

Rendered output:

Name John Jane Mike Emma
Age 25 30 28 27
City New York London Paris Tokyo

3. Nested Table

A table with another table inside a cell, useful for hierarchical data.

Nested Table Example 
<table>
    <tr>
        <th>Student</th>
        <td>
            <table>
                <tr>
                    <th>Name</th>
                    <td>John</td>
                </tr>
                <tr>
                    <th>Grades</th>
                    <td>
                        <table>
                            <tr>
                                <td>Math</td>
                                <td>85</td>
                            </tr>
                            <tr>
                                <td>Science</td>
                                <td>90</td>
                            </tr>
                            <tr>
                                <td>History</td>
                                <td>88</td>
                            </tr>
                            <tr>
                                <td>Art</td>
                                <td>92</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Rendered output:

Student
Name John
Grades
Math 85
Science 90
History 88
Art 92

4. Diagonal Table

A comparison matrix with headers on both axes.

Diagonal Table Example 
<table>
    <tr>
        <th></th>
        <th>Product A</th>
        <th>Product B</th>
        <th>Product C</th>
        <th>Product D</th>
    </tr>
    <tr>
        <th>Feature 1</th>
        <td>Yes</td>
        <td>No</td>
        <td>Yes</td>
        <td>No</td>
    </tr>
    <tr>
        <th>Feature 2</th>
        <td>No</td>
        <td>Yes</td>
        <td>No</td>
        <td>Yes</td>
    </tr>
    <tr>
        <th>Feature 3</th>
        <td>Yes</td>
        <td>Yes</td>
        <td>No</td>
        <td>No</td>
    </tr>
</table>

Rendered output:

Product A Product B Product C Product D
Feature 1 Yes No Yes No
Feature 2 No Yes No Yes
Feature 3 Yes Yes No No

5. Multi-Header Table

A horizontal table with multiple header rows for categorization.

Multi-Header Table Example 
<table>
    <tr>
        <th rowspan="2">ID</th>
        <th colspan="2">Personal Info</th>
        <th colspan="2">Contact Info</th>
    </tr>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Email</th>
        <th>Phone</th>
    </tr>
    <tr>
        <td>1</td>
        <td>John</td>
        <td>25</td>
        <td>john@example.com</td>
        <td>123-456</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Jane</td>
        <td>30</td>
        <td>jane@example.com</td>
        <td>789-012</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Mike</td>
        <td>28</td>
        <td>mike@example.com</td>
        <td>345-678</td>
    </tr>
</table>

Rendered output:

ID Personal Info Contact Info
Name Age Email Phone
1 John 25 john@example.com 123-456
2 Jane 30 jane@example.com 789-012
3 Mike 28 mike@example.com 345-678

6. Multi-Column Vertical Table

A vertical table with grouped columns.

Multi-Column Vertical Table Example 
<table>
    <tr>
        <th colspan="2">Student 1</th>
        <th colspan="2">Student 2</th>
        <th colspan="2">Student 3</th>
    </tr>
    <tr>
        <th>Name</th>
        <td>John</td>
        <th>Name</th>
        <td>Jane</td>
        <th>Name</th>
        <td>Mike</td>
    </tr>
    <tr>
        <th>Age</th>
        <td>25</td>
        <th>Age</th>
        <td>30</td>
        <th>Age</th>
        <td>28</td>
    </tr>
    <tr>
        <th>City</th>
        <td>New York</td>
        <th>City</th>
        <td>London</td>
        <th>City</th>
        <td>Paris</td>
    </tr>
</table>

Rendered output:

Student 1 Student 2 Student 3
Name John Name Jane Name Mike
Age 25 Age 30 Age 28
City New York City London City Paris

7. Stacked Table

Multiple independent tables stacked together.

Stacked Table Example 
<table>
    <tr>
        <th>Name</th>
        <td>John</td>
    </tr>
    <tr>
        <th>Age</th>
        <td>25</td>
    </tr>
    <tr>
        <th>City</th>
        <td>New York</td>
    </tr>
</table>
<table>
    <tr>
        <th>Name</th>
        <td>Jane</td>
    </tr>
    <tr>
        <th>Age</th>
        <td>30</td>
    </tr>
    <tr>
        <th>City</th>
        <td>London</td>
    </tr>
</table>
<table>
    <tr>
        <th>Name</th>
        <td>Mike</td>
    </tr>
    <tr>
        <th>Age</th>
        <td>28</td>
    </tr>
    <tr>
        <th>City</th>
        <td>Paris</td>
    </tr>
</table>

Rendered output:

Name John
Age 25
City New York
Name Jane
Age 30
City London
Name Mike
Age 28
City Paris

8. Grid Table

A matrix-like table for schedules or calendars.

Grid Table Example 
<table>
    <tr>
        <th>Time</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
    </tr>
    <tr>
        <th>9:00</th>
        <td>Meeting</td>
        <td>Free</td>
        <td>Work</td>
    </tr>
    <tr>
        <th>10:00</th>
        <td>Work</td>
        <td>Work</td>
        <td>Meeting</td>
    </tr>
    <tr>
        <th>11:00</th>
        <td>Free</td>
        <td>Meeting</td>
        <td>Free</td>
    </tr>
</table>

Rendered output:

Time Mon Tue Wed
9:00 Meeting Free Work
10:00 Work Work Meeting
11:00 Free Meeting Free

9. Single-Row Table

A table with only one row, often used for layout.

Single-Row Table Example 
<table>
    <tr>
        <td>Item 1</td>
        <td>Item 2</td>
        <td>Item 3</td>
        <td>Item 4</td>
    </tr>
</table>

Rendered output:

Item 1 Item 2 Item 3 Item 4

10. Single-Column Table

A table with only one column, like a list.

Single-Column Table Example 
<table>
    <tr>
        <td>Name: John</td>
    </tr>
    <tr>
        <td>Age: 25</td>
    </tr>
    <tr>
        <td>City: New York</td>
    </tr>
    <tr>
        <td>Job: Developer</td>
    </tr>
</table>

Rendered output:

Name: John
Age: 25
City: New York
Job: Developer

In this tutorial, we have explored various structural forms of HTML tables, demonstrating how to organize data in different layouts with visible examples.

List all HTML tutorials.