www.webdeveloper.com
Results 1 to 14 of 14

Thread: Create table using dl, dt and dd.

  1. #1
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Question Create table using dl, dt and dd.

    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>

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    tables are designed for displaying tubular data... why re-invent the wheel?

  3. #3
    Join Date
    Mar 2012
    Posts
    1,363
    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...
    Last edited by jedaisoul; 04-30-2014 at 03:40 AM.

  4. #4
    Join Date
    Jan 2014
    Location
    Unit 3 Coopersale Hall Farm,Flux’s Lane, Epping, E
    Posts
    13
    This is an amazing stuff for me.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb

    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.
    Last edited by JMRKER; 04-30-2014 at 12:22 PM.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Question

    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?

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

  7. #7
    Join Date
    Mar 2012
    Posts
    1,363
    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.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Quote Originally Posted by jedaisoul View Post
    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?
    Last edited by JMRKER; 04-30-2014 at 10:01 PM.

  9. #9
    Join Date
    Mar 2012
    Posts
    1,363
    I've checked and it says here:
    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.
    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?

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Quote Originally Posted by jedaisoul View Post
    I've checked and it says here:

    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.

  11. #11
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    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.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  12. #12
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    @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.

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Arrow

    After some additional research:

    According to #4 of http://stackoverflow.com/questions/6...side-dl-dt-dds
    Code:
    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.

  14. #14
    Join Date
    May 2014
    Posts
    816
    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.

    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles