Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 33
  1. #1
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts

    semantics of <dl> vs. <table>

    Hey everyone,

    So, I've got this look I want for a website I'm working on. The page has a list of bands, complete with a description and a photo. It'll look like this when it's done:

    Now, the idea was to use a definition list to mark everything up, and slide everything into place, but the nature of <dt> doesn't let that happen, or at least any way I can figure out (<dt> doesn't contain its list items like other elements, and it's inline).

    Of course, it could be said that a <dl> is nothing more than a two column table... and if that's the case, it'd be a piece of cake to style a table like this. So would a table be appropriate, or should I strive to get the <dl> styled the way I want it?

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    There's no reason you can't use a table for this. Make sure you structure the table correctly and then use CSS to modify the display of it. This page has examples of stylish tables.

  • #3
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tricky

    Personally I'd try and go with a definition list for this - I dunno, I've been using definition lists quite a bit recently, and at times they can be the trickiest choice to decide on - so I understand the quandry.

    I tend to look at tables as a way of cross-referencing information, like say......train timetables (or pub opening times even )

    Instinct would tell me to go for a dl, whether it makes a blind bit of difference, I couldn't say.

    Gary

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, I agree with both of you so far.

    If I was to code this without style, I'd go with a dl, it being a simple reference of band/description. But styling it is hell, because the only way to get the dt/dd to overlap is to use margins/padding and negative positioning/margins; it's killing my layout and making me type too many slashes when I try to describe it.

    The original idea was to have the photo be a bg image of the <dt>, but if I use a table, I could argue that the photo is another piece of descriptive data, making it easier to justify a table. Then I can use position:relative and absolute to piece it all together.

    It all boils down to my web nerdery, of course... how badly do I want clean code?

  • #5
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek
    It all boils down to my web nerdery, of course...
    Heheh wasn't it you who started the recent debate on the br tag? Just kidding mate.

    I think that if you read up on how tables are read logically by screenreaders etc, and format your tables accordingly - then a table could be a good option - after all, a list of bands, descriptions and photos doesn't exactly sound un-tabular.

    Still, bands, descriptions, photos still sounds like a dl to me.

    Pfffff who knows? The W3C haven't exactly been helpful on the subject of dl tags - even going so far as to suggest dl as a way of marking up dialogue (makes no sense to me?)

    Code:
    <dl>
    <dt>Laurence Olivier</dt>
    <dd>Once more into the breach dear friends, or close the wall with our English dead</dd>
    </dl>
    How can the actor be a definition term?

    What's the sense in that?

    Gary

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Look at this in Opera:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
            "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>definition list fun</title>
    	<style type="text/css">
    	/* Key style rules */
    	dl, dl * { margin: 0; }
    	dt { display: run-in; }
    	dt::after { content: "\A\A"; } /* the line-breaks */
    	dd { display: block; }
    	
    	/* Your own style rules */
    	dl {
    		font-family: Verdana; font-size: small; display: block; width: 400px;
    	}
    	dt {
    		border-bottom: 1px dotted #000;
    	}
    	dd {
    		background-color: lightgrey;
    		outline: 1px solid darkgrey;
    		padding: 10px 50px 10px 10px;
    	}
    	</style>
    </head>
    <body>
    
    <dl>
    	<dt>CSS</dt><dd>A styling language by the W3C to facilitate semantic markup.</dd>
    	<dt>XSL</dt><dd>An alternative styling language based on XML by the W3C.</dd>
    	<dt>SVG</dt><dd>A markup language for describing vector graphics by the W3C.</dd>
    </dl>
    
    </body>
    </html>
    It almost works in Safari too, except that Safari doesn't appear to understand content: "\A\A"; as two line breaks (neither does Mozilla, to be fair).

    Notice that Gecko does not support display: run-in;, but with it, you can achieve exactly what you want (in Opera and Safari at least).

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    auuughhrhhrggb%#$#45$!!~#

    That's so perfect, it's killing me. I can use it, it just won't work in the browsers I need to support (say, the ones every one uses).

    I remember reading a bit on display:run-in at www.quirksmode.org, but I saw the huge list of browser incompatablity and gave it up pretty quick.

    Here's what I'm ending up with for now... the page is a work in progress but it seems to be coming together enough. (I should mention I haven't added any hacks for IE yet, that's coming last... so don't send tons of "hey, your site looks funny" posts just yet )
    Last edited by rmedek; 01-27-2005 at 02:25 AM.

  • #8
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>51046</title>
    		<style type="text/css">
    			/*
    			© 2003 Seamus P. H. Leahy
    			You may take and improve upon this.
    			*/
    
    			/* The example of the styled table*/
    
    			body
    			{
    				font-family:sans-seif;
    				color:#0d161f;
    			}
    
    			table,
    			tbody,
    			tr,
    			td
    			{
    				display:block;
    			}
    
    			table,
    			tbody
    			{
    				display:block;
    				width:100%;
    				float:left;
    			}
    
    			tr
    			{
    				width: 400px;
    				padding: 5px 5px 5px 5px;
    				margin: 2px 100% 5px 0;
    
    				float: left;
    
    				border-width: 1px 3px 3px 1px;
    				border-style: solid;
    				border-color: #2B5074;
    
    				background-color: #F1F5FA;
    			}
    
    			thead
    			{
    				display: none;
    			}
    
    			tr > *{
    				padding: 0;
    				margin: 0;
    			}
    
    			/* I am using the :first-child as a way to style each column by itself*/
    			/* First column */
    			body table tr td:first-child
    			{
    				height: 1em;
    				padding: 0 .5em 0 .5em;
    				margin-bottom: 5px;
    
    				font-size: 130%;
    				letter-spacing: .1em;
    
    				border-width: 1px 2px 2px 1px;
    				border-color: #2B5074;
    				border-style: solid;
    
    				background-color:#D4E1EE;
    			}
    
    			/* Second column */
    			td:first-child + td
    			{
    				border-color:1px solid #2b5074;
    				float: right;
    				margin: 0 10px 10px 0;
    			}
    
    			td:first-child + td img
    			{
    				display: block;
    			}
    
    			/* Third column */
    			td:first-child + td + td
    			{
    				font-size: 90%;
    				font-weight: bold;
    			}
    		</style>
    
    		<style type="text/css">
    			dl,
    			dt,
    			dd
    			{
    				margin:0;
    				padding:0;
    			}
    			dl
    			{
    				width:400px;
    				color: #0d161f;
    			}
    			dt
    			{
    				height: 1em;
    				padding: .25em .5em .25em .5em;
    
    				font-size: 130%;
    				letter-spacing: .1em;
    
    				border-width:1px 3px 0 1px;
    				border-style:solid;
    				border-color:#2b5074;
    
    				background-color:#f1f5fa;
    			}
    			dt + dd img
    			{
    				float:right;
    				margin:0.25em .5em;
    				border:1px solid #2b5074;
    			}
    			dt + dd + dd
    			{
    				padding:.5em .5em 0 .5em;
    				min-height:100px;
    
    				border-width:0 3px 3px 1px;
    				border-style:solid;
    				border-color:#2b5074;
    
    				background-color:#f1f5fa;
    
    				margin-bottom:.5em;
    
    				font-size: 90%;
    				font-weight: bold;
    			}
    		</style>
    	</head>
    	<body>
    		<dl>
    			<dt>Title</dt>
    			<dd><img src="/images/1.jpg" alt=""></dd>
    			<dd>Description. blah blah blah blah blah blah</dd>
    
    			<dt>Title</dt>
    			<dd><img src="/images/1.jpg" alt=""></dd>
    			<dd>Description. blah blah blah blah blah blah</dd>
    		</dl>
    
    		<table>
    			<thead>
    				<tr>
    					<th>Title</th>
    					<th>Image</th>
    					<th>Description</th>
    				</tr>
    			</thead>
    			<tfoot></tfoot>
    			<tbody>
    				<tr>
    					<td>Title</td>
    					<td><img src="/images/1.jpg" alt=""></td>
    					<td>Description. blah blah blah blah blah blah</td>
    				</tr>
    				<tr>
    					<td>Title</td>
    					<td><img src="/images/1.jpg" alt=""></td>
    					<td>Description. blah blah blah blah blah blah</td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Thanks, hemebond, that's an elegant solution to the dl issue...

    Of course, it doesn't work in IE. I tried a version of the same approach but skirting the sibling selectors and got nowhere in particular, except drowning in classes and CSS. It might be worth it, though, if I can cough up an IE version.

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <dt /> is not inline...

    A definition list is the way to go here. The styling is really quite simple. I think you guys are way overthinking this one...

    http://sethrasmussen.com/common/css/bands-using-dl.html

    Also, the use of <dl /> for dialogue is very sensical. Don't take the names of the elements so literally. Think more about their relationship.

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by ]|V|[agnus
    <dt /> is not inline...

    A definition list is the way to go here. The styling is really quite simple. I think you guys are way overthinking this one...

    http://sethrasmussen.com/common/css/bands-using-dl.html
    I was just going by the w3c's line:
    Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.
    Maybe I read that wrong; anyhoo it doesn't matter 'cause it's not like it's hard to throw "dt {display: block}" in there somewhere.

    The styling you are using makes sense, and is easy enough... it's just not quite the same style. The trick for me was making the dt align with the top of the image. The image in the dl wasn't information (in my opinion) it was embellishment. So I was attempting to make it a background image for the dt (where my id was applied) and move the dd up to where it needed to be. Semantically, I thought that made the most sense.

    If I use the image inline (as I ended up doing), I have to think of it as information. So a table is cool, too, because of the structure (artist/description/photo). Yes?

  • #12
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, I'd not read that. All I know is, look at how the browsers render it. It is block-level by default in every browser I've seen.

    As far as the consistency between your diagram, you didn't show the top of the image aligning with the top of the <dt /> element. Relative positioning will do the trick.

    I've updated my example with some additional styling to tie it together(and just look a little nicer). You could use pixel values if you wanted to be absolutely precise, though this looks great if you ask me and is more flexible to varying font sizes.

    Edit: It occurs to me. I think there is some confusion about this statement:

    The term is given by the DT element and is restricted to inline content.
    I believe that refers to the content a <dt /> element may contain. This would make sense.

    Double edit: And just for the sake of the semantics discussion, I don't really agree with the use of a table in this situation at all.
    Last edited by ]|V|[agnus; 01-27-2005 at 09:00 AM.

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tabular?

    I don't really agree with the use of a table in this situation
    Ditto; if you go for hard-line semantics, I can't see tabular data in it. Then again: can an image be regarded as a "term" in this context? Seems like HTML is simply lacking in proper elements here.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #14
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, the image isn't the term the way I've marked it up, and I don't think it should be either. It is describing the 'term', the band.

    I mean, in a way it sort of is tabular data. A lot of data is. But the headings in this case are sort of implicit in the content here. A table is not needed to spell it out and rigidly organize it for purposes of analysis or anything.

    HTML lacks a lot of description, of course, but it has a lot more than people tend to utilize as well.

  • #15
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Ditto; if you go for hard-line semantics, I can't see tabular data in it. Then again: can an image be regarded as a "term" in this context? Seems like HTML is simply lacking in proper elements here.
    This is my major issue... I can't really see the image being a term (well, a description). I'd prefer to have it as a background image of either the dd or dt because, as I see it, there are only two REAL bits of data here: the band and the description (being the intro paragraph).

    Styling the dl using background images is tricky (at least for me) because moving the dd up using relative positioning leaves a space below it the size of the dd. In some cases, as much as 100px, which is a lot. If I had a block level element around each defintion term I could use absolute positioning within each element.

    I've got the tables for now, but I'd like to go with hard-line semantics; in this case, dropping the <img> tag in favor of the raw definition...

    Edit: In a complete side note, this is the sort of conversation I've been trying to have with my musician-type friends and they all agreed Flash was cool, and could I make them a website that would play a kick-*** song when they clicked on it. Jesus.
    Last edited by rmedek; 01-27-2005 at 09:36 AM.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •