Event Schedule Agenda Table

<!DOCTYPE html>
<title>My Example</title>

.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>