HTML Table Attributes: colspan and rowspan with Real-Life Examples

Let's understand how colspan and rowspan work in real business scenarios like employee records, attendance sheets, and evaluations.

📁 Example 1: Employee Directory using colspan

Employee Name Contact Info
Priya Sharma priya@example.com 9876543210
Rohit Verma rohit@example.com 8765432109 
<table>
  <tr>
    <th>Employee Name</th>
    <th colspan="2">Contact Info</th>
  </tr>
  <tr>
    <td>Priya Sharma</td>
    <td>priya@example.com</td>
    <td>9876543210</td>
  </tr>
</table>

Explanation: The "Contact Info" header uses colspan="2" to span over Email and Phone columns.

🗓️ Example 2: Attendance Sheet using rowspan

Employee Date Status
2025-07-05 Present
Amit Singh 2025-07-05 Present
2025-07-06 Absent 
<table>
  <tr>
    <th rowspan="2">Employee</th>
    <th>Date</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>2025-07-05</td>
    <td>Present</td>
  </tr>
  <tr>
    <td rowspan="2">Amit Singh</td>
    <td>2025-07-05</td>
    <td>Present</td>
  </tr>
  <tr>
    <td>2025-07-06</td>
    <td>Absent</td>
  </tr>
</table>

Explanation: Amit Singh appears once in the first column for 2 rows using rowspan="2".

⭐ Example 3: Performance Review (Combining colspan & rowspan)

Name Q1 Q2
Score Remarks Score Remarks
Neha Patel 85 Good 90 Excellent
Ravi Kumar 75 Average 80 Good 
<table>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Score</th>
    <th>Remarks</th>
    <th>Score</th>
    <th>Remarks</th>
  </tr>
  <tr>
    <td>Neha Patel</td>
    <td>85</td>
    <td>Good</td>
    <td>90</td>
    <td>Excellent</td>
  </tr>
</table>

Explanation: The header row uses rowspan for the Name and colspan to group scores and remarks under each quarter.