Create an event schedule with HTML table

We saw the article on CSS Tricks about Building a conference schedule with CSS grid and this prompted us to share our approach, as we recently faced similar challenge.

We’ve been asked to create an event schedule for a 3 days event. This event has the particularity of having 7 stages. Therefore we took different approach how to layout the events across the 3 days schedule. In a small/medium conference you might have up to 4 or 5 stages which is likely they can be fitted on a column/row layout for the respective stage/time slot. In our case not all stages have events all the time, so every event is based on time and is associated to a stage through their colour and description as per the example below:

Planning

Our first thought was to build the schedule using HTML <table>, but we actually started prototyping the planner using divs and CSS display: grid. The reason we started with grid was because the markup would be easier to create and maintain events using a CMS, but soon we realised it was relying heavily on CSS to build the layout.

In the end we found that using the HTML <table> would be the right element to represent the data we had. In fact this is tabular data (information presented in a two-dimensional table) so why not use it? This also means it would be full supported and accessible by every browser, no need to create fallbacks for display: grid.

Below you can find both prototypes using CSS grid and table - we haven’t styled for small device, please bear with us.

Example using CSS grid

See the Pen Event program using CSS Grid by Liquid Light (@liquidlight) on CodePen.

Example using HTML <table>

See the Pen Event program using HTML table by Liquid Light (@liquidlight) on CodePen.

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Let me know if you found this article useful, if it could be improved or if you have any other suggestions.