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.