Build an Availability Table - 3 or more columns?

HTML-CSS
1

Tell us what’s happening:

I can’t pass test 4: “Your table should have at least 3 columns.”

I found one other post here about this topic and it suggested that the problem might be that the tester wasn’t designed to copy with <thead> and <tbody>, but I get the same error with or without them. Help!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Availability Table</title>
</head>

<body> 
    <div id="legend">
        <span>Availability</span>
        <div id="legend-gradient"></div>
    </div> 
    <table>
        <tr class="sharp">
            <th></th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
        <tr>
        <tr class="half">
            <th class="time">8:00</th>
            <td class="available-5">5</td>
            <td class="available-4">4</td>
            <td class="available-3">3</td>
            <td class="available-2">2</td>
            <td class="available-1">1</td>
        </tr>
        <tr class="sharp">
            <th class="time">9:00</th>
            <td class="available-1">1</td>
            <td class="available-2">2</td>
            <td class="available-3">3</td>
            <td class="available-4">4</td>
            <td class="available-5">5</td>
        </tr>
        <tr class="half">
            <th class="time">10:00</th>
            <td class="available-3">3</td>
            <td class="available-3">3</td>
            <td class="available-3">3</td>
            <td class="available-3">3</td>
            <td class="available-3">3</td>
        </tr>
        <tr class="sharp">
            <th class="time">11:00</th>
            <td class="available-1">1</td>
            <td class="available-2">2</td>
            <td class="available-1">3</td>
            <td class="available-2">4</td>
            <td class="available-1">5</td>
        </tr>
        <tr class="half">
            <th class="time">12:00</th>
            <td class="available-0">0</td>
            <td class="available-5">5</td>
            <td class="available-0">0</td>
            <td class="available-5">5</td>
            <td class="available-0">0</td>
        </tr>
    </table>
</body>

</html>

/* file: styles.css */
:root {
  --color0: #f00;
  --color1: #f70;
  --color2: #ff0;
  --color3: #77f;
  --color4: #7f7;
  --color5: #0f0;
  --solid-border: 1px solid black;
  --dashed-border: 1px dashed black;
}
.available-0 {
  background-color: var(--color0);
  color: #fff;
}
.available-1 {
  background-color: var(--color1);
}
.available-2 {
  background-color: var(--color2);
}
.available-3 {
  background-color: var(--color3);
  color: #fff;
}
.available-4 {
  background-color: var(--color4);
}
.available-5 {
  background-color: var(--color5);
}
td {
  text-align: center;
}
th.time {
  text-align: right;
}
.sharp th{
  border-bottom: var(--solid-border);
}
.sharp td {
  border-bottom: var(--solid-border);
}
.half th {
  border-bottom: var(--dashed-border);
}
.half td {
  border-bottom: var(--dashed-border);
}
#legend {
  width: 100%;
  text-align: center;
}
#legend-gradient {
  width: 100%;
  height: 24px;
  background-image: linear-gradient(,
    var(--color0) 0% 16%,
    var(--color1) 16% 33%,
    var(--color2) 33% 50%,
    var(--color3) 50% 66%,
    var(--color4) 66% 83%,
    var(--color5) 83% 100%,
  )
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:138.0) Gecko/20100101 Firefox/138.0

Challenge Information:

Build an Availability Table - Build an Availability Table

2

check all your closing tags, one by one, you will find something

3

Oh, ho! I actually found this by asking Gemini to guide me through using the dev-tools in Firefox, which showed a mysterious extra row, which guided me to the missed close-tag.

I find the dev-tools pretty opaque generally; perhaps the course could do with a set of lessons on using them.

I’m also really impressed with how quickly staff got to this answer, especially at 1AM on a holiday weekend!

4

10am on a tuesday my friend, timezones are a thing

5

No, no, wherever I am, that’s the time zone for the whole world. It is known. :slight_smile: