Create an event schedule with HTML table

Written by João Augusto on 25th June 2019

1 comment

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:

alt text

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.

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

This article was posted in Development, Quick Tips by João Augusto

  • João Augusto

    João Augusto

    A big football, photography and Apple fan - our front-end developer João has not only got the eye for making our websites sparkle, he’s got to have the latest, greatest gear to do it on. @joaoeaugusto

Comments

Super!
The solution with HTML table looks great! I think, it's much easier than the one with css-grid.

Alex13/07/2019 05:38

Post a comment

*
*
You are currently offline. Some pages or content may fail to load.