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.

Terms Disclaimer About Us Contact Us