Create table using dl, dt and dd.

@JMRKERApr 30.2014

I have been experimenting with the <dl>, <dt> and <dd> tags to create a tabular display.

My main problem is making the borders appear consistent with differing amounts of displayed information.
They do not form the “grid” display I would like to create.

Is there a method to modify the CSS to make this appear more like a table?
I’ve tried using a min-height setting, but it doesn’t change much.

[code] <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″ /> <meta name=”viewport” content=”width=device-width”> <meta name=”viewport” content=”initial-scale=1.0, user-scalable=yes”/> <title> FAQ DL/DT/DD page </title>

<style type=”text/css”> @media screen, print { body { line-height: 1.2 } }

.para { display:inline-block; } dl p { clear:left; } dt { float:left; width:200px; margin:0px 0px 0px 0px; padding: 0px 3px 0px 3px; border-top:1px solid blue; border-right:1px solid blue; border-bottom:1px solid blue; border-left:1px solid blue; } dd { float:left; width:200px; margin:0px 0px 0px 0px; padding: 0px 3px 0px 3px; border-top:1px solid blue; border-right:1px solid blue; border-bottom:1px solid blue; border-left:1px solid blue; } </style>

</head> <body>

<h3> DL / DT / DD Tables </h3>

<dl>

<dt>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </dt> <dd class=”para”> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </dd> <dd> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </dd> <p>

<dt>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </dt> <dd class=”para”> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </dd> <dd> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </dd> <p>

</dl>

</body> </html>

[/code]

to post a comment

CSS

13 Comments(s) _↴

@ShrineDesignsApr 30.2014 — #tables are designed for displaying tubular data... why re-invent the wheel?

@jedaisoulApr 30.2014 — #Are you sure you mean to use DL, DT and DD tags? They are intended for definition lists, not tables. To achieve a tabular output, perhaps you should use the DL etc. [b]within[/b] a table? That might give you the structure you are seeking.

Oh, and there seem to be spurious P tags in the example you gave...

@dlopezApr 30.2014 — #This is an amazing stuff for me.

@JMRKERauthorApr 30.2014 — #I'm not trying to re-invent the wheel.

Purpose was to see if I could use the tabular format of a table on both

the desktop and phone without horizontal scrolling forever

or have such a tiny display.

It works well for my needs except for the "border" displays.

I was looking for a fix for that.

Note: The "spurious p tags" are required so that the floats become cancelled before each new dt tag.

Take them out or comment out the "dl p { clear:left; } line in the style section to see what I mean.

@JMRKERauthorApr 30.2014 — #Playing around some more and came up with this.

I'm using the min-height:420px setting, but I would rather make it a bit more flexible than that.

Is there an easy way to determine the maximum height of any particular dt or dd that it could be used to set the min-height value for each element on a line?

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta name="viewport" content="width=device-width"&gt;
 &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=yes"/&gt;
 &lt;title&gt; FAQ DL/DT/DD page &lt;/title&gt;
 
 &lt;style type="text/css"&gt;
 @media screen, print { body { line-height: 1.2 } }
 
 .para { display:inline-block; }
 dl  p { clear:left; }
 
 dt, dd { min-height:420px; }
 
 dt  { float:left; width:200px;
 margin:0px 1px 1px 0px;
 padding: 0px 3px 0px 3px;
 border-top:1px solid blue;
 border-right:1px solid blue;
 border-bottom:1px solid blue;
 border-left:1px solid blue;
 }
 dd  { float:left; width:200px; 
 margin:0px 1px 1px 0px;
 padding: 0px 3px 0px 3px;
 border-top:1px solid blue;
 border-right:1px solid blue;
 border-bottom:1px solid blue;
 border-left:1px solid blue;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;h3&gt; DL / DT / DD Tables &lt;/h3&gt;
 
 &lt;dl&gt;
 
 &lt;dt&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;/dt&gt;
 &lt;dd class="para"&gt;
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. &lt;/dd&gt;
 &lt;dd&gt;
 It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. &lt;/dd&gt;
 &lt;p&gt;
 
 &lt;dt&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;/dt&gt;
 &lt;dd class="para"&gt;
 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. &lt;/dd&gt;
 &lt;dd&gt;
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. &lt;/dd&gt; &lt;p&gt;
 
 &lt;/dl&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@jedaisoulApr 30.2014 — #[i]Note: The "spurious p tags" are required so that the floats become cancelled before each new dt tag. Take them out or comment out the "dl p { clear:left; } line in the style section to see what I mean.[/i]

I referred to the p tags as spurious because they are unclosed. As far as I am aware </p> is not optional.

@JMRKERauthorMay 01.2014 — #
I referred to the p tags as spurious because they are unclosed. As far as I am aware </p> is not optional.[/QUOTE]

My understanding is:

The paragraph tag (<p>) can be used as a paired tag (with the </p>) or alone. If you are writing HTML4 or HTML5 the end tag is not required, but the end tag, </p> is required for writing XHTML.

Am I wrong about this? Should I alter the <!doctype html> statement?

Could I substitute <p /> for the <p></p> paring if it is required?

Or just use a <br> or <br /> instead?

@jedaisoulMay 01.2014 — #I've checked and it says [url=http://www.w3.org/TR/html-markup/p.html]here[/url]:

Tag omission

A p element must have a start tag.

A p element’s end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is not an a element.
[/quote]
So, yes the closing tag is conditionally optional. However, in this circumstance, <br> seems more intuitive to me. The bottom line is: does it validate?

@JMRKERauthorMay 01.2014 — #I've checked and it says [url=http://www.w3.org/TR/html-markup/p.html]here[/url]:

So, yes the closing tag is conditionally optional. However, in this circumstance, <br> seems more intuitive to me. The bottom line is: does it validate?[/QUOTE]

That was my next step.

My current step was to create the display I wanted with the borders extending the full height for each dt/dd row,

ie; to "simulate" the table layout without the horizontal squish factor when the page is resized for different devices.

If it does not do what I want, then there is little sense in validation (for me at this time, IMHO).

PS: Yes, on further consideration, the <br> or <br /> does make more sense than the <p> in this instance.

@Sup3rkirbyMay 01.2014 — #I'll admit this is certainly a noble effort. Tables (both 'classic' and CSS) are certainly an annoying issue when it comes to mobile/responsive pages. However, when it comes to your original question: [B][I]"Is there a method to modify the CSS to make this appear more like a table?"[/I][/B]

To my knowledge at this very moment the answer is no.

With CSS alone you cannot set attributes based on relative properties of other elements/selectors. Where you have things such as [B]offsetHeight[/B] in javascript, CSS does not offer any similar methods. Setting a [B][I]min-height[/I][/B] is a hack of sorts, but as you realized, not all that desirable.

The only other 'hack' I could come up with for this type of scenario was to add an additional element as a parent container for the [B]<dt>[/B], [B]<dd>[/B] (and the [B]<p>[/B] or [B]<br>[/B] tag as a clearfix). But this only gives you a container for the row, rather than individual separation for each column.

@JMRKERauthorMay 01.2014 — #@Sup3rkirby

Thanks for the thoughts.

I'll look into the effort and/or desirability to add a "parent" container for the individual rows.

CSS and JS together are a pretty powerful combination, but I guess they still have limitations.

@JMRKERauthorMay 01.2014 — #After some additional research:

According to #4 of http://stackoverflow.com/questions/6392513/can-i-put-anything-inside-dl-dt-dds

<i>
 </i>Inside a DL you can only put DT and DD tags. 
 A DT tag is an inline tag, so you should not put block elements in it. 
 A DD tag can contain basically anything you want, it's a flow content tag.

So it looks like the container <div> idea is out.

Bummer. ?

@deathshadowMay 08.2014 — #1) you have multiple DD per DT, that's gibberish.

2) Without seeing the content these don't appear to be terms and definitions, so a DL may be the wrong tag.

3) If this is indeed tabular data, you should use a table, specifically your DT should be <th scope="row"> with the DD being TD... one TR per set isn't going to break the bank on code.

4) if this isn't tabular data, this looks like it should be numbered headings and DIV... or P... really you have enough text in there you might really want to look at getting some P in there...

Though honestly, It's hard to say with place-holder lorem-ipsum instead of actual content, since actual content is what should be dictating the markup you use, [b]NOT[/b] your final appearance.

Since again, if you are choosing tags based on what they look like, you're choosing the wrong tags for all the wrong reasons; likewise if the meaning of a tag (terms and definitions in this case) is unrelated to what the content is, well... same story. Wrong tags for the wrong reasons.

HE double hockey sticks you're got class="para" on them, why aren't they paragraphs?!?

My question would be, what makes you think this should be terms and definitions in the first place?

Also in #CSS _↴

FF/IE Image Float Issue Css 3-d flip print media

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

Create table using dl, dt and dd.

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Create table using dl, dt and dd.

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴