HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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>
</tr>
</thead>
<tbody>
<tr class="sharp">
<th class="time">9:00 AM</th>
<td class="available-2"></td>
<td class="available-4"></td>
<td class="available-1"></td>
</tr>
<tr class="half">
<th class="time">10:00 AM</th>
<td class="available-0"></td>
<td class="available-3"></td>
<td class="available-5"></td>
</tr>
<tr class="sharp">
<th class="time">11:00 AM</th>
<td class="available-1"></td>
<td class="available-1"></td>
<td class="available-2"></td>
</tr>
<tr class="half">
<th class="time">12:00 PM</th>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-4"></td>
</tr>
</tbody>
</table>
<div id="legend">
<span>Availability</span>
<div id="legend-gradient"></div>
</div>
</body>
</html>
CSS:
:root {
--color0: #e74c3c;
--color1: #f39c12;
--color2: #f1c40f;
--color3: #2ecc71;
--color4: #27ae60;
--color5: #3498db;
--solid-border: 2px solid #333;
--dashed-border: 2px dashed #999;
--solid-border: 2px solid #333;
--dashed-border: 2px dashed #999;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #fafafa;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
table {
width: 80%;
margin: auto;
border-collapse: collapse;
text-align: center;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
}
thead th {
background-color: #ddd;
}
.time {
background-color: #eee;
font-weight: bold;
}
.sharp td {
border-bottom: var(--solid-border);
}
.half td {
border-bottom: var(--dashed-border);
}
/* Background colors based on availability */
.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 styles */
#legend {
margin-top: 30px;
text-align: center;
}
#legend span {
font-weight: bold;
margin-right: 10px;
}
#legend-gradient {
display: inline-block;
width: 300px;
height: 20px;
border: 1px solid #ccc;
background-image: linear-gradient(
to right,
var(--color0) 0%,
var(--color0) 16.66%,
var(--color1) 16.66%,
var(--color1) 33.32%,
var(--color2) 33.32%,
var(--color2) 49.98%,
var(--color3) 49.98%,
var(--color3) 66.64%,
var(--color4) 66.64%,
var(--color4) 83.3%,
var(--color5) 83.3%,
var(--color5) 100%
);
}