Tables – Part 2 (Colspan and rowspan)

This tutorial explains how to use the colspan and rowspan properties in a table. These properties allow you to spread a cell over multiple columns or rows. The images below show how the rowspan and colspan properties can be used.

Using the rowspan property
Using the rowspan property
Using the colspan property
Using the colspan property

The colspan and rowspan properties basically allow you to customise the layout and arrangement of data in a table. Along with some CSS code to create a theme for your table, these properties can be used to make a boring meaningless table into an effective table that conveys the information it stores in an effective manner.

Watch the video below and then scroll down to see the sample code.

Here is the sample HTML code using the rowspan property:

<html>
    <head>
        <title>Tables</title>
        <link rel="stylesheet" href="theme.css" type="text/css"/>
    </head>

    <body>
        <table>
            <tr>
                <td rowspan="6">Top Selling Games - March 2020</td>
                <th>Rank</th>
                <th>Title</th>
                <th>Publisher</th>
            </tr>

            <tr>
                <td>1</td>
                <td>Animal Crossing: New Horizons</td>
                <td>Nintendo</td>
            </tr>

            <tr>
                <td>2</td>
                <td>Call of Duty: Modern Warfare</td>
                <td>Activision Blizzard</td>
            </tr>

            <tr>
                <td>3</td>
                <td>MLB: The Show 20</td>
                <td>Sony</td>
            </tr>

            <tr>
                <td>4</td>
                <td>Resident Evil</td>
                <td>Capcom USA</td>
            </tr>

            <tr>
                <td>5</td>
                <td>NBA 2K20</td>
                <td>Take 2 Interactive</td>
            </tr>
        </table>
    </body>
</html>

Here is the sample HTML code using the colspan property:

<html>
    <head>
        <title>Tables</title>
        <link rel="stylesheet" href="theme.css" type="text/css"/>
    </head>

    <body>
        <table>
            <tr>
                <td colspan="3">Top Selling Games - March 2020</td>
            </tr>
            <tr>
                <th>Rank</th>
                <th>Title</th>
                <th>Publisher</th>
            </tr>

            <tr>
                <td>1</td>
                <td>Animal Crossing: New Horizons</td>
                <td>Nintendo</td>
            </tr>

            <tr>
                <td>2</td>
                <td>Call of Duty: Modern Warfare</td>
                <td>Activision Blizzard</td>
            </tr>

            <tr>
                <td>3</td>
                <td>MLB: The Show 20</td>
                <td>Sony</td>
            </tr>

            <tr>
                <td>4</td>
                <td>Resident Evil</td>
                <td>Capcom USA</td>
            </tr>

            <tr>
                <td>5</td>
                <td>NBA 2K20</td>
                <td>Take 2 Interactive</td>
            </tr>
        </table>
    </body>
</html>

And here is the CSS code used in the example:

table{
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

td{
    border: 1px solid black;
    padding: 5px;
}