Prev Next

Colspan & Rowspan

Use colspan and rowspan attributes to make a cell span multiple columns or rows, allowing you to create more complex table layouts. These attributes help you merge cells for headings, subheadings, or grouped data.

Key Topics

Using Colspan

Example: A cell spanning two columns.

<tr>
    <td colspan="2">Combined Cell</td>
</tr>

Using Rowspan

Example: A cell spanning two rows.

<tr>
    <td rowspan="2">Spans Two Rows</td>
    <td>Data A</td>
</tr>
<tr>
    <td>Data B</td>
</tr>

Colspan & Rowspan Demo

This example showcases both colspan and rowspan in a single table. A full code example is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Colspan & Rowspan Example</title>
    <style>
        table, th, td {
            border:1px solid #000;
            border-collapse: collapse;
            padding:5px;
        }
    </style>
</head>
<body>
    <h1>Merged Cells Demo</h1>
    <table>
        <tr>
            <th colspan="2">Header Spanning Two Columns</th>
        </tr>
        <tr>
            <td rowspan="2">Cell Spanning Two Rows</td>
            <td>Right Side Data</td>
        </tr>
        <tr>
            <td>More Data Below</td>
        </tr>
    </table>
</body>
</html>

Explanation: The merged header row and the multi-row cell demonstrate how colspan and rowspan can create a more complex and visually structured table.

Key Takeaways

  • colspan merges adjacent columns into one cell.
  • rowspan merges adjacent rows into one cell.
  • Combining colspan and rowspan creates flexible and complex table layouts.
  • Use these attributes to create headers or grouped sections within tables.
  • Maintain readability and logic when merging cells; ensure it benefits the data presentation.
Prev Next