Build an Availability Table!

1

Hi everyone, I hope you’re all doing well! I need help again with this exercise. I’m having two problems: 1) the column error the application is reporting. The other problem is, could you tell me why the bottom borders aren’t being recognized in practice? The application says they’re correct, but it’s not reflected in the table. Thanks!

<!DOCTYPE html>
<html lang="en">

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

<body>
    <table>
     
        <thead>
               <tr>
                    <th></th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
                </tr>
            </thead>

            <tbody>
                <tr class="half"></tr>
                <tr class="sharp">
                      <th class="time">09:00</th>
                    <td class="available-0"></td>
                    <td class="available-1"></td>
                    <td class="available-2"></td>
                    <td class="available-3"></td>
                    <td class="available-5"></td>
                    </tr>

                <tr class="half"></tr>
                <tr class="sharp">
                    <th class="time">10:00</th>
                    <td class="available-5"></td>
                    <td class="available-4"></td>
                    <td class="available-2"></td>
                    <td class="available-1"></td>
                    <td class="available-0"></td>
                </tr>


                <tr class="half"></tr>
                <tr class="sharp">
                    <th class="time">11:00</th>
                    <td class="available-4"></td>
                    <td class="available-5"></td>
                    <td class="available-3"></td>
                    <td class="available-2"></td>
                    <td class="available-1"></td>
                </tr>


                <tr class="half"></tr>
                <tr class="sharp">
                    <th class="time">12:00</th>
                    <td class="available-0"></td>
                    <td class="available-2"></td>
                    <td class="available-1"></td>
                    <td class="available-3"></td>
                    <td class="available-2"></td>
                </tr>

                <tr class="half"></tr>
                <tr class="sharp">
                    <th class="time">13:00</th>
                    <td class="available-5"></td>
                    <td class="available-4"></td>
                    <td class="available-3"></td>
                    <td class="available-1"></td>
                    <td class="available-0"></td>
                </tr>
                 
               
              
                <div id="legend"><span>Availability</span>
                <div id="legend-gradient">
                    </div>
                    </div>
                    
                  
                   </tbody>
                   </table>
</body>

</html>

:root{
  --color0: #0000ff;
  --color1: #0505be;
  --color2: #2c53bd;
  --color3: #4242c7;
  --color4: #5e5ec0;
  --color5: #a1a1e4;
  --solid-border: 1px rgb(18, 18, 41);
  --dashed-border: 1px white;
}
table{
  width: 600px;
  height: 200px;
  background-color:
  color: white;
  margin: 0 auto;

}


.available-0{
  background-color: var(--color0);
}

.available-1{
  background-color: var(--color1);
}
.available-2{
  background-color: var(--color2);
}
.available-3{
  background-color: var(--color3);
}
.available-4{
  background-color: var(--color4);
}
.available-5{
  background-color: var(--color5);
}


.sharp td {
  height: 40px;
 border-bottom: var(--solid-border);
  }

.half td{
  height: 2px;
  border-bottom: var(--dashed-border) ;
}


#legend{
  font-size: 2em;
  text-align: center;
  
}

#legend-gradient{
  width: 100px;
  height: 20px;
  margin: 0px 0 0 450px;
  background-image: linear-gradient(
    to right,
    var(--color0) 0% 15%,
    var(--color1) 16% 35%,
    var(--color2) 36% 56%,
    var(--color3) 57% 77%,
    var(--color4) 78% 88%,
    var(--color5) 89% 100%
  );

}

this is the link

2

these rows here are empty

3

thanks again brother nice day!!!