I'm looking for some advice on how to render a classical concert program listing on a web site. I can define the composer & title using either
<table style="width:100%"> <tr><td class="composer">Benjamin Britten</td> <td class="song">Rejoice in the Lamb</td></tr> <tr><td class="composer">J.S. Bach</td> <td class="song">Der Geist Hilft Unsrer Schwachheit Auf</td></tr> ... </table>
<dl class="concert-listing"> <dt>Thomas Tallis</dt><dd>Te Lucis Ante Terminum</dd> <dt>Arvo Pärt</dt><dd>Littlemore Tractus</dd> ... </dl>
Conceptually, this feels more like a
<dl> to me, but one problem is that some long titles end up flowing onto the next line, like the Bach here: https://www.singersinaccord.org/radiant-dawn , and I'm not sure how to deal with that.
I'm also not sure whether I want the title or composer on the left, and it would be great if I could just define the data and use CSS to flip things around.
There are plenty of examples out there that show what things could look like: https://www.google.com/search?q=concert+program&tbm=isch