All Tracks/lab availability table/
Đang tải...
Hướng dẫn thử thách
1 / 1

Build an Availability Table

**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **User Stories:** 1. You should have a table with at least three columns and five rows, headers included. 1. The first row should have table header cells containing days of the week. 1. The first column should have table header cells with a `class` of `time` containing time values as their text. 1. 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. 1. Your table should have a `caption` element with the text `Weekly Meeting Availability Schedule`. 1. All table header cells in the first row (the days of the week) should have a `scope` attribute with the value `col`. 1. All table header cells in the first column (the time cells) should have a `scope` attribute with the value `row`. 1. All data cells with an availability class should have an `aria-label` attribute that describes the availability level (e.g., `0 available` for the `available-0` cells, `1 available` for the `available-1` cells, etc., and `5+ available` for the `available-5` cells). 1. 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. 1. 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. 1. 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`. 1. You should give the `#legend-gradient` element a linear gradient that transitions between all the colors from `--color0` to `--color5` with hard lines. **Note:** Be sure to link your stylesheet in your HTML to apply your CSS.
Vượt qua bài kiểm tra hiện tại để mở khóa bài tiếp theo.
main.html
UTF-8 • Tab Size: 2Kiểm tra bài:⌘↵
Test Output
Thử thách này không có bài test tự động. Hãy quan sát kết quả trực tiếp ở khung Preview.