How would you make something like a timetable using css?

Question

How would you make something like a timetable using css? Thanks for your time!

Answer 1

Others CSS properties/parameters related to table-family elements:

For elements with display:table; determine if sizes are calculated related to the cell content ( normal behaviour ) or not:
table-layout: fixed; /* */

Also for display:table; elements, determine if cell borders are collapsing ( shared cell borders ) or not:
border-collapse: collapse; /* collapse | separate */

And only for border-collapse:separate; you can determine the space between two cell by:
border-spacing: <length>; /* one or two length values : horizontal and vertical, both if only one */

... and while verifying some stuff about that, I remember that there's also few more exotics 'display' values available, as an 'inline-table', which can probably be useful in some case ^^ But tables structures have very specifics rules/behaviours and is more complex to advanced handle than it may look: which elements are required or not, how is build internally the table structure when not defining optionnal ( implicite ) parts ( ie. you must have a display:table; parent to be able to use a display:table-cell; but it's not required to have an intermediate display:table-row, even the html parser will create one for you -- but so, you cannot access it with css selector and/or js ).

Answer 2

Thanks for the super helpful answers!

Answer 3

by using

HTML. CSS
<table> display:table;
<tr> display:table-row;
<td> display:table-cell;
<caption> display:table-caption;
rowspan. not possible
colspan. not possible