Tutorials

How to create a complex table in HTML

Posted on 02-Jul-2016

Coding HTML tables into your web page is fairly easy since you need only to understand a few basic code principles.

The basic structure of an HTML table consists of the following tags:

  • Table tags: <table> </table>
  • Row tags: <tr> </tr>
  • Cell tags: <td> </td>
There are others as well like thead, tbody, etc that can be skipped for now

Constructing a HTML table, consists of describing the table between the beginning table tag, <table>, and the ending table table tag, </table>. Between these tags, you construct each row and each cell in the row. To do this, you would first start the row with the beginning row tag, <tr>, and then build the row by creating each cell with the beginning cell tag, <td>, adding the data for that cell, and then closing the cell with the ending cell tag, </td>. When you finish all of the cells for a row, you would then close the row with the ending row tag, </tr>. Then, for each new row, you would repeat the process of beginning the row, building each cell in the row, and closing the row.

Let's walk through an example by creating the following table:

table preview

In order to get started, first thing we need to do is to visualize the table in a full row-column version without any sliced rows or columns:

table virtual columns

Now we can clearly see that we have a 5 rows x 5 columns table (25 total columns).

Let's create the table:

<table border="1">
<!-- Row A -->
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>
<!-- Row B -->
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>
<!-- Row C -->
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>
<!-- Row D -->
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>
<!-- Row E -->
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>
</table>
I used border="1" just to display the table and cells borders. This should be removed and used css to apply styles on your table`

Combining Cells horizontally

As you can see in the image, we'll have to combine cells (A1, A2, A3), (D2, D3, D4) and (E3, E4, E5).

For this we'll use the colspan attribute. The colspan attribute defines the number of columns a cell should span (combine). In our case, 3 columns.

Let's see it in action for the first row:

<!-- Row A -->
<tr>
    <td colspan="3">1</td>
    <td>4</td>
    <td>5</td>
</tr>
columns 2 and 3 are no longer needed since they are replaced by column 1 with colspan="3"

Forth row:

<!-- Row D -->
<tr>
    <td>1</td>
    <td colspan="3">2</td>
    <td>5</td>
</tr>
columns 3 and 4 are no longer needed since they are replaced by column 2 with colspan="3"

And fifth row:

<!-- Row E -->
<tr>
    <td>1</td>
    <td>2</td>
    <td colspan="3">3</td>
</tr>
columns 4 and 5 are no longer needed since they are replaced by column 3 with colspan="3"

Combining Cells vertically

The next step to finish our table is to combine columns vertically according to the targeted table design that we saw in the first image. Do do this we need to combine columns (A5, B5, C5), (B2, C2) and (C1, D1).

For this, we're going to use the rowspan attribute. The rowspan attribute specifies the number of rows a cell should span (combine).

Let's update our html code to combine A5, B5 and C5 cells:

<!-- Row A -->
<tr>
    <td colspan="3">1</td>
    <td>4</td>
    <td rowspan="3">5</td>
</tr>

After that, you need to go on Rows B and C and remove the 5'th cells:

<!-- Row B -->
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr>
<!-- Row C -->
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr>

The same we'll do for B2 and C2

<!-- Row B -->
<tr>
    <td>1</td>
    <td rowspan="2">2</td>
    <td>3</td>
    <td>4</td>
</tr>
<!-- Row C -->
<tr>
    <td>1</td>
<!--- removed second column from the row below -->
    <td>3</td>
    <td>4</td>
</tr>

And the same for C1 and D1.

<!-- Row C -->
<tr>
    <td rowspan="2">1</td>
    <td>3</td>
    <td>4</td>
</tr>
<!-- Row D -->
<tr>
    <td colspan="3">2</td>
    <td>5</td>
</tr>

And that's it your complex table made simple.

td tag can have colspan and rowspan attributes in the same time: Ex: <td colspan="3" rowspan="2">...

Now let's see the full resulted HTML code:

<table border="1">
<!-- Row A -->
<tr>
    <td colspan="3">1</td>
    <td>4</td>
    <td rowspan="3">5</td>
</tr>
<!-- Row B -->
<tr>
    <td>1</td>
    <td rowspan="2">2</td>
    <td>3</td>
    <td>4</td>
</tr>
<!-- Row C -->
<tr>
    <td rowspan="2">1</td>
    <td>3</td>
    <td>4</td>
</tr>
<!-- Row D -->
<tr>
    <td colspan="3">2</td>
    <td>5</td>
</tr>
<!-- Row E -->
<tr>
    <td>1</td>
    <td>2</td>
    <td colspan="3">3</td>
</tr>
</table>

Now, that you have the table completed, you can check on JSFiddle