HomeLatest ThreadsGreatest ThreadsForums & GroupsMy SubscriptionsMy Posts
DU Home » Latest Threads » Forums & Groups » Main » Community Help (Forum) » Unofficial DU3 Basic HTML... » Reply #53

Response to Make7 (Original post)

Wed Apr 15, 2015, 06:41 AM

53. Displaying Data As Tables

The html tags for tables (<table>, <thead>, <tbody>, <th>, <tr>, <td>) are not allowed here because DU uses tables for the page layouts - since anyone using them in a post would stand a good chance of messing up the page formatting those particular tags are ignored in messages by the DU software. However, there are still a few ways to present data in tables on DU.

Perhaps the easiest way is to make a table in some other program (e.g. Excel) and take a screen cap, crop it, put it on an image server and post the image. Of course then no one can copy and paste data from an image. If you want people to have the ability to copy data, you can use CSS to format text in tabular form.

The easier (but not as pretty) CSS way is to use a white-space declaration to preserve spaces on lines and space the info so it lines up vertically. (Use the [br] tag for new lines to avoid the double-spacing introduced by the DU software.) Easiest way to do these "tables" is to use a text editor (Notepad will work) set to a monospace font and line everything up, add [br] tags at the end of lines, then scrunch all the lines together and copy/paste that into a DU post. The basic code should look something like this:

[div class="excerpt" style="margin-left:1em; border:1px solid #bfbfbf; border-radius:0.4615em; box-shadow:-1px -1px 3px #bfbfbf inset;"][div style="font-family:monospace; font-size:1.1em; white-space:pre;"]cell A1    cell A2[br]cell B1    cell B2[br]cell C1    cell C2[/div]

Which will look like this:

[div class="excerpt" style="background-color:#ffffff; margin-left:1em; border:1px solid #bfbfbf; border-radius:0.4615em; box-shadow:0px 0px 6px #999999;"][div style="font-family:monospace; font-size:1.1em; white-space:pre;"]cell A1 cell A2[br]cell B1 cell B2[br]cell C1 cell C2

To make tables look really nice (with the ability to add borders, background colors, etc.), you can use the table values of the display property. The basic idea is this:

[div class="excerpt" style="margin-left:1em; border:1px solid #bfbfbf; border-radius:0.4615em; box-shadow:-1px -1px 3px #bfbfbf inset;"][div style="display:table;"]
  [div style="display:table-row;"]
    [div style="display:table-cell;"]text cell A1[/div]
    [div style="display:table-cell;"]text cell A2[/div]
  [/div]
  [div style="display:table-row;"]
    [div style="display:table-cell;"]text cell B1[/div]
    [div style="display:table-cell;"]text cell B2[/div]
  [/div]
  [div style="display:table-row;"]
    [div style="display:table-cell;"]text cell C1[/div]
    [div style="display:table-cell;"]text cell C2[/div]
  [/div]
[/div]
To prevent the double line spacing, you'll have to squeeze all the [div] elements together when you get all the data in its proper place. To have a single place to set padding, margins, etc., I'd suggest setting the spacing declarations in the display:table element and set all the others to inherit. Like so:

[div class="excerpt" style="margin-left:1em; border:1px solid #bfbfbf; border-radius:0.4615em; box-shadow:-1px -1px 3px #bfbfbf inset;"][div style="display:table; padding:0em 2em 0em 0em;"][div style="display:table-row; padding:inherit;"][div style="display:table-cell; padding:inherit;"]cell A1[/div][div style="display:table-cell; padding:inherit;"]cell A2[/div][/div][div style="display:table-row; padding:inherit;"][div style="display:table-cell; padding:inherit;"]cell B1[/div][div style="display:table-cell; padding:inherit;"]cell B2[/div][/div][div style="display:table-row; padding:inherit;"][div style="display:table-cell; padding:inherit;"]cell C1[/div][div style="display:table-cell; padding:inherit;"]cell C2[/div][/div][/div]
Which hopefully will look like this:

[div class="excerpt" style="background-color:#ffffff; margin-left:1em; border:1px solid #bfbfbf; border-radius:0.4615em; box-shadow:0px 0px 6px #999999;"][div style="display:table; padding:0em 2em 0em 0em;"][div style="display:table-row; padding:inherit;"][div style="display:table-cell; padding:inherit;"]cell A1[div style="display:table-cell; padding:inherit;"]cell A2[div style="display:table-row; padding:inherit;"][div style="display:table-cell; padding:inherit;"]cell B1[div style="display:table-cell; padding:inherit;"]cell B2[div style="display:table-row; padding:inherit;"][div style="display:table-cell; padding:inherit;"]cell C1[div style="display:table-cell; padding:inherit;"]cell C2

It looks like more work than it actually is - most of it is just copying and pasting.

Reply to this post

Back to OP Alert abuse Link to post in-thread

Always highlight: 10 newest replies | Replies posted after I mark a forum
Replies to this discussion thread
Arrow 68 replies Author Time Post
Make7 May 2012 OP
rocktivity May 2012 #1
Make7 May 2012 #3
muriel_volestrangler May 2012 #4
Make7 Jun 2012 #6
JustanAngel Sep 2013 #36
maxcopper Jun 2013 #31
JustanAngel Sep 2013 #35
JUSTIN JOSEPH Sep 2017 #65
Scuba May 2012 #2
RainDog May 2012 #5
Fortinbras Armstrong Sep 2013 #33
RainDog Sep 2013 #34
Ohio Joe Jun 2012 #7
Lugnut Jun 2012 #8
Lookz Jun 2012 #9
Egalitarian Thug Dec 2012 #10
Make7 Dec 2012 #11
annabanana Dec 2012 #12
Make7 Mar 2013 #13
muriel_volestrangler Mar 2013 #15
Make7 Mar 2013 #16
Agschmid Mar 2013 #14
Make7 Mar 2013 #17
Make7 Apr 2013 #18
lumberjack_jeff Apr 2013 #26
Make7 Apr 2013 #28
lumberjack_jeff Apr 2013 #29
davidpdx Apr 2014 #47
Make7 May 2014 #48
Ptah Apr 2013 #19
RainDog Apr 2013 #20
Make7 Apr 2013 #21
RainDog Apr 2013 #22
Make7 Apr 2013 #23
petronius Apr 2013 #24
Make7 Apr 2013 #25
petronius Apr 2013 #27
TexasTowelie May 2013 #30
params193 Aug 2013 #32
Name removed Sep 2013 #37
Name removed Nov 2013 #38
RainDog Jan 2014 #39
RainDog Jan 2014 #40
Make7 Jan 2014 #41
RainDog Jan 2014 #42
Make7 Jan 2014 #43
RainDog Jan 2014 #44
Make7 Jan 2014 #45
Paladin Mar 2014 #46
Name removed May 2014 #49
tarheelsunc May 2014 #50
Make7 May 2014 #51
laserhaas Dec 2014 #52
LineReply Displaying Data As Tables
Make7 Apr 2015 #53
Initech Jan 2017 #61
Name removed Oct 2015 #54
ColesCountyDem Oct 2015 #55
w0nderer Oct 2015 #56
Name removed Nov 2015 #57
Name removed Mar 2016 #58
blueseas Jan 2017 #59
Make7 Jan 2017 #60
nikibatts Feb 2017 #62
Name removed Jun 2017 #63
steve2470 Sep 2017 #64
Denzil_DC Oct 2017 #66
steve2470 Oct 2017 #67
progree Oct 2017 #68
Please login to view edit histories.