MergeSociety
Projects

Creating an HTML Table for Weekly Schedules

HTML Resume Tutorial

Personal Website ExampleWritten by Massa Medi

In this tutorial, we'll guide you through creating a weekly schedule using HTML tables. This project is perfect for beginners who want to practice their HTML skills and learn how to structure data using tables.

What You'll Build:

By the end of this tutorial, you'll have created a schedule that includes:

  • Days of the week as column headers
  • Time slots as row headers
  • Cells for activities or classes

✨ Getting Started:

Before we begin, make sure you have a basic understanding of HTML tags and a text editor installed on your computer. If you're new to HTML, don't worry - we'll explain everything step by step!

Setting Up Your Workspace

Creating Your Project Folder

First, let's set up a workspace for your weekly schedule project:

Step 1: Create Your Project Folder

Think of this folder as a special drawer just for your schedule files:

👉 If you're using Windows:

  1. Right-click on your desktop
  2. Move your mouse to "New"
  3. Click "Folder"
  4. Name it "my-weekly-schedule"

👉 If you're using Mac:

  1. Right-click on your desktop
  2. Click "New Folder"
  3. Name it "my-weekly-schedule"

Step 2: Open the Folder in a Text Editor

A text editor is like your digital pencil and paper. We recommend Visual Studio Code (VS Code) because it's:

  • Free to download
  • Easy to use
  • Helps you write code better with helpful hints

🔍 How to get VS Code:

  1. Go to "code.visualstudio.com"
  2. Click the big download button
  3. Install it just like any other program

Step 3: Create Your First HTML File

Now let's create your schedule's main file:

  1. Open VS Code
  2. Click "File" → "Open Folder"
  3. Find and select your "my-weekly-schedule" folder
  4. Click "New File" (or press Ctrl+N on Windows, Cmd+N on Mac)
  5. Save it as "index.html" (this is always the main page of a website)

🎉 Congratulations!

You've just set up your web development workspace! Think of it as having your artist's studio ready - now we can start creating! In the next step, we'll start writing the basic HTML structure for your weekly schedule.

Creating the Basic HTML Structure

Setting Up the HTML Document

Let's start by creating the basic structure of our HTML document. This will serve as the foundation for our weekly schedule.

Step 1: Adding the Document Type Declaration

Open your "index.html" file and add the following code:

<!DOCTYPE html>

This line tells the browser that this document is written in HTML5.

Step 2: Adding the HTML Tag

Next, add the following code:

<html lang="en">

This line starts your HTML document and specifies that the language is English.

Step 3: Adding the Head Section

Now, add the following code:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Weekly Schedule</title>
</head>

Let's understand each line:

  • <head> contains meta information about the document.
  • <meta charset="UTF-8"> sets the character encoding to UTF-8, supporting various languages.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures that the schedule looks good on different devices and screen sizes.
  • <title> sets the title of the webpage, which appears in the browser tab.

Step 4: Adding the Body Section

Finally, add the following code:

<body>
  <h1>My Weekly Schedule</h1>
  <!-- We'll add our table here -->
</body>
</html>

What are these for?

  • <body> is where all the visible content goes (like text and images).
  • </html> closes your HTML document.
  • <h1> is the main heading for your page, like the title of a chapter in a book.

👉 Try It Out!

  1. Make sure you have added all the code provide above in your HTML file you created
  2. Save the file (Ctrl+S on Windows, Cmd+S on Mac)
  3. Find your file in your folder and double-click it
  4. It should open in your web browser!

Right now you'll see the title "My Weekly Schedule" displayed on the page. In the next step, we'll start building our schedule table.

Building the Basic Table Structure

Creating the Table for Your Weekly Schedule

Now that we have our basic HTML structure, let's create the table for our weekly schedule. We'll start with a simple structure and build upon it.

Step 1: Adding the Table Tag

Add the following code inside the <body> tag, just below the <h1> element:

<table border="1">

This creates a table with a visible border. The border attribute is like drawing a line around each cell to make it easier to see. In modern web development, we typically use CSS for styling, but this is useful for demonstration.

Step 2: Adding the Table Head (Thead)

Inside the <table> tag, add:

<thead>
  <tr>
    <th></th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
  </tr>
</thead>

Understanding the new parts:

  • <thead> contains the header content of the table, like the header of a spreadsheet.
  • <tr> stands for "table row". It defines a row in the table, like a row in a spreadsheet.
  • <th> stands for "table header". It's used for header cells, like the column headers in a spreadsheet.

Step 3: Adding the Table Body (Tbody)

Below the </thead> tag, add:

<tbody>
  <!-- We'll add time slots and activities here -->
</tbody>

Understanding the new part:

  • <tbody> will contain the main content of the table, like the body of a spreadsheet.

Step 4: Closing the Table Tag

Finally, add the closing table tag:

</table>

👉 Try It Out!

Save your file and refresh it in your web browser. You should now see a table with days of the week as column headers.

In the next step, we'll add time slots and activities to complete our weekly schedule.

Adding Time Slots and Activities

Filling in the Schedule Details

Now that we have our basic table structure, let's add time slots and some sample activities to create a full weekly schedule.

Step 1: Adding the First Time Slot

Inside the <tbody> tag, add the following code:

<tr>
  <th>9:00 AM</th>
  <td>Math</td>
  <td>Science</td>
  <td>English</td>
  <td>History</td>
  <td>Art</td>
</tr>

Understanding the new parts:

  • <tr> represents a row in our schedule, corresponding to a specific time slot.
  • <th> shows the time slot. It's like the label for each row in a spreadsheet.
  • <td> (table data) cells represent activities or classes for that time slot on a specific day.

Step 2: Adding More Time Slots

Below the first <tr>, add the following code:

<tr>
  <th>10:00 AM</th>
  <td>Physics</td>
  <td>Chemistry</td>
  <td>Biology</td>
  <td>Geography</td>
  <td>Music</td>
</tr>

This adds another row for the 10:00 AM time slot with different activities.

Step 3: Adding Break and Lunch Time

Continue adding more time slots and activities. For the break and lunch time, add:

<tr>
  <th>11:00 AM</th>
  <td>Break</td>
  <td>Break</td>
  <td>Break</td>
  <td>Break</td>
  <td>Break</td>
</tr>
<tr>
  <th>12:00 PM</th>
  <td colspan="5">Lunch Break</td>
</tr>

Understanding the new parts:

  • colspan="5" makes the lunch break cell span across all five weekdays, creating a unified lunch break row.

Step 4: Adding Afternoon Classes

Finally, add the afternoon classes:

<tr>
  <th>1:00 PM</th>
  <td>Computer Science</td>
  <td>Physical Education</td>
  <td>Literature</td>
  <td>Foreign Language</td>
  <td>Economics</td>
</tr>

👉 Try It Out!

Save your file and refresh it in your web browser. You should now see a complete weekly schedule with time slots and activities.

In the final step, we'll add some finishing touches to make our schedule more informative and user-friendly.

Adding Finishing Touches

Enhancing Your Weekly Schedule

To make our weekly schedule more informative and easier to read, let's add a few finishing touches. We'll add a caption to the table and use the colspanattribute to create a cell that spans multiple columns for lunch time.

Step 1: Adding a Caption

Add the following code right after the <table border="1"> tag:

<caption>My Class Schedule for Fall 2024</caption>

Understanding the new part:

  • <caption> adds a title or explanation for the table, like a title for a book. It's typically displayed above the table.

Step 2: Final Table Structure

Now, your complete table structure should look like this:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Weekly Schedule</title>
</head>
<body>
  <h1>My Weekly Schedule</h1>               
          
<table border="1">
  <caption>My Class Schedule for Fall 2024</caption>
  <thead>
    <tr>
      <th></th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>9:00 AM</th>
      <td>Math</td>
      <td>Science</td>
      <td>English</td>
      <td>History</td>
      <td>Art</td>
    </tr>
    <tr>
      <th>10:00 AM</th>
      <td>Physics</td>
      <td>Chemistry</td>
      <td>Biology</td>
      <td>Geography</td>
      <td>Music</td>
    </tr>
    <tr>
      <th>11:00 AM</th>
      <td>Break</td>
      <td>Break</td>
      <td>Break</td>
      <td>Break</td>
      <td>Break</td>
    </tr>
    <tr>
      <th>12:00 PM</th>
      <td colspan="5">Lunch Break</td>
    </tr>
    <tr>
      <th>1:00 PM</th>
      <td>Computer Science</td>
      <td>Physical Education</td>
      <td>Literature</td>
      <td>Foreign Language</td>
      <td>Economics</td>
    </tr>
  </tbody>
</table>
</body>
</html>

👉 Try It Out!

Save your file and refresh it in your web browser. You should now see a more polished weekly schedule with a caption and a unified lunch break row.

🎉 Congratulations!

You've successfully created an HTML table for a weekly schedule. This project has helped you practice:

  • Creating the basic structure of an HTML document
  • Using HTML tables to organize information
  • Working with table headers (<th>) and data cells (<td>)
  • Using the colspan attribute to span cells across columns
  • Adding a caption to provide context for your table

Feel free to customize this schedule further by adding your own classes, changing the time slots, or even adding weekend activities. Remember, practice makes perfect in web development!

Recommended

Personal Profile Page Example

Create a Personal Profile Page Using HTML

January 15, 2025

Learn how to build a simple personal profile page using only HTML. This project covers essential HTML elements like headings, paragraphs, lists, and links. Perfect for beginners who want to practice structuring web pages.

HTML Resume Example

Build a Professional Resume with HTML

January 17, 2025

Design a structured and professional resume using HTML. This project teaches you how to use tables, lists, and semantic HTML tags to represent work experience, skills, and education. Great for showcasing your HTML skills!

Restaurant Menu Example

Design a Restaurant Menu Using Semantic HTML

january 17, 2025

Create a restaurant menu using semantic HTML elements like sections, articles, and lists. This project focuses on organizing content with proper HTML structure and accessibility. Perfect for advanced learners!

Photo Gallery Example

Build a Photo Gallery with HTML

january 5, 2025

Learn how to create a static photo gallery using HTML image tags and captions. This project emphasizes the use of alt attributes for accessibility and proper image embedding. Great for practicing HTML media elements!

Event Invitation Example

Create an Event Invitation Page with HTML

February 12, 2025

Design an event invitation page using only HTML. This project covers headings, paragraphs, lists, and hyperlinks to create a visually appealing and functional page. Perfect for advanced HTML learners!