: What kind of table / definition list should I use for a CSS concert program listing? I'm looking for some advice on how to render a classical concert program listing on a web site. I can

@Murray976

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.

Vote Up Vote Down