HTML Table Colspan & Rowspan :


In HTML tables, the colspan and rowspan attributes are used to define how many columns or rows a table cell should span. These attributes are applied to the <td> (table data) or <th> (table header) elements.

Colspan (Column Span):

The colspan attribute defines the number of columns a cell should span horizontally.

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Data 1,1</td>
        <td colspan="2">Data 1,2 (spanning 2 columns)</td>
    </tr>
    <tr>
        <td>Data 2,1</td>
        <td>Data 2,2</td>
        <td>Data 2,3</td>
    </tr>
</table>


In this example, the cell with "Data 1,2" spans two columns using colspan="2".

Rowspan (Row Span):

The amount of rows that a cell should extend vertically is specified by the rowspan attribute.

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td rowspan="2">Data 1,1 (spanning 2 rows)</td>
        <td>Data 1,2</td>
        <td>Data 1,3</td>
    </tr>
    <tr>
        <td>Data 2,2</td>
        <td>Data 2,3</td>
    </tr>
</table>

In this example, the cell with "Data 1,1" spans two rows using rowspan="2".


These attributes are useful when you need to merge or split cells in a table to create more complex layouts. They are commonly used when dealing with tables that require a combination of column and row spans.

Post a Comment

Previous Post Next Post

Popular Items