coding180 icon

Coding180

Table and combination of cells.

Table and combination of cells.

Tutorials > HTML > HTML Table Elements


It is possible for a table cell <td> to occupy the place of two or more cells horizontally or vertically.
The td or th element has two properties called rowspan and colspan.

These properties are assigned an integer value starting at 2.

If we want a cell to occupy three columns, then we initialize the colspan property with the value 3:

<td colspan="3">Invoicing for the last three months</td>

If, on the other hand, we want a cell to extend to row level, then we do:

<td rowspan="3">Sections</td>

Let's look at an example using the concept of cell merging:

<!DOCTYPE html>
<html>

<head>
    <title>Page title</title>
    <meta charset="UTF-8">
</head>

<body>
    <table border="1">
        <tr>
            <td rowspan="4">Resources</td>
            <td colspan="4">Billing for the last three months</td>
        </tr>
        <tr>
            <td>Hard drives</td>
            <td>23000</td>
            <td>27200</td>
            <td>26000</td>
        </tr>
        <tr>
            <td>CPU</td>
            <td>73000</td>
            <td>67300</td>
            <td>51000</td>
        </tr>
        <tr>
            <td>Monitors</td>
            <td>53000</td>
            <td>72000</td>
            <td>88000</td>
        </tr>
    </table>
</body>

</html>

The result in the browser is:

html table span. cell combination - robort

Let's see how we define the first row of the table:

<tr>
    <td rowspan="4">Resourses</td>
    <td colspan="4">Billing for the last three months</td>
</tr>

As we can see, the first cell is expanded downwards by 4 cells and the second cell is expanded to the right by 4 cells.

When we have to arrange the cells of the second row we must take into account that the first one is occupied. Then the code is:

<tr>
    <td>Hard drives</td>
    <td>23000</td>
    <td>27200</td>
    <td>26000</td>
</tr>

 


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel