« Previous Next »

Colspan & Rowspan

NAME

Student

Time Table
Lunch

Colspan Example

Output :

Rowspan Example

Output :

Colspan & Rowspan Example

Output :
AIT Tables
AIT - Weekly Schedule
Hours Mon Tue Wed Thu Fri
HTML CSS HTML CSS JavaScript
HTML CSS HTML CSS JavaScript
LUNCH BREAK
Bootstrap React JS Bootstrap React JS Project Work
Bootstrap React JS Bootstrap React JS 
<table border="1" > 
  <tr>
    <th colspan="6">AIT - Weekly Schedule</th>
  </tr>

  <tr>
    <th rowspan="6">Hours</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
  </tr>

  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>

  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>

  <tr>
    <th colspan="5">LUNCH BREAK</th>
  </tr>

  <tr>
    <td>Bootstrap</td>
    <td>React JS</td>
    <td>Bootstrap</td>
    <td>React JS</td>
    <td rowspan="2">Project Work</td>
  </tr>

  <tr>
    <td>Bootstrap</td>
    <td>React JS</td>
    <td>Bootstrap</td>
    <td>React JS</td>
  </tr>
</table>
Student Name Reg No. Module Marks Total Avg
Ayaan AIT-101 HTML 95 280 93.33
CSS 90
JavaScript 95
Zara AIT-102 HTML88 260 86.67
CSS 85
JavaScript 87
Rohan AIT-103 HTML92 270 90.00
CSS 90
JavaScript 88 
<table border="1" >

  <tr>
    <th>Student Name</th>
    <th>Reg No.</th>
    <th>Module</th>
    <th>Marks</th>
    <th>Total</th>
    <th>Avg</th>
  </tr>

  <tr>
    <td rowspan="3">Ayaan</td>
    <td rowspan="3">AIT-101</td>
    <td>HTML</td>
    <td>95</td>
    <td rowspan="3">280</td>
    <td rowspan="3">93.33</td>
  </tr>

  <tr>
    <td>CSS</td>
    <td>90</td>
  </tr>

  <tr>
    <td>JavaScript</td>
    <td>95</td>
  </tr>

  <tr>
    <td rowspan="3">Zara</td>
    <td rowspan="3">AIT-102</td>
    <td>HTML</td>
    <td>88</td>
    <td rowspan="3">260</td>
    <td rowspan="3">86.67</td>
  </tr>

  <tr>
    <td>CSS</td>
    <td>85</td>
  </tr>

  <tr>
    <td>JavaScript</td>
    <td>87</td>
  </tr>

  <tr>
    <td rowspan="3">Rohan</td>
    <td rowspan="3">AIT-103</td>
    <td>HTML</td>
    <td>92</td>
    <td rowspan="3">270</td>
    <td rowspan="3">90.00</td>
  </tr>

  <tr>
    <td>CSS</td>
    <td>90</td>
  </tr>

  <tr>
    <td>JavaScript</td>
    <td>88</td>
  </tr>

</table>

Practice Exercises

Task 1: How to merge multiple rows using the rowspan attribute?

Goal: Create a student directory card where a single student's name spans across multiple contact numbers vertically.
💡 Hint: Use rowspan="2" on the <td> containing the student's name.
💡 Show Solution 
<html>
  <head>
    <title>Rowspan Example - AIT</title>
  </head>
  <body>
    <h2>Student Contact Directory</h2>
    <p>This table demonstrates how to merge cells vertically using the rowspan attribute.</p>

    <table border="1">
      <tr>
        <th>Student Name</th>
        <th>Contact Type</th>
        <th>Phone Number</th>
      </tr>
      <tr>
        <td rowspan="2">Sameer Joshi</td>
        <td>Mobile</td>
        <td>9876543210</td>
      </tr>
      <tr>
        <td>Emergency</td>
        <td>9123456780</td>
      </tr>
    </table>
  </body>
</html>
Output :

Student Contact Directory

This table demonstrates how to merge cells vertically using the rowspan attribute.

Student Name Contact Type Phone Number
Sameer Joshi Mobile 9876543210
Emergency 9123456780
Explanation: The rowspan="2" attribute expands the name cell across 2 rows, eliminating the need to re-type the student name in the second row.
Task 2: How to combine colspan and rowspan in a complex table layout?

Goal: Build a schedule table featuring a full-width lunch row (colspan) and a side title column spanning multiple session rows (rowspan).
💡 Hint: Use rowspan="3" for side headers and colspan="3" for the full-width break row.
💡 Show Solution 
<html>
  <head>
    <title>Combined Span Example - AIT</title>
  </head>
  <body>
    <h2>AIT Tech Workshop Schedule</h2>

    <table border="1">
      <tr>
        <th colspan="4">Day 1 Schedule Overview</th>
      </tr>
      <tr>
        <th>Shift</th>
        <th>Time</th>
        <th>Topic</th>
        <th>Room</th>
      </tr>
      <tr>
        <th rowspan="2">Morning</th>
        <td>09:00 AM</td>
        <td>HTML5 & Table Layouts</td>
        <td>Lab 101</td>
      </tr>
      <tr>
        <td>11:00 AM</td>
        <td>CSS Grid & Flexbox</td>
        <td>Lab 101</td>
      </tr>
      <tr>
        <th>Break</th>
        <td colspan="3" align="center">LUNCH & NETWORKING BREAK</td>
      </tr>
    </table>
  </body>
</html>
Output :

AIT Tech Workshop Schedule

Day 1 Schedule Overview
Shift Time Topic Room
Morning 09:00 AM HTML5 & Table Layouts Lab 101
11:00 AM CSS Grid & Flexbox Lab 101
Break LUNCH & NETWORKING BREAK
Explanation: Combining colspan (horizontal merging) and rowspan (vertical merging) allows you to construct complex matrix grids like timetables and reports seamlessly.
« Previous Next »