Tell us what’s happening:
I have an empty th element in my thead part for the time of day columns. I keep getting either error 38 or 39 when I change the scope to either row or col.
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">
<title>Availability Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<caption>Weekly Meeting Availability Schedule</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">
Monday
</th>
<th scope="col">
Tuesday
</th>
<th scope="col">
Wednesday
</th>
<th scope="col">
Thursday
</th>
<th scope="col">
Friday
</th>
</tr>
</thead>
<tbody>
<tr class="sharp">
<th class="time" scope="row">9 AM</th>
<td class="available-1" aria-label="1 available"></td>
<td class="available-2" aria-label="2 available"></td>
<td class="available-3" aria-label="3 available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
</tr>
<tr class="half">
<th class="time" scope="row">10 AM</th>
<td class="available-1" aria-label="1 available"></td>
<td class="available-2" aria-label="2 available"></td>
<td class="available-3" aria-label="3 available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
</tr>
<tr class="sharp">
<th class="time" scope="row">11 AM</th>
<td class="available-1" aria-label="1 available"></td>
<td class="available-2" aria-label="2 available"></td>
<td class="available-3" aria-label="3 available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
</tr>
<tr class="half">
<th class="time" scope="row">12 PM</th>
<td class="available-1" aria-label="1 available"></td>
<td class="available-2" aria-label="2 available"></td>
<td class="available-3" aria-label="3 available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
</tr>
<tr class="sharp">
<th class="time" scope="row">1 PM</th>
<td class="available-1" aria-label="1 available"></td>
<td class="available-2" aria-label="2 available"></td>
<td class="available-3" aria-label="3 available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
</tr>
<tr class="half">
<th class="time" scope="row">2 PM</th>
<td class="available-1" aria-label="1 available"></td>
<td class="available-2" aria-label="2 available"></td>
<td class="available-3" aria-label="3 available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
</tr>
<tr class="sharp">
<th class="time" scope="row">3 PM</th>
<td class="available-1" aria-label="1 available"></td>
<td class="available-2" aria-label="2 available"></td>
<td class="available-3" aria-label="3 available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
</tr>
<tr class="half">
<th class="time" scope="row">4 PM</th>
<td class="available-1" aria-label="1 available"></td>
<td class="available-2" aria-label="2 available"></td>
<td class="available-3" aria-label="3 available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
</tr>
<tr class="sharp">
<th class="time" scope="row">5 PM</th>
<td class="available-1" aria-label="1 available"></td>
<td class="available-2" aria-label="2 available"></td>
<td class="available-3" aria-label="3 available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
</tr>
</tbody>
</table>
<div id="legend">
<span>Availability</span>
<div id="legend-gradient"></div>
</div>
</body>
</html>
/* file: styles.css */
:root {
--color0:#f5fff5;
--color1:#cffacf;
--color2:#a3ffa3;
--color3:#81fc81;
--color4:#32b832;
--color5:#097009;
--solid-border: 1px solid black;
--dashed-border: 1px dashed black;
}
.sharp td{
border-bottom: var(--solid-border);
}
.half td{
border-bottom: var(--dashed-border);
}
.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);
}
#legend-gradient{
background-image: linear-gradient(
to right,
var(--color0) 0%,
var(--color0) 17%,
var(--color1) 17%,
var(--color1) 33%,
var(--color2) 33%,
var(--color2) 50%,
var(--color3) 50%,
var(--color3) 67%,
var(--color4) 67%,
var(--color4) 83%,
var(--color5) 83%,
var(--color5) 100%
);
height: 20px;
width: 150px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Safari/605.1.15
Challenge Information:
Build an Availability Table - Build an Availability Table