DU Community Help

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.