In the discussion thread: Unofficial DU3 Basic HTML Reference Lookup Table [View all]
Response to Make7 (Original post)
Wed Apr 15, 2015, 05:41 AM
Make7 (8,058 posts)
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. |
Always highlight: 10 newest replies | Replies posted after I mark a forum
Replies to this discussion thread
![]() |
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 | |
![]() ![]() |
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 | |
Name removed | Apr 2019 | #69 | |
Name removed | Apr 2019 | #70 | |
Post removed | Jun 2019 | #71 | |
ailsagirl | Oct 2020 | #72 | |
Make7 | Oct 2020 | #73 | |
ailsagirl | Oct 2020 | #74 | |
sarchasm | Jan 3 | #75 | |
Make7 | Jan 3 | #76 | |
sarchasm | Jan 3 | #77 |
Edit History
Please login to view edit histories.