Create table using dl, dt and dd.

JMRKER

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.

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

ShrineDesigns

tables are designed for displaying tubular data... why re-invent the wheel?

jedaisoul

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

dlopez

This is an amazing stuff for me.

JMRKER

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.

JMRKER

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?

<!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, 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;
}
</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>

jedaisoul

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 referred to the p tags as spurious because they are unclosed. As far as I am aware </p> is not optional.

JMRKER

jedaisoul;1328919 wrote:

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

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?

jedaisoul

Tag omission
A p element must have a start tag.
A p element&#8217;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.

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?

JMRKER

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?

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.

Sup3rkirby

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: "Is there a method to modify the CSS to make this appear more like a table?"
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 offsetHeight in javascript, CSS does not offer any similar methods. Setting a min-height 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 <dt>, <dd> (and the <p> or <br> tag as a clearfix). But this only gives you a container for the row, rather than individual separation for each column.

JMRKER

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.

deathshadow

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, NOT 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.