HTML Table Rowspan and Colspan

HTML Table with Rowspan

In addition to colspan, HTML tables also support the "rowspan" attribute, which allows you to merge cells vertically. When you apply the rowspan attribute to a table cell (<td> or <th>), it spans across multiple rows, effectively combining them into a single cell.

To use the rowspan attribute, you add it to the opening tag of the cell & specify the number of rows you want the cell to span. For example, if you want a cell to span across three rows, you would use rowspan="3".

For example : 

<table>

  <tr>

    <th>Name</th>

    <td>Harsh</td>

  </tr>

  <tr>

    <th rowspan="2">Contact</th>

    <td>harsh@example.com</td>

  </tr>

  <tr>

    <td>123-456-7890</td>

  </tr>

</table>

Output

In this example, the second <th> element has a rowspan="2" attribute, which means it spans across two rows. The "Contact" header effectively merges the email & phone number rows into a single cell.

When you use rowspan, the merged cell takes up the space of the specified number of rows, & the remaining cells in the column adjust accordingly. It's important to ensure that the total number of cells in each column matches the number of rows in the table, taking into account any merged cells.

Example

Now, let's see a practical example that will show the usage of rowspan in an HTML table. 

Consider a table that represents a simple schedule:

<table>

  <tr>

    <th>Time</th>

    <th>Monday</th>

    <th>Tuesday</th>

    <th>Wednesday</th>

  </tr>

  <tr>

    <td>9:00 AM</td>

    <td rowspan="2">Meeting</td>

    <td>Training</td>

    <td>Conference</td>

  </tr>

  <tr>

    <td>10:00 AM</td>

    <td>Break</td>

    <td>Meeting</td>

  </tr>

  <tr>

    <td>11:00 AM</td>

    <td>Lunch</td>

    <td>Lunch</td>

    <td>Lunch</td>

  </tr>

  <tr>

    <td>12:00 PM</td>

    <td>Presentation</td>

    <td rowspan="2">Workshop</td>

    <td>Discussion</td>

  </tr>

  <tr>

    <td>1:00 PM</td>

    <td>Break</td>

    <td>Break</td>

  </tr>

</table>

Output

In this example, we have a table with five rows & four columns representing a schedule for Monday, Tuesday, & Wednesday.

The second row has <td rowspan="2">Meeting</td>, which merges the cells for the 9:00 AM & 10:00 AM time slots on Monday. This indicates that the meeting spans across two hours.

Similarly, in the fourth row, <td rowspan="2">Workshop</td> is used to merge the cells for the 12:00 PM & 1:00 PM time slots on Tuesday. This shows that the workshop extends across two hours.

Note: Rowspan & colspan can be combined within the same table to create even more complex & customized table structures based on your specific requirements.

Frequently Asked Questions

Can you use colspan & rowspan together in the same table?

Yes, you can use both colspan & rowspan attributes together in the same table to create complex cell merging configurations.

Is there a limit to the number of columns or rows a cell can span?

No, there is no specific limit. However, it's important to ensure that the table structure remains logical & visually coherent.

Can you apply colspan or rowspan to the <table> or <tr> elements?

No, colspan & rowspan attributes are only applicable to <td> & <th> elements within a table.

Conclusion

In this article, we learned about the colspan & rowspan attributes in HTML tables. Colspan allows you to merge cells horizontally, while rowspan enables you to merge cells vertically. With the help of these attributes, you can create more complex & visually appealing table layouts. Apart from these, we saw practical examples that demonstrated how colspan & rowspan can be used to organize & present data effectively. 

You can also practice coding questions commonly asked in interviews on Coding Ninjas Code360. 

Also, check out some of the Guided Paths on topics such as Data Structure and Algorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.