Build an Availability Table

HTML-CSS
1

  1. You should have a table with at least three columns and five rows, headers included.

  2. Cells in the first row should be table headers containing days of the week.

  3. Cells in the first column should be table headers with a class of time and should contain time values as their text.

  4. All data cells should have the class of available-#, where # is a number from 0 to 5 that specifies the number of available people at that time.

  5. In your :root selector, you should define six CSS variables named --color#, where # is a number from 0 to 5, and assign them each a color value. Use these variables to set the background color of the corresponding .available-# elements.

  6. In your :root selector, you should define CSS variables named --solid-border and --dashed-border. Use these variables to style the bottom borders of your data cells, alternating between solid and dashed borders depending on the row. Give the rows either the class of sharp or half to style them.

  7. You should have a div element with the id of legend. It should contain a span element with the text Availability and a div element with the id of legend-gradient.

  8. You should give the #legend-gradient element a linear gradient that transitions between all the colors from --color0 to --color5. Each color value should have two color stops (expressed as percentages) to make the transition between colors a hard line.

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

In addition to the above tips, you can use the Help button to ask a question(s):

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

4

Provide your code sample , I want to have a look to instruct you better.