Table colspan rowspan

Certainly! In HTML, tables are created using the <table> element, and you can use the colspan and rowspan attributes to control the layout of cells. Here’s a breakdown of both:

`colspan`

The colspan attribute is used to specify how many columns a cell should span. This allows a single cell to extend across multiple columns.

`rowspan`

The rowspan attribute is used to specify how many rows a cell should span. This allows a single cell to extend across multiple rows.

Example

Here’s a basic example that demonstrates both colspan and rowspan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table colspan and rowspan Example</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th rowspan="2">Header 1</th>
            <th colspan="2">Header 2-3</th>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
        <tr>
            <td colspan="2">Cell spanning two columns</td>
            <td>Cell 3</td>
        </tr>
    </table>
</body>
</html>

Explanation:

First Row:
- The first cell (Header 1) spans 2 rows (rowspan="2").
- The second cell (Header 2-3) spans 2 columns (colspan="2").
Second Row:
- The cells under Header 2-3 are Cell 1 and Cell 2.
Third Row:
- The first cell in this row spans 2 columns (colspan="2").
- The second cell is Cell 3.

This layout results in a table where the first header cell extends across two rows, the second header spans two columns, and the last row has a cell that spans two columns.

Feel free to adjust the example to better fit your needs!

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us