RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/how-to-create-time-table-schedule-using-html/ below:

How to Create Time-Table Schedule using HTML?

Last Updated : 15 Jul, 2025

A time table or schedule is essential for organizing tasks, events, or classes. We’ll create a basic time-table layout using HTML.

A Table is an arrangement of rows and columns. Anyone can create a table by knowing the basics of HTML(HyperText Markup Language). In HTML we can use the <table> tag.

Approach

HTML Structure: Start with <html> and </html> tags to encapsulate your HTML document
Table Creation: Use <table> and </table> tags to define the table structure
Adding Rows: Insert rows using <tr> and </tr> tags within the table
Inserting Data: Populate cells with data using <td> and </td> tags within each row
Closing Tags: Ensure all opened tags are properly closed for syntactically correct HTML
End HTML Document: Close the <html> tag to signify the end of the HTML document

Example: In this example code, we have created a basic timetable in HTML without the usage of font color and background colors with the above-explained approach.

html


 <!DOCTYPE html>
<html>

<head>
    <title>Time Table</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }

        h1 {
            text-align: center;
            color: #343a40;
        }

        table {
            border-collapse: collapse;
            margin: 20px auto;
            background-color: #fff;
            border: 2px solid #dee2e6;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        th,
        td {
            border: 1px solid #dee2e6;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
            color: #343a40;
        }

        .highlight {
            background-color: #f8f9fa;
        }

        .special {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <h1>TIME TABLE</h1>
    <table>
        <tr>
            <th>Day/Period</th>
            <th>I<br>9:30-10:20</th>
            <th>II<br>10:20-11:10</th>
            <th>III<br>11:10-12:00</th>
            <th>12:00-12:40</th>
            <th>IV<br>12:40-1:30</th>
            <th>V<br>1:30-2:20</th>
            <th>VI<br>2:20-3:10</th>
            <th>VII<br>3:10-4:00</th>
        </tr>
        <tr>
            <td class="highlight"><b>Monday</b></td>
            <td>Eng</td>
            <td>Mat</td>
            <td>Che</td>
            <td rowspan="6" class="special"><b>LUNCH</b></td>
            <td colspan="3" class="special">LAB</td>
            <td>Phy</td>
        </tr>
        <tr>
            <td class="highlight"><b>Tuesday</b></td>
            <td colspan="3" class="special">LAB</td>
            <td>Eng</td>
            <td>Che</td>
            <td>Mat</td>
            <td class="special">SPORTS</td>
        </tr>
        <tr>
            <td class="highlight"><b>Wednesday</b></td>
            <td>Mat</td>
            <td>Phy</td>
            <td>Eng</td>
            <td>Che</td>
            <td colspan="3">LIBRARY</td>
        </tr>
        <tr>
            <td class="highlight"><b>Thursday</b></td>
            <td>Phy</td>
            <td>Eng</td>
            <td>Che</td>
            <td colspan="3" class="special">LAB</td>
            <td>Mat</td>
        </tr>
        <tr>
            <td class="highlight"><b>Friday</b></td>
            <td colspan="3" class="special">LAB</td>
            <td>Mat</td>
            <td>Che</td>
            <td>Eng</td>
            <td>Phy</td>
        </tr>
        <tr>
            <td class="highlight"><b>Saturday</b></td>
            <td>Eng</td>
            <td>Che</td>
            <td>Mat</td>
            <td colspan="3">SEMINAR</td>
            <td class="special">SPORTS</td>
        </tr>
    </table>
</body>

</html>

Output:

Time-Table Schedule using HTML

We can also add the styling elements such as font color, background color, background image, etc. to the above Time table. The attributes that can be added to the table are:

align: Aligns left, right, and center.
border: Sets the border of a table(table border width)
bgcolor: Sets the background color for a cell or whole table.
colspan: Sets the number of columns to be spanned.
rowspan: Sets the number of columns to be spanned.
cellspacing: Creates space between the cells.
cellpadding: Creates space within the cells.
background: Sets the table background with an image.
width: Sets the width of the table.
height: Sets the height of the table.

HTML is the foundation of webpages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

How to Create Time-Table Schedule using HTML ?

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4