Complexity of a Simple Chart

by Jeff Cave

HTML

<table>
<caption>
  <h1>Status</h1>
  <p><time>@2023-02-02</time></p>
</caption>
<tbody>
 <tr>
  <td>gov.sec</td>
  <td>⛔</td>
  <td>Out of Date</td>
 </tr>
 <tr>
  <td>market.nyse</td>
  <td>🔄</td>
  <td>1.3456 Hours</td>
 </tr>
 <tr>
  <td>gov.sedar</td>
  <td>✅</td>
  <td></td>
 </tr>
 <tr>
  <td>market.tsx</td>
  <td>✅</td>
  <td></td>
 </tr>
</tbody>
</table>

CSS

caption{
  border:1px solid black;
  border-bottom:none;
}
caption time{
  font-size:xx-small;
}
caption *{
  padding:0;
  margin:0;
}
table{
  border-collapse: collapse;
  border:1px solid black;
  border-top:none;
  padding:1em;
  font-size:xx-large;
  font-family:sans-serif;
}
tr{
  margin-left: 1em;
}
td{
  text-align:left;
  border:1px solid black;
  border-left:none;
  border-right:none;
  padding: 0.1em;
}

tr:hover{
  background-color:lightgrey;
}