HTML
Intermediate
30 mins
Teacher/Student led
115 points
What you need:
Chromebook/Laptop/PC or iPad/Tablet

Crafting Complex Tables

This step-by-step lesson guides you through the process of crafting complex HTML tables. You'll learn how to create a basic table, add a header and footer row, and use the 'rowspan' and 'colspan' attributes to merge cells. By the end, you'll be able to create advanced tables with ease.
Learning Goals Learning Outcomes Teacher Notes

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    1 - Create a basic table

    First, let's create a basic HTML table with a few rows and columns. Use the following code to create a table with 4 rows and 3 columns:

    <table border="1">
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
      </tr>
      <tr>
        <td>Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
      </tr>
      <tr>
        <td>Cell 7</td>
        <td>Cell 8</td>
        <td>Cell 9</td>
      </tr>
      <tr>
        <td>Cell 10</td>
        <td>Cell 11</td>
        <td>Cell 12</td>
      </tr>
    </table>

    Now, let's add this code to the embedded playground below:

    2 - Add a header row

    A table header is a row at the top of a table that contains labels for each column. It helps users understand the data in the table by providing context. In HTML, table headers are created using the <th> element, which stands for 'table header'. Now, let's add a header row to our table. Add the header code above the rows:

    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>

    3 - Add Rowspan

    In this step, we will use the rowspan attribute to merge cells vertically. A rowspan lets a table cell stretch vertically across multiple rows. Imagine one long box covering several smaller ones stacked on top of each other.

    Update the first cell of the second row (Cell 4) with the following code and also delete the first cell of the third row (Cell 7):

    <td rowspan="2">Cell 4</td>

    So the code should look like this:

    <table border="1">
      <tr>
    	<th>Header 1</th>
    	<th>Header 2</th>
    	<th>Header 3</th>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
      </tr>
      <tr>
        <td rowspan="2">Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
      </tr>
      <tr>
        
        <td>Cell 8</td>
        <td>Cell 9</td>
      </tr>
      <tr>
        <td>Cell 10</td>
        <td>Cell 11</td>
        <td>Cell 12</td>
      </tr>
    </table>

    When you run the code, notice how Cell 4 now spans two rows, merging with Cell 7.

    Try changing the rowspan to 3 and removing Cell 10. What happens to the table?

    4 - Add colspan

    Next, we will use the colspan attribute to merge cells horizontally. A colspan lets a table cell stretch horizontally across multiple columns. Picture one wide box covering several smaller ones side by side.

    Update the first cell of the first row (Cell 1) with the following code and also delete the second cell of the first row (Cell 2):

    <td colspan="2">Cell 1</td>

    So the code should look like this:

    <table border="1">
      <tr>
    	<th>Header 1</th>
    	<th>Header 2</th>
    	<th>Header 3</th>
      </tr>
      <tr>
        <td colspan="2">Cell 1</td>
        <td>Cell 3</td>
      </tr>
      <tr>
        <td rowspan="2">Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
      </tr>
      <tr>
        
        <td>Cell 8</td>
        <td>Cell 9</td>
      </tr>
      <tr>
        <td>Cell 10</td>
        <td>Cell 11</td>
        <td>Cell 12</td>
      </tr>
    </table>

    When you run the code, notice how Cell 4 now spans two rows, merging with Cell 7.

    Try changing the colspan to 3 and removing Cell 3. What happens to the table?

    5 - Add a footer row

    In this step, we will add a footer row to our table. A table footer is typically used to display summary information, such as totals or averages, for the data in the table. To create a footer row that spans all three columns, add the following code after the last row:

    <tr>
      <td colspan="3">Footer</td>
    </tr>

    Now, let's add the footer row to our table. Add the code inside the <table> element, after the last row:

    Unlock the Full Learning Experience

    Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more