Розкажіть, що відбувається:
help me, I wrote code correctly, but the program does not miss the code because of paragraph 38 or 39 (scope=“col”, scope=“row”). I need help how to solve this problem…in my opinion, the problem lies in an empty cell at the beginning of the table, but I can’t set two values at the same time
Ваш код на цей момент
<!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>
<th scope="col" scope="row"></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-2" aria-label="2 available"></td>
<td class="available-5" aria-label="5+ available"></td>
<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>
</tr>
<tr class="half">
<th class="time" scope="row">11 AM</th>
<td class="available-5" aria-label="5+ available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
<td class="available-2" aria-label="2 available"></td>
<td class="available-3" aria-label="3 available"></td>
</tr>
<tr class="sharp">
<th class="time" scope="row">1 PM</th>
<td class="available-5" aria-label="5+ available"></td>
<td class="available-5" aria-label="5+ available"></td>
<td class="available-0" aria-label="0 available"></td>
<td class="available-3" aria-label="3 available"></td>
<td class="available-5" aria-label="5+ available"></td>
</tr>
<tr class="half">
<th class="time" scope="row">3 PM</th>
<td class="available-1" aria-label="1 available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
<td class="available-0" aria-label="0 available"></td>
<td class="available-3" aria-label="3 available"></td>
</tr>
<tr class="sharp">
<th class="time" scope="row">5 PM</th>
<td class="available-2" aria-label="2 available"></td>
<td class="available-4" aria-label="4 available"></td>
<td class="available-5" aria-label="5+ available"></td>
<td class="available-1" aria-label="1 available"></td>
<td class="available-1" aria-label="1 available"></td>
</tr>
</tbody>
</table>
<div id="legend">
<span>Availability</span>
<div id="legend-gradient">
<span class="number">0</span> <span class="number2">5+</span></div>
</div>
</body>
</html>
:root{
--color0: #CBE2FE;
--color1: #9CB8FF;
--color2: #829EFF;
--color3: #637DFF;
--color4: #4E72FE;
--color5: #3058FF;
--solid-border: 1px solid black;
--dashed-border: 1px dashed black;
}
body{
background-color:#ccc;
font-size:20px;
font-family:Arial, sans-serif;
margin:0;
width:100%;
height:100vh;
}
.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{
width:35%;
height:50px;
border:2px solid black;
border-radius:10px;
margin-top:10px;
background-image: linear-gradient(
90deg,
var(--color0) 0%,
var(--color0) 16%,
var(--color1) 16%,
var(--color1) 33%,
var(--color2) 33%,
var(--color2) 49%,
var(--color3) 49%,
var(--color3) 66%,
var(--color4) 66%,
var(--color4) 83%,
var(--color5) 83%,
var(--color5) 100%
)
}
.sharp td{
border-bottom: var(--solid-border);
}
.half td{
border-bottom: var(--dashed-border);
}
table{
width:80%;
text-align:center;
margin:50px auto;
border-collapse:collapse;
min-height:300px;
}
caption{
margin-bottom:30px;
font-weight:bold;
font-size:1.5rem;
background-color:rgba(255, 188, 64, 0.5);
}
#legend{
display:flex;
flex-direction:column;
align-items:center;
position:relative;
margin:100px auto;
font-weight:bold;
}
.number{
position:absolute;
bottom:15px;
left:25%;
}
.number2{
position:absolute;
bottom:15px;
right:25%;
}
Інформація про ваш браузер:
User Agent: 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
Інформація про завдання:
Створіть таблицю доступності - Побудова таблиці доступності
Посилання на GitHub: i18n-curriculum/curriculum/challenges/ukrainian/blocks/lab-availability-table/66b36358ed4f261d64840c24.md at main · freeCodeCamp/i18n-curriculum · GitHub
