☄ EXPOLORE MIND ⚜ Tutorial ? JIQA Biography News
PRV MENU NEXT

Spanning Rows and Columns

22-01-18 Course- HTML5-Simple

When you work with tables, it is sometimes necessary to merge one or two adjacent cells into one the process of merging one or more adjacent cell into one is known as spanning cells. If the cells are spanned vertically, it is known as rowspan; whereas, if the cells are spanned horizontally, it is known as colspan.

In this section, you learn to span rows and column in a table.

Spanning Rows

To span the cell vertically, use the rowspan attribute with the <td> or <th> tag. The rowspan attribute requires a number equal to the number of cells you want to merge vertically into one column.

Let’s do the following steps to span the rows:


<!DOCTYPE html>
<head>
    <title>Example of spanning rows</title>
</head>
<body bgcolor=”alicablue”>
<table border=”1” align=”right” width=”95%” bgcolor=”gray” cellpadding=”8” cellspacing=”6”>
<caption>
    <h2>Student Details</h2>
</caption
<tr>
    <th rowspan=”3”>Student name with Date of Birth and Address</th>
</tr>
</tr>
    <tr>
        <td align=”center”>Manish Kumar</td>
        <td> 15-03-1983</td>
        <td align=”center”>Flat No, 303, Shipra Suncity, Ghaziabad</td>
    </tr>
    <tr>
        <td align=”center”>Rajesh Gupta </td>
        <td>22-02-1984</td>
        <td align=”center”> H. No.-32, Rajendra Place, New Delhi</td>
    </tr>
    <tr>
        <td align=”center”>Manisha Dubey </td>
        <td>05-02-1995</td>
        <td align=”center”> H. No.-125, Patel Nagar, New Delhi</td>
    </tr>
</table>
</body>
</html>

Save the document the name of RowSpan.html. Open the document on browser.

Note: when you combine the rows, rowspan includes the current cell also.

Spanning Columns

To span the cells horizontally, use the colspan attribute with the <td> or <th> tag. The colspan attribute requires a number equal to the number of cell you want to combine horizontally into one row.

Let’s do the following steps to span the column:


<!DOCTYPE html>
<head>
    <title>Example of spanning rows</title>
</head>
<body bgcolor=#ccc>
<table border=”1” align=”right” width=”95%” bgcolor=”#fff” cellpadding=”8” cellspacing=”6”>
<caption>
    <h2>Student Details</h2>
</caption>
<tr>
    <th colspan=”3”>Student name with Date of Birth and Address</th>
</tr>
    <tr>
        <td align=”center”>Manish Kumar</td>
        <td> 15-03-1983</td>
        <td align=”center”>Flat No, 303, Shipra Suncity, Ghaziabad</td>
    </tr>
    <tr>
        <td align=”center”>Rajesh Gupta </td>
        <td>22-02-1984</td>
        <td align=”center”> H. No.-32, Rajendra Place, New Delhi</td>
    </tr>
    <tr>
        <td align=”center”>Manisha Dubey </td>
        <td>05-02-1995</td>
        <td align=”center”> H. No.-125, Patel Nagar, New Delhi</td>
    </tr>
</table>
</body>
</html>

Save the document the name of ColSpan.html. Open the document on browser.

Note: When you combine the columns, colspan includes the current cell also.

PRV MENU NEXT