HTML Table Example – How to Create a School Time Table in HTML with Code

School Time Table

Day	9:00–10:00	10:00–11:00	11:00–12:00	12:00–1:00	2:00–3:00
Monday	Math	English	Science	Lunch	Computer
Tuesday	Science	Math	English	Lunch	Sports
Wednesday	English	Computer	Math	Lunch	Science
Thursday	Math	Science	Computer	Lunch	English
Friday	Computer	English	Math	Lunch	Activity

<pre><code>

&lt;h2 style="text-align:center;"&gt;School Time Table&lt;/h2&gt;

&lt;table style="width:100%; border-collapse:collapse; text-align:center; font-family:Arial;"&gt;

  &lt;tr style="background-color:#2c3e50; color:white;"&gt;

    &lt;th style="border:1px solid #ccc; padding:8px;"&gt;Day&lt;/th&gt;

    &lt;th style="border:1px solid #ccc; padding:8px;"&gt;9:00–10:00&lt;/th&gt;

    &lt;th style="border:1px solid #ccc; padding:8px;"&gt;10:00–11:00&lt;/th&gt;

    &lt;th style="border:1px solid #ccc; padding:8px;"&gt;11:00–12:00&lt;/th&gt;

    &lt;th style="border:1px solid #ccc; padding:8px;"&gt;12:00–1:00&lt;/th&gt;

    &lt;th style="border:1px solid #ccc; padding:8px;"&gt;2:00–3:00&lt;/th&gt;

  &lt;/tr&gt;

  &lt;tr&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Monday&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Math&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;English&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Science&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Lunch&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Computer&lt;/td&gt;

  &lt;/tr&gt;

  &lt;tr&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Tuesday&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Science&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Math&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;English&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Lunch&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Sports&lt;/td&gt;

  &lt;/tr&gt;

  &lt;tr&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Wednesday&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;English&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Computer&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Math&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Lunch&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Science&lt;/td&gt;

  &lt;/tr&gt;

  &lt;tr&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Thursday&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Math&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Science&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Computer&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Lunch&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;English&lt;/td&gt;

  &lt;/tr&gt;

  &lt;tr&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Friday&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Computer&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;English&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Math&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Lunch&lt;/td&gt;

    &lt;td style="border:1px solid #ccc; padding:8px;"&gt;Activity&lt;/td&gt;

  &lt;/tr&gt;

&lt;/table&gt;

</code></pre>

Introduction

HTML tables are used to organize data into rows and columns. They are commonly used in websites to display structured information such as schedules, price lists, reports, and timetables. One practical example of using tables in HTML is creating a school time table.

In this tutorial, you will learn how to create a simple and clear school time table using HTML table tags. This example is useful for beginners who want to understand how rows, columns, headings, and table styling work in HTML.

What is an HTML Table

An HTML table is created using the <table> tag. Inside the table, rows are created using <tr>, header cells using <th>, and normal cells using <td>.

Basic structure:

• <table> → defines the table

• <tr> → table row

• <th> → header cell

• <td> → data cell

Tables help display data in a structured grid format.

The timetable is created using the HTML <table> element. The first row uses <th> tags to define column headings such as time slots. Each following row represents a day of the week using <td> cells.

Inline CSS styling is applied to:

• add borders

• align text center

• add padding

• set background color for header

This makes the timetable clear and readable.

---

Where HTML Tables Are Used

HTML tables are used in many real-world web pages:

• school and college timetables

• exam schedules

• employee work schedules

• product comparison tables

• reports and statistics

Learning tables is essential for web design basics.

---

Conclusion

Creating a school time table in HTML is a simple and practical way to understand how tables work. By using <table>, <tr>, <th>, and <td> tags, you can organize information into a structured layout. This example shows how rows and columns combine to display a weekly schedule clearly.

Practicing HTML tables helps beginners build strong foundations in web development and page layout design.