Class Timetable

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

51 sectionsView all →
1–5 of 51
Menus & listings

Class Timetable

Responsive · Animated
Menus & listings

Restaurant Menu

Responsive · Animated
Menus & listings

Property Listings

Responsive · Animated
Hero

Centred Gradient Hero

Responsive · Animated
Features

Bento Grid Features

Responsive · Animated

Class Timetable — Free Website Section Template

Menus & listings · v1.0.0 · Updated 2026-10-22 · Responsive · GSAP animation · HTML, React & Vue

CategoryMenus & listings
Tagstimetablescheduleclassesgymfitnessschooltabledark
Updated October 20, 2026

What's included

Features

Accessible table: day, time, class, coach, level
Turns into labelled cards on phones
Editable column headings for any kind of schedule
Up to 40 rows in an editable list
Level badges, tabular times and row hover
Note and optional booking button
Bold dark fitness theme; any preset or brand kit
Export HTML, a ZIP, React or Vue, or fork to My Code

About this section

Class Timetable — Free HTML Schedule Section Template

Class Timetable: A weekly schedule for classes, sessions or events. Rows show the day, time, class name, coach or teacher and a level badge in an accessible table on larger screens; on phones each row becomes a labelled card. A note and a booking button sit underneath. Column headings are editable, so it works for gyms, yoga studios, dance and music schools, courses and conferences.

Class Timetable puts your weekly schedule on the page in a format people can actually use. On larger screens it is an accessible table with the day, time, class, coach and level; on phones each row becomes a labelled card that is easy to read with one thumb.

Works for any schedule

Column headings are editable, so the same section serves gyms and yoga studios, dance and music schools, language courses, workshops and conference agendas. Rows are an editable list of up to 40 classes, and level badges make suitable sessions easy to spot.

Book from the timetable

A note covers first visits or changes, and an optional button links to bookings or a free trial. The bold dark theme with a lime accent suits fitness brands; switch to any preset for a calmer look.

Pair it with the Team Grid to introduce the coaches. Export HTML, a ZIP, React or Vue.

Why use it

Why Use the Class Timetable

📅
Answers "when?"
The schedule is the most visited page of most gyms and schools; this puts it in clear, searchable text.
📱
Made for phones
Rows become cards with labels, so nobody has to scroll a wide table sideways.
♿
Real table markup
Column and row headers help screen readers announce each class with its day and time.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, column headings, classes and note & button in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🏋️
Gym class schedule
List the week’s HIIT, strength and mobility classes with times, coaches and levels, and link the button to a free trial so newcomers can book straight away.
🧘
Yoga or Pilates studio
Show daily flows, restorative sessions and workshops with the teacher and level, plus a note asking students to arrive early and bring a mat.
🎵
Music or dance school
Rename the columns to Day, Time, Lesson, Teacher and Age to publish weekly lessons for children and adults, with enrolment on the button.
🎤
Conference agenda
Use the columns for Day, Time, Session, Speaker and Track to publish an event programme that attendees can check on their phones.

Got questions?

Frequently Asked Questions

Yes. Every column heading is an editable field, and the phone layout uses the same labels, so it stays consistent.

Below 720px the header row is hidden visually and each class becomes a card where every value has its label, such as Day or Coach.

Yes. It uses a real table with column headers and a row header for each class name, which screen readers use to announce the context of every cell.

Leave a class’s coach or level empty and that cell stays blank; empty levels show no badge.

It saves an editable copy of your Class Timetable in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.