Class Timetable HTML Table Activity

What you'll learn

In this activity, you'll create your own interactive class timetable using HTML tables. You'll learn how to:

• Structure data using HTML table elements (<table>, <tr>, <td>, <th>)
• Style tables with colors and borders
• Organize information in a clear, readable format
• Apply CSS classes for custom styling

Total time needed: 45-60 minutes

Before You Start

:white_check_mark: Watch the video tutorial above
:white_check_mark: Have your school timetable ready as reference
:white_check_mark: Think about your favorite colors for styling
:white_check_mark: Make sure you're logged into EduBlocks

Preview

:computer: Activity Instruction

Remix this project!

:warning: Warning Important: After clicking the link above, make sure to click the "Clone" button to create your own copy of the project!

---

:art: Steps to Create Your Class Timetable

Time needed: 30-40 minutes

Step One: Create the Basic Table Structure (5 minutes)

1. Start by dragging the <table> block to your workspace
2. Add your first <tr> (table row) block inside the table
3. Create the header row with days of the week using <th> blocks

:bulb: Tip Start with just Monday to Friday - you can always add weekends later!

Step 2: Style Your Table (10 minutes)

1. Find the style block shown below and drag it to your table
2. Choose colors that make your timetable easy to read
3. Try different background colors for different subjects

Step 3: Add Table Borders (5 minutes)

1. Use the border block to make your table cells visible
2. Set the border width to "1" or "2" pixels
3. Choose a border color that matches your design

:bulb: Tip If your borders look doubled, don't worry! The next step will fix that.

Step 4: Collapse the Borders (2 minutes)

1. Add the border-collapse block to make clean, single borders
2. This makes your table look more professional

Step 5: Build Your Timetable Content (10-15 minutes)

1. For each time slot, create a new <tr> (row) block
2. Start each row with a <th> block for the time (e.g., "9:00-10:00")
3. Add <td> blocks for each subject in that time slot
4. Don't forget to include break times and lunch!

:warning: Warning Remember: Each row needs the same number of cells. If you have 6 columns (Time + 5 days), every row needs 6 cells!

Step 6: Add Special Styling (5-8 minutes)

1. Create CSS classes for different types of periods:
   • .break for break times (maybe a light yellow background?)
   • .lunch for lunch period (perhaps a light green?)
   • .pe for Physical Education (light blue could work!)
2. Apply these classes to make your timetable colorful and easy to read

---

:clipboard: Sample Timetable Structure

Here's an example of how your finished timetable might look:

Time	Monday	Tuesday	Wednesday	Thursday	Friday
9:00-10:00	Math	English	Science	Math	Art
10:00-11:00	English	Math	History	Science	Music
11:00-11:30	BREAK	BREAK	BREAK	BREAK	BREAK
11:30-12:30	Science	PE	Math	English	Computer
12:30-1:30	LUNCH	LUNCH	LUNCH	LUNCH	LUNCH

:bulb: Tip You can customize this with your actual subjects and times. Add more rows if your school day is longer!

:bulb: Troubleshooting Common Issues

Time needed: Use this section if you get stuck (5 minutes)

Problem: My table cells don't line up properly

Solution: Count your cells! Each row must have exactly the same number of <td> or <th> blocks.

Problem: I can't see my table borders

Solution: Make sure you've added both the border style AND the border-collapse style to your table.

Problem: My colors aren't showing up

Solution: Check that you've typed the color names correctly (e.g., "lightblue" not "light blue").

Problem: The table looks squished

Solution: Add padding to your cells using a style block with padding: 10px;

:information_source: Info Still having issues? Watch the video tutorial again or ask your teacher for help!

:emoji:️ Project Submission

Time needed: 5 minutes

When you've completed your class timetable and tested that everything works:

:warning: Warning Before submitting, check that:

• :white_check_mark: Your table has clear borders
• :white_check_mark: All time slots and subjects are filled in
• :white_check_mark: Colors make the timetable easy to read
• :white_check_mark: Break and lunch times are included
• :white_check_mark: The webpage displays correctly in preview mode

:emoji: Submit Your Project

Click here to submit your Class Timetable HTML Table

:speech_balloon: Extension Ideas (Optional)

If you finish early, try these challenges:

• Add weekend columns for Saturday and Sunday
• Create hover effects that highlight rows or columns
• Add emoji icons for different subjects (:emoji: for Math, :books: for English)
• Make alternating row colors for easier reading
• Add a title above your table using an <h1> block

Great job! You've learned how to create structured data displays using HTML tables! :tada: