What kind of table / definition list should I use for a CSS concert program listing?

Question

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 <dl> or <table> tags:

<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>

(vs.)

<dl class="concert-listing">
 <dt>Thomas Tallis</dt><dd>Te Lucis Ante Terminum</dd>
 <dt>Arvo P&auml;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

Answer 1

First of all, I think you'll find this article quite interesting: Definition lists – misused or misunderstood?

Definition lists consist of two parts: a term and a description (...) Some people believe that definition lists should only be used for terms and definitions. Others believe that definition lists can be used to tie together any items that have a direct relationship with each other (name/value sets).

One of the disadvantages of using <dl> is that they cannot contain screen reader accessibility features such as “labels” and “headers”, so search engines will not index their content in the same way that they do for heading-based content.

Having said that, there's actually a nice example in that same article that would deal with your multiple lines issue:

dl.table-display
{
    float: left;
    width: 520px;
    margin: 1em 0;
    padding: 0;
    border-bottom: 1px solid #999;
}

.table-display dt
{
    clear: left;
    float: left;
    width: 200px;
    margin: 0;
    padding: 5px;
    border-top: 1px solid #999;
    font-weight: bold;
}

.table-display dd
{
    float: left;
    width: 300px;
    margin: 0;
    padding: 5px;
    border-top: 1px solid #999;
}

Which would produce:

In your case, I don't see why you couldn't use a <dl>. Honestly, I don't see why you wouldn't use a <table> either, both are valid structures for your list, but is, my opinion, better for longer glossary lists.

Tables are great for tabular data, and there is no proper replacement for them in that case, but they can also be a bit chunky and un-flexible/limiting. You you can make a <div> float to make elements wrap and 'imitate' a table too, but I wouldn't recommend this.

---

A note on alignment for tabular data:

With the exception of numbers, it's usually recommended to use left alignment in tables. This is mostly because of our left to right languages, which make this direction easier to read. With numbers, you need the decimals to align, so right alignment makes it easier to compare rows. But for text, left is more readable.