Welcome to DU! The truly grassroots left-of-center political community where regular people, not algorithms, drive the discussions and set the standards. Join the community: Create a free account Support DU (and get rid of ads!): Become a Star Member All Forums Issue Forums Culture Forums Alliance Forums Region Forums Support Forums Help & Search

Make7

(8,543 posts)
53. Displaying Data As Tables
Wed Apr 15, 2015, 06:41 AM
Apr 2015

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 &lsqb;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 &lsqb;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;"]&lsqb;div style="font-family:monospace; font-size:1.1em; white-space:pre;"]cell A1    cell A2&lsqb;br]cell B1    cell B2&lsqb;br]cell C1    cell C2&lsqb;/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;"]&lsqb;div style="display:table;"]
  &lsqb;div style="display:table-row;"]
    &lsqb;div style="display:table-cell;"]text cell A1&lsqb;/div]
    &lsqb;div style="display:table-cell;"]text cell A2&lsqb;/div]
  &lsqb;/div]
  &lsqb;div style="display:table-row;"]
    &lsqb;div style="display:table-cell;"]text cell B1&lsqb;/div]
    &lsqb;div style="display:table-cell;"]text cell B2&lsqb;/div]
  &lsqb;/div]
  &lsqb;div style="display:table-row;"]
    &lsqb;div style="display:table-cell;"]text cell C1&lsqb;/div]
    &lsqb;div style="display:table-cell;"]text cell C2&lsqb;/div]
  &lsqb;/div]
&lsqb;/div]
To prevent the double line spacing, you'll have to squeeze all the &lsqb;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;"]&lsqb;div style="display:table; padding:0em 2em 0em 0em;"]&lsqb;div style="display:table-row; padding:inherit;"]&lsqb;div style="display:table-cell; padding:inherit;"]cell A1&lsqb;/div]&lsqb;div style="display:table-cell; padding:inherit;"]cell A2&lsqb;/div]&lsqb;/div]&lsqb;div style="display:table-row; padding:inherit;"]&lsqb;div style="display:table-cell; padding:inherit;"]cell B1&lsqb;/div]&lsqb;div style="display:table-cell; padding:inherit;"]cell B2&lsqb;/div]&lsqb;/div]&lsqb;div style="display:table-row; padding:inherit;"]&lsqb;div style="display:table-cell; padding:inherit;"]cell C1&lsqb;/div]&lsqb;div style="display:table-cell; padding:inherit;"]cell C2&lsqb;/div]&lsqb;/div]&lsqb;/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.

I never thought I'd miss the marquee rocktivity May 2012 #1
Linking to YouTube or Vimeo without embedding. Make7 May 2012 #3
How to link to YouTube giving a start time muriel_volestrangler May 2012 #4
There doesn't seem to be a way to embed while adding parameters. Make7 Jun 2012 #6
Did you take a class? JustanAngel Sep 2013 #36
welcome & Help maxcopper Jun 2013 #31
Wow! JustanAngel Sep 2013 #35
about myself JUSTIN JOSEPH Sep 2017 #65
Bookmarked. Thank you. Scuba May 2012 #2
k&r n/t RainDog May 2012 #5
What does K&R mean? Fortinbras Armstrong Sep 2013 #33
kick and recommend RainDog Sep 2013 #34
Excellent - This should get pinned - nt Ohio Joe Jun 2012 #7
Yeah, it should be pinned. Lugnut Jun 2012 #8
Was looking for this Lookz Jun 2012 #9
Would you expand this to include symbols and similar? n/t Egalitarian Thug Dec 2012 #10
I'm not sure precisely what you mean by symbols. Make7 Dec 2012 #11
Mmmph.. Thanks.(Bookmarked) I lost my old annabanana Dec 2012 #12
The Meta version of this thread (which came first) at archive.org: Make7 Mar 2013 #13
You're our saviour! I thought that had been lost, since you had to be logged in muriel_volestrangler Mar 2013 #15
Meta was viewable to the public for about half a year or so. Make7 Mar 2013 #16
Kicked to the top! Very helpful. n/t Agschmid Mar 2013 #14
Problems with links and the [link: | ] tag? What to do to fix them. Make7 Mar 2013 #17
Bored with DU's plain gray excerpt boxes? Make7 Apr 2013 #18
What is "my user style sheet"? n/t lumberjack_jeff Apr 2013 #26
A 'user style sheet' allows you to customize the appearance of elements on a website. Make7 Apr 2013 #28
Cool! I didn't know that you could substitute a style sheet hosted locally for the site's. lumberjack_jeff Apr 2013 #29
Wow, fancy stuff davidpdx Apr 2014 #47
I'm not sure what you mean by "the color of the box (outside)". Make7 May 2014 #48
Thanks for this thread, Make7. Ptah Apr 2013 #19
embedded links RainDog Apr 2013 #20
There are some issues with links and the [link] tag. Make7 Apr 2013 #21
here's the post RainDog Apr 2013 #22
The plus signs in the web address are making it not work right. Make7 Apr 2013 #23
Excellent thread, thank you! And now a question: petronius Apr 2013 #24
I haven't been able to get any type of line break to work within the 'About Me' text. Make7 Apr 2013 #25
Thanks! Here's the ATA thread I started: petronius Apr 2013 #27
Placing code to resize images here to avoid opening more windows. TexasTowelie May 2013 #30
html params193 Aug 2013 #32
Message auto-removed Name removed Sep 2013 #37
Message auto-removed Name removed Nov 2013 #38
I can't post an image in my sig line RainDog Jan 2014 #39
hmmm RainDog Jan 2014 #40
What browser are you using? Make7 Jan 2014 #41
nevermind RainDog Jan 2014 #42
The DU software will ignore the [IMG] tags, so it should work without them... Make7 Jan 2014 #43
embedding video RainDog Jan 2014 #44
No, an [iframe] tag won't work here. You can only embed videos from YouTube or Vimeo. Make7 Jan 2014 #45
This message was self-deleted by its author Paladin Mar 2014 #46
Message auto-removed Name removed May 2014 #49
"Sorry, tables are not allowed " tarheelsunc May 2014 #50
Well, that's kind of a joke. Make7 May 2014 #51
Great Thread laserhaas Dec 2014 #52
Displaying Data As Tables Make7 Apr 2015 #53
So I want to have whole paragraphs of text with images using the stylized coding. How do I do that? Initech Jan 2017 #61
Message auto-removed Name removed Oct 2015 #54
With your 11th post you can start a new thread. ColesCountyDem Oct 2015 #55
:-) w0nderer Oct 2015 #56
Message auto-removed Name removed Nov 2015 #57
Message auto-removed Name removed Mar 2016 #58
How do you post a photo from an article blueseas Jan 2017 #59
Well, it kind of depends on what device, operating system, and browser you are using. Make7 Jan 2017 #60
Thank you very much for this. nikibatts Feb 2017 #62
Message auto-removed Name removed Jun 2017 #63
hey Make7, for some reason all the HTML is showing now on your OP, hmm nt steve2470 Sep 2017 #64
Somebody above linked to an archived version that reads correctly: Denzil_DC Oct 2017 #66
thanks! nt steve2470 Oct 2017 #67
Elad has said that special html tags are unlikely to return progree Oct 2017 #68
Message auto-removed Name removed Apr 2019 #69
Message auto-removed Name removed Apr 2019 #70
Post removed Post removed Jun 2019 #71
How do I insert a carriage return into my sig line? ailsagirl Oct 2020 #72
Well, if double spacing is okay, you could use an empty [blockquote] element. Make7 Oct 2020 #73
Thank you! ailsagirl Oct 2020 #74
is it possible to resize an image for your sig line? sarchasm Jan 2021 #75
The DU stylesheet scales images down to a max height of 100 pixels or max width of 400 for sigs. Make7 Jan 2021 #76
Thank you. I'm wanting to reduce the size 50% without resizing if possible. sarchasm Jan 2021 #77
For accents like É that work in thread and post titles use "&Eacute;" etc. muriel_volestrangler Feb 2021 #78
Useful tip. Thanks. Make7 Feb 2021 #79
How to center text? Lasher Feb 2021 #80
Unfortunately, that is no longer possible. Make7 Feb 2021 #81
That's just what I thought. Lasher Feb 2021 #82
Can someone remind me how to change font color for text? hlthe2b Feb 2021 #83
That's been disabled since the 2016 hack — like most other user formatting options. Make7 Feb 2021 #84
Thanks for trying. I'd already attempted what I thought had worked before to no avail... hlthe2b Feb 2021 #85
Over in the science forum, we'd love the old codes for superscripts and subscripts. NNadir Jan 2022 #86
I'd Swear That DU Used To Support the Strike Tag. ruet Sep 2022 #87
[s]text[/s] used to work here, s̶t̶r̶i̶k̶e̶t̶h̶r̶o̶u̶g̶h̶ with Unicode characters is the best alternative. Make7 Sep 2022 #88
This one seems fairly unobjectionable. Igel Apr 2023 #90
I cannot figure out how to post a photo AmBlue Nov 2022 #89
Latest Discussions»Help & Search»DU Community Help»Unofficial DU3 Basic HTML...»Reply #53