HTML Table Practice Tasks
■ Level 1 (Basic)
1 Create a simple table with student names and their marks (5 rows, 3 columns). Columns: Name
| Subject | Marks.
2 Set border, cell spacing, and background color for the table.
3 Give alternate rows different colors (e.g., white and lightgray).
■■ Level 2 (Intermediate)
1 Create a 'Monthly Expenses' table with columns: Item | Category | Cost | Payment Method.
Make the header bold with blue background, and add a total cost row (bold, yellow
background).
2 Make a table using both rowspan and colspan. Example: a college timetable where 'Lunch
Break' is merged across all columns.
■ Level 3 (Hard)
1 Create an 'Employee Attendance Record' table with columns: Emp ID | Name | Department |
Present Days | Absent Days | Attendance %. Add gradient header (CSS), white text, hover
effect (change row background).
2 Create a 'Product Comparison Table' for 3 mobiles. First column: Specs (RAM, Battery,
Camera, Price). Highlight the best feature with green color.
■ Final Project Task (Expert Level)
1 Title: University of Sindh – BSIT Result 2025 (use ).
2 Columns: Roll No | Name | Subject 1 | Subject 2 | Subject 3 | Subject 4 | Subject 5 | Total |
Grade | Status.
3 Use rowspan for grouped subject titles.
4 Apply CSS effects:
5 • Borders only for table lines.
6 • Sticky header (CSS position: sticky).
7 • Even rows with light background.
8 • Red text for failed students, green for passed.
9 • Hover effect: highlight row on mouseover.