Use <thead> as legend

[mariusGundersen]

The <thead> isn't used for anything today, but it contains the information needed for the legend. The only thing necessary is to remove the first <th>, since it is the x-axis. The rest of the content could be shown as the legend.

A further improvement would be to use the first <th> in the <thead> as the x-axis title. It's possible to get the y-axis as well, using the following table:

<table>
  <thead>
    <tr>
      <th rowspan=2 scope="col">x-axis title</th>
      <th colspan=5 scope="col">y-axis title</th>
    </tr>
    <tr>
      <th scope="col">value-1</th>
      <th scope="col">value-2</th>
      <th scope="col">value-3</th>
      <th scope="col">value-4</th>
      <th scope="col">value-5</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

By using two rows in the thead we get both the legend, the x-axis and the y-axis title

[ramiy]

Read this https://chartscss.org/docs/anatomy/

The <thead> element is used by screen-readers and search-engines.

How do you propose to use it in the x-axis title?

[mariusGundersen]

By using rowspan and colspan to indicate that it is for multiple rows and columns. For example, if there are two rows of data in the table then rowspan=2 will cover both those rows. If there are five columns of data then colspan=5 covers those columns.