Hello there,
for my learning, I want to design an HTML for a calendar, which will be fully functional, which CSS tool should I use: TABLE or flex-box?
There will be 7 columns and 5 rows: Not a difficult design. Is it essential to use a table or Flex box could also be a good choice?
flex or grid would probably be the best way to display a calendar.
Table would work and 90% of the calendars out there probably still use them but semantically, a list displayed as flex or grid would work better.
I was thinking about the semantics and my first thought was it should be a table. If you think of the usual month layout, it is a matrix of day columns and week rows.
But you could interpret a month as an ordered list of days. The list would probably be easiest to style.
When viewed in a grid/table form, some months span 6 weeks/rows. For example this month starts with the 1st and 2nd at the weekend. Ten there are 4 full weeks from the 3rd to the 30th. Then the 31st drops onto a 6th week.
So what is your take? Table or Flexbox/Grid?
I think the real question is Table or OL, as these are HTML elements which define semantics. There is an argument for either one.
Then how you style them is a separate question. Eg, you could have a table element styled with flex. I’m not saying definitely do that, just it is a possibility.
Using grid/flex is really easy and it cuts down on lot of the CSS that you will write.
Here’s an example that I did awhile back:
@media screen and (min-width: 27em) {
.calendar-container { display: block; }
.calendar {
display: grid;
width: 100%;
grid-template-columns: repeat(7, minmax($c80px5em * $factor, 1fr)); // $c80px5em
grid-template-rows: $c50px3125em * $factor; // $c50px3125em
grid-auto-rows: $c50px3125em * $factor;
overflow: auto;
&-container {
margin-left: 1.250em;
overflow: hidden;
box-shadow: $box-shadow;
border-radius: $c10px625em * $factor;
background: #fff;
max-width: $c1200px75em * $factor;
}
&-header {
display: flex;
justify-content: space-around;
text-align: center;
padding: $c10px625em * $factor 0;
background: linear-gradient(to bottom, rgb(250, 251, 253) 0%, rgba(255, 255, 255, 0) 100%);
border-bottom: 1px solid rgba(166, 168, 179, 0.12);
h1.output-month {
color: $color-dark-01;
font-size: 1.0em;
font-weight: bold;
}
a {
text-decoration: none;
text-transform: capitalize;
color: $color-dark-01;
font-size: 1.0em;
margin-top: 1.0em;
&:hover, &:active {
color: #4786ff;
}
}
}
}
Sorry I was using Sass, but it still shouldn’t be too hard to understand.
Thanks for your time to help in the post, but I have no understanding of GRID. I have started learning it from today, in a couple of days when I will have some knack I will coke back to your post.
I will try something with flexbox later.
I’m with Sam. I think it would be an HTML table.
I found this “hybrid” yesterday. A table formatted as a grid. Anybody used a table formatted as a grid?
I think the semantics of a calendar lean heavily towards a table but I can also see cases for ol, dl or other methods. I don’t think there’s a clear answer but any one of the above should be good enough. There’s even the time element that might be considered more appropriate but I’m not really sold on that.
Whatever html you use Grid makes this very easy as shown in this example. Of course a table structure complicates that and you have to have nested grids or use display:contents as in the link from @sibertius above but is not supported in Safari or IOS.
In what way is it not supported? I cannot se any problem using Safari 14
I was referring to the long(ish) standing bug that makes content totally inaccessible in Safari.
It’s one of the reasons that I avoid display:contents other than for demos etc. It’s a big shame as its one of my favourite properties 
I’m sure something could be worked out without using display:contents . I’m guessing all that would be needed is to remove the display:grid from the table element and apply those rules directly to the tr instead. Then set the thead to sticky. No need for display:contents at all.
for a beginner just use table for the mean time and when you’re used to it you can go for a complex one.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
