Sign up ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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>


<dl class="concert-listing">
 <dt>Thomas Tallis</dt><dd>Te Lucis Ante Terminum</dd>
 <dt>Arvo P&auml;rt</dt><dd>Littlemore Tractus</dd>

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

share|improve this question
Try to insert images directly to your questions. It improves your chances to get more sophisticated answers. –  Ilan May 6 '14 at 3:56
Given that the choice comes down to a semantics debate, I'm not sure this is actually a good fit for Graphic Design. This is perhaps better asked over on StackOverflow. –  DA01 May 6 '14 at 7:42

1 Answer 1

up vote 3 down vote accepted

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:

    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:

enter image description here

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.

share|improve this answer
Good answer. DLs are a great idea but due to lack of screen readers supporting it, and lack of consensus as to when it's proper to use them, they're somewhat shunned. Poor definition one loves them... –  DA01 May 6 '14 at 7:41
This is great, thanks for the help. –  Ken Williams May 6 '14 at 21:07

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.