Styling opening hours

I'm trying to create opening hours like this website. This one looks like it was done in tables, but what's the most efficient/conventional way of 开发者_StackOverflow中文版achieving the same thing in CSS?

We've been so conditioned to avoid tables (a good thing, for the most part) that we attempt to use other code when we should be using tables.

When the content can be placed on a matrix, that is a good indication that it is tabular data and can be styled as such.

In this case, the locations appear on one axis and the days on another axis with the hours listed in the appropriate positions. This is definitely a case for tables.

The "most efficient/conventional way of achieving the same thing in CSS" is the same as it is done now. It is tabular data and therefore tables are used.

The website's opening hours presentation uses an unordered list. If you right click on the web page, and select view source on the context menu, you'll be able to see the HTML markup. Searching for "Semester 1" will navigate down to the <ul>, and <li> tags. The Listamatic site displays various ways to make vertical lists.

You can use both divs and table for that. I don't think there will be some different come in result.Just keep your css good and you can achive the exact example.If you are using table then give that table a class name so that you can write its css and can control the table property like border,width,height easily.