Tabellen oder DL-Style für Farbampeln mit Bullets

[xwolfde]

Inspirationsbild:

Ich denke das Bild zeigt eine interessante und nützliche Sache, die man mit einer Table oder eine Definitonlist mit einem guten CSS umsetzen könnte.

Bei einer Table könnte ich mir vorstellen, dass es so im HTML aussehen könnte:

<table class="colortable">
  <tr class="green">
      <th>A</th>
     <td><span class="bullet">Düngemittel</span>....</td>
   </tr>

  <tr class="lime">
      <th>B</th>
     <td> 
          <ul class="bulletlist">
              <li>Schiffahrt</li>
              <li>Mobile Maschinen</li>
          </ul>
     </td>
   </tr>
...
</table>

Die erste Spalte ist ein <th> mit eine Class aus der Vererbung der Reihe aus <tr>, die sowohl die Hintergrundfarbe als auch die Schriftfarbe bestimmt. (Keine individuellen Werte, damit die Farbkontraste richtig gemacht werden). Der Pfeil nach rechts kann über CSS gemacht werden. Für die Bulletpoints, also die Umrandung gibt es dann die class "bullet" für span oder p Elemente. Und für die Liste eine Extra-Klasse bulletlist, die dann ale Listeitems entsprechend setzt.

Die Farbampeln von Grün über Gelb nach Rot und deren vorhandene Abstufungen inkl. barrierefreier Kontraste muss man natürlich noch definieren.

Ich denke, das ganze wäre ein nettes Nice to Have.