Event Schedule / Agenda Table Template

Clearly present your conference or event agenda with this easy-to-read, multi-track schedule table.

This template is designed to manage complex schedules, using the rowspan attribute to visually represent sessions that cover multiple time blocks.

Screenshot of an event schedule with multiple tracks and a session that spans two time slots.

Get Source Code → Preview →

About this Event Schedule Table

Organizing a multi-track event schedule requires a layout that is both dense and clear. This template provides a time-based grid structure perfect for conferences, workshops, or festivals. The core feature is the practical use of the rowspan attribute on table cells. This allows a single session block to vertically span multiple rows, accurately showing that a talk or event lasts longer than a single time slot. The styling is clean and color-coded to help users distinguish between different tracks or event types.

Key Features:

Handles Complex Timings: Effectively uses rowspan to display sessions of varying lengths.
Multi-Track Layout: Columns are designed to represent different rooms, stages, or content tracks.
Color-Coded Sessions: Simple CSS classes allow for easy color-coding of sessions by category (e.g., Keynote, Workshop, Break).
Clean & Scannable: The minimalist design ensures the focus remains on the schedule information itself.

Ideal Use Cases:

Conference and symposium agendas.
Workshop or training timetables.
University class schedules.
Music festival lineups.

Dependencies:

None. This template uses only pure HTML and CSS.

Accessibility Notes:

While rowspan and colspan can create accessibility challenges if not used carefully, this table maintains a logical flow. Scoped headers (th) are used for both time slots (scope="row") and tracks (scope="col") to ensure screen readers can announce the full context of each session.

Code

Here's the full code for the event schedule / agenda table:

.schedule-table caption {
    text-align: left;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.schedule-table thead th {
    padding: 12px;
    background-color: #2c3e50;
    color: white;
    font-weight: 600;
}

.schedule-table tbody th { /* Time column */
    padding: 12px;
    font-weight: bold;
    text-align: right;
    width: 100px; /* Give time column a fixed width */
    vertical-align: top;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

.schedule-table tbody td {
    border: 1px solid #dee2e6;
    padding: 12px;
    vertical-align: top; /* Important for rowspan */
}

/* Session Styling */
.session {
    padding: 10px;
    border-radius: 4px;
    height: 100%;
}

.session-title {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}
.session-speaker {
    font-size: 0.85rem;
    color: #555;
    display: block;
}
.session-details {
    font-size: 0.85rem;
    margin-top: 8px;
    color: #666;
}

/* Color coding for session types */
.session-keynote { background-color: #fdf2f2; border-left: 4px solid #e74c3c; }
.session-talk { background-color: #ebf5fb; border-left: 4px solid #3498db; }
.session-break { background-color: #f2f3f4; border-left: 4px solid #95a5a6; }
.session-workshop { background-color: #fef5e7; border-left: 4px solid #f39c12; }
</style>

<table class="schedule-table">
    <caption>Conference Day 1 Schedule</caption>
    <thead>
        <tr>
            <th>Time</th>
            <th scope="col">Track 1: Main Auditorium</th>
            <th scope="col">Track 2: Workshop Room A</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">09:00 - 10:00</th>
            <td colspan="2"> 
                <div class="session session-keynote">
                    <span class="session-title">Opening Keynote: The Future is Now</span>
                    <span class="session-speaker">Dr. Evelyn Reed</span>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">10:00 - 11:00</th>
            <td>
                <div class="session session-talk">
                    <span class="session-title">Deep Dive into Modern CSS</span>
                    <span class="session-speaker">Jane Doe</span>
                </div>
            </td>
            <td>
                <div class="session session-talk">
                    <span class="session-title">Accessibility First</span>
                    <span class="session-speaker">John Smith</span>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">11:00 - 12:30</th>
            <td rowspan="2"> 
                 <div class="session session-workshop">
                    <span class="session-title">Workshop: Building Interactive Components</span>
                    <span class="session-speaker">Emily White</span>
                     <div class="session-details">(Continues until 12:30 PM)</div>
                </div>
            </td>
            <td>
                <div class="session session-talk">
                    <span class="session-title">Serverless Architecture Patterns</span>
                    <span class="session-speaker">Michael Brown</span>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">12:00 - 12:30</th>
            <td>
                
                <div class="session session-talk">
                    <span class="session-title">Effective Database Indexing</span>
                    <span class="session-speaker">Sarah Green</span>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">12:30 - 13:30</th>
            <td colspan="2">
                <div class="session session-break">
                    <span class="session-title">Lunch Break</span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

View Output