What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 130 Stack Exchange communities.

It seems like a lot of people try to display tables in SO questions but don't do a very good job. Is there any markdown syntax that supports creating a proper table?

share|improve this question
    
Other than SQL posts, how often does this actually happen? Do you have any example posts of people mangling tables? –  Michael Mrozek Dec 30 '10 at 15:09
19  
@Michael mmm, arguably, people don't mangle tables because they don't use them in the first case because the functionality isn't there. It would come in handy sometimes to have a possibility to present tabular data, although I don't know how to implement it exactly (Converting the way I show in my answer into a real <table> might be one possibility) –  Pëkka Dec 30 '10 at 16:43
1  
@Pekka Sure, I'm not against it, but the OP said "It seems like a lot of people try to display tables in SO questions but don't do a very good job", which I've not really seen –  Michael Mrozek Dec 30 '10 at 17:06
3  
@Michael Mrozek - I've run across performance comparisons or feature comparisons that are munged into the code formatting. It would be nice to see them (and the SQL posts) formatted more nicely. –  jball Dec 30 '10 at 17:40
2  
2  
Found through @KennyTM's link, another non-SQL table use: truth tables –  jball Dec 30 '10 at 18:43
    
Markdown, no. But Johannes posted a nice example in Please add support for tables in answers and questions, using Google Chart Tools. That needs some manual URL-encoding though, to use it in Markdown. (Johannes simply posted a screenshot there; don't be fooled! ;-)) –  Arjan Aug 20 '11 at 16:10
    
@Michael Mrozek - Are you kidding? I see multiple examples of mangled tables every day. –  JohnFx Sep 29 '11 at 20:08
    
Here's an example of an answer that needs table formatting: apple.stackexchange.com/a/55729/7833 –  daviesgeek Jul 6 '12 at 19:12
    
This is how they solve tables on MediaWiki: mediawiki.org/wiki/Help:Tables At first it looks a bit complicated, but if you carefully look at it, it isn't too bad at all. It saves a lot of typing effort in comparison with the (unsupported) html markup and manual formtting in code blocks. Just my €0.02 –  jippie Aug 6 '12 at 7:22
    
@MichaelMrozek: "Do you have any example posts of people mangling tables?" electronics.stackexchange.com/a/42266/142 –  endolith Oct 10 '12 at 13:32
    
@MichaelMrozek: Another example where tables would have been useful. I'm trying to number the sections of a regular expression to make it easier to illustrate what each is doing. Simple tables would have made the horizontal alignment much easier. –  Kelly S. French Feb 20 '13 at 15:50
    
Here is another example: stackapps.com/questions/288/… –  uɐɯsO uɐɥʇɐN Mar 3 '13 at 8:24
3  
GitHub Flavored Markdown supports them: github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables –  Benjamin Mar 27 '13 at 12:17
2  
Why not just enable github flavored markdown tables here? –  trusktr Oct 12 '13 at 22:51

14 Answers 14

up vote 159 down vote accepted
--------------------------------------------------
| No | Sadly        | There is none              |
--------------------------------------------------
| Except this, which is a poor alternative       |
--------------------------------------------------
| There really      | should be one              |
--------------------------------------------------

And with the new mobile theme, code blocks no longer require horizontal scrolling, but get line wrapping instead. That makes even small tables like the example above look bad, like:

Bad rendering on small screen     Bad rendering on Android 4.x

share|improve this answer
7  
Unicode box-drawing would improve this, kind of ;-) (Markdown source) –  Arjan Aug 20 '11 at 12:40
18  
But see the wonderful Format Text as Table web app to create ASCII-art tables easily. –  Jay Levitt Apr 1 '12 at 22:30
1  
Indeed on android there isn't a monospace font so it's even worse :( –  Rory Apr 5 '12 at 14:50
3  
@Rory, I've just tested on both Android 2.3.x and 4.x, and both support monospace just fine. –  Arjan Apr 14 '12 at 10:26
    
@Arjan was going on Jeff's answer here but you're right, it's now working on my android too xD –  Rory Apr 14 '12 at 10:29
    
@Arjan: The Unicode box drawing looks bad on FF12/Windows. The ASCII one looks nice, though. –  nhahtdh Jul 7 '12 at 18:04
    
And, @nhahtdh, somehow the Unicode box drawing needs slightly more space too, making even the small tables from my examples break on a Nexus S (in portrait). –  Arjan Jul 7 '12 at 19:08
    
@Rory Safari defaults to using a non monospace font. –  Cole Johnson Aug 23 '13 at 8:18
    
(Hmm, mobile no longer uses a fixed width font in Chrome on my Android 4.2.2; the stock browser works just fine, and so do Chrome and Mobile Safari on iOS. Need to investigate, some day...) –  Arjan Feb 9 at 8:11
1  
+1 for recursive picutre –  thenaglecode Apr 3 at 2:14
1  
@thenaglecode: +1 for pointing out the recursive picture –  arunmoezhi Apr 25 at 6:10

Depends which markdown library stackoverflow is using but this works on Reddit, maybe they should share notes.

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       |        This |     This     
| column     |      column |    column    
| will       |        will |     will     
| be         |          be |      be      
| left       |       right |    center    
| aligned    |     aligned |   aligned
share|improve this answer
3  
This would be nice. –  Pëkka Dec 30 '10 at 16:49
4  
That looks like the MultiMarkdown implementation of Markdown. –  Stefan Lasiewski Jan 10 '12 at 1:49
    
reST's simple table is nice: docutils.sourceforge.net/docs/user/rst/quickref.html#tables but SE should probably stick with some markdown implementation –  endolith Oct 10 '12 at 13:44
1  
Yup! And that works in github flavored markdown also: Markdown Cheatsheet · adam-p/markdown-here Wiki –  nealmcb Sep 29 '13 at 13:52

You can do this:

Header 1Header 2Header 3
Cell 1      Cell 2      Cell 3      
Cell 3      Cell 4      Cell 5      
Cell 6      Cell 7      Cell 8      

Also:




And the obvious third:




OK, I'm only serious about the first one. Though if you check the code, you need some nifty &nbsp;s :/

share|improve this answer
    
Just noticed-on mobile the kbd table looks pretty cool –  Manishearth Apr 5 '12 at 14:17
11  
Nice effort, but I feel this is even worse than using an image. (Well, granted, at least one can copy or search values.) Please mind the data dump, screen readers, Stack Apps, and whatever use we don't know about! –  Arjan Apr 14 '12 at 10:45
10  
Workaround is now broken :) –  badp May 10 '12 at 22:13
1  
I've fixed it! Edit has to be peer reviewed but now looks right again: i.stack.imgur.com/yNOsk.png –  Camilo Martin Jan 22 '13 at 18:20
    
@CamiloMartin: Thanks, approved :) –  Manishearth Jan 22 '13 at 18:32
8  
-1, encouraging people to abuse the [tag:] formatting option is only going to lead to problems. –  gung Aug 12 '13 at 3:33
6  
@gung: “OK, I'm only serious about the first one.” –  minitech Aug 12 '13 at 3:56
1  
On mobile, both the &nbsp; magic and wrapping for small screens would also be a problem. –  Arjan Aug 12 '13 at 8:21
    
Different proportional fonts are different. Nice try, but the results can be inconsistent. –  Frungi May 27 at 4:43

Elsewhere on Meta, I once learned about the nice Senseful Solutions Format Text as a Table tool. Of course:

Still, just in case it helps some, it supports different formats:

+------------+---------+
|    Type    |  MySQL  |
+------------+---------+
| Header     | Top Row |
| Auto Align | On      |
+------------+---------+
+------------+---------+
| Type       | MySQL   |
| Header     | None    |
| Auto Align | On      |
+------------+---------+
+---+------------+-------------+
|   |     A      |      B      |
+---+------------+-------------+
| 1 | Type       | MySQL       |
| 2 | Header     | Spreadsheet |
| 3 | Auto Align | On          |
+---+------------+-------------+
╔═══╦════════════╦═════════════╗
║   ║ A          ║ B           ║
╠═══╬════════════╬═════════════╣
║ 1 ║ Type       ║ Unicode Art ║
║ 2 ║ Header     ║ Spreadsheet ║
║ 3 ║ Auto Align ║ Off         ║
╚═══╩════════════╩═════════════╝

Manually creating Unicode box-drawing gives some more control and rounded corners:

╭───╥────────────┬─────────────╮
│   ║     1      │     2       │
╞═══╬════════════╪═════════════╡
│ A ║ Type       │ Manual      │
│ B ║ Header     │ Anything    │
│ C ║      Align │        Sure │
└───╨────────────┴─────────────┘

Still quite ugly, I'd say, if only because of the gray background. And the Unicode characters render differently on different browsers/devices:

share|improve this answer
    
I gotta say I really dig the "Unicode Art" style. Would be nicer if it has some way to wrap the text if the row is too long though. –  Old Checkmark Aug 23 '13 at 0:41
    
@OldCheckmark maybe it could be wrapped in a span or a div or something telling the text to nowrap? –  Cole Johnson Aug 23 '13 at 8:19
1  
@Asad, if that edit was on purpose, then it's time to check your fonts. Your edit made the last example render badly in all browsers on my Mac, and I even started Internet Explorer to see an even uglier result than apparently it normally shows (in Parallels on a Mac). Also, when counting the number of characters that make up a column, your edit didn't make any sense to me. –  Arjan Aug 23 '13 at 8:20
    
@Arjan huh? I understand there is wrapping. I'm saying wrap it in an HTML element with style="white-space:nowrap;" which would disable the wrapping. It would make it be pushed off the page and you would just scroll right to see it. –  Cole Johnson Aug 23 '13 at 8:25
    
Hehe, sorry, I meant OldCheckmark, not you @Cole... Reposting and cleaning up. (Somehow your comment sneaked in between my edit and my first comment!) –  Arjan Aug 23 '13 at 8:41
    
That Unicode box-drawing looks fine on my Mac, but not so much in Internet Explorer (in Parallels on that Mac). And all will look bad on mobile, due to wrapping instead of scrolling of code blocks. So: don't waste your time on that, @OldCheckmark. –  Arjan Aug 23 '13 at 8:42
    
As an aside, @Cole, the wrapping on mobile was introduced on purpose, as scrolling was not reliable. –  Arjan Aug 23 '13 at 8:44
    
@Arjan I'm running Win7 on the office computer, and the original top appeared too far to the left, yet for some reason looks okay now at my home computer (also Win7). Sorry about that. –  Asad Aug 23 '13 at 9:04
    
Whatever font Chrome latest on Windows is using for those box characters makes the last one look terrible. The edit (now rolled back) didn't help; it doesn't line up either way. –  Cody Gray Aug 23 '13 at 9:16
    
@CodyGray That's exactly what I saw. After editing it looked slightly better to me, though still disjointed. No idea what why that would happen, especially since the fonts are supposed to be monospaced. –  Asad Aug 27 '13 at 23:06
    
Also see a mobile version where some characters at the end of the lines need wrapping, but others don't, @Asad. Weird for sure! –  Arjan Aug 27 '13 at 23:21
1  
Besides these problems, they also don't work for Japanese because the Japanese characters end up a different width than spaces with the fonts SE uses, so on the Japanese SE the workaround doesn't work. –  snailplane May 10 at 20:50

If I am reading the Markdown syntax page (then search for "table") correctly, you use regular HTML table tags with an extra set of blank lines surrounding the <table> and </table> tags. Alas, I didn't get it to work here on meta. Feedback appreciated if someone else has figured it out.

share|improve this answer
13  
Correct: Markdown includes tables, but SE doesn't support that part of Markdown (at one point it worked in the live preview, but I've not tried it for a long time). –  Richard Dec 31 '10 at 8:55

I don't believe that SO supports mathjax, but stats.SE and math.SE (and possibly some other SE sites) do. With mathjax, you can use array to create tables:

\begin{array} {|r|r|}
\hline
1 &2 \\
\hline
3 &4 \\
\hline
\end{array}

Which translates to this:

(Sadly, it would seem meta.SO does not support mathjax either, but if this could be brought about, it would be possible to create tables on SO and meta.SO.)

share|improve this answer
2  
I've seen somewhere a dev saying the JS library for MathJax weights several mega bytes so the bandwidth cost is huge and not worth the rare cases where it's needed on Stack Overflow. Makes sense to me. :) –  Shadow Wizard Aug 12 '13 at 6:13
    
The result might be nice, but as for editing I'm afraid I even prefer ASCII tables over the above. And like @ShaWizDowArd already wrote, the team wrote on some occasions: "It will never be on Stack Overflow, though, as it is an extremely heavy dependency" (August 2010). Note that mobile browsers need to be able to render it too. –  Arjan Aug 12 '13 at 7:52
    
@Arjan regarding the last part, the mobile theme can easily exclude those libraries, it's already excluding tons of stuff. I strongly believe that's the case already on the sites supporting MathJax i.e. when using the mobile theme you can't use this magic. :-) –  Shadow Wizard Aug 12 '13 at 7:54
    
But then, @Sha, we'd be shown the source instead...? –  Arjan Aug 12 '13 at 7:55
    
@Arjan just checked, in the mobile theme there's no preview at all, problem solved. ;) –  Shadow Wizard Aug 12 '13 at 7:58
    
No, @Sha, I mean the final result. If I view a post on mobile and it includes a syntax that needs some excluded JavaScript to render it... –  Arjan Aug 12 '13 at 8:04
1  
Mobile shows it here: math.stackexchange.com/questions/465599/about-x-0-1-1-1-x0 so the JavaScript is included there, @Sha. (Though it renders slow on my oldish Nexus S.) –  Arjan Aug 12 '13 at 8:06
    
@Arjan hmm... good point, guess the include it on mobile theme as well then. –  Shadow Wizard Aug 12 '13 at 8:13
    
@Sha, funny sequence of 3 clearly visible render steps in Chrome on my old Nexus S. –  Arjan Aug 12 '13 at 8:49
    
@Arjan desktop browser does that too. It's not Chrome. It's the rendering engine. That would be WebKit everywhere except desktop (and I believe android) which use Blink. Being based off of WebKit, Blink "suffers" from many of the "quirks" WebKit has. –  Cole Johnson Aug 23 '13 at 8:22
    
Your right, @Cole, but for me a desktop browser is just much faster than that old Nexus S. But indeed, both need to do the JavaScript processing, and in the end both display fine. (Still then, the Markdown source is horrible, I feel. And it's not accessible, just like any non-table workaround.) –  Arjan Aug 23 '13 at 10:24

The short answer is that there is a kind of Markdown support for tables in Markdown Extra - I'm surprised it hasn't been mentioned in this thread yet (according to CTRL-F search, at any rate), although we have had Github-flavoured Markdown mentioned.

This has been implemented for a long time, and the "syntax" is pretty well-known. One thinks it would be a simple and effective enhancement for SO/SE. As a bonus, a move to Markdown Extra would bring definition lists, too -- and even footnotes (hurrah!).1 ;)

1 SO might not need 'em, but SE most definitely does! In addition, see now the 58-times UV'ed (as of this writing) "Time to fork markdown?", which explicitly draws attention to footnote and table support.

share|improve this answer

It's quite annoying. Especially, as bernd_k has pointed out, with database-related questions. The only solution we have right now is use our finest ASCII art skillz. To avoid the mobile layout mess-up, you don't have to necessarily extend the width of the table all the way to the right:

Header1 | Header2 | Header 3
--------+---------+----------
0       | 1       | 7
2       | 5       | 3
9       | 7       | 2
share|improve this answer

On SO often I see a number of questions tagged sql which present their test data by some tabular representation.

Often the first comments ask for datatypes of some columns.

For these cases I would prefer if OP just uses create table and insert statements.

That makes its easier to verify his problem or to try and verify the solution.

share|improve this answer
6  
What's this got to do with displaying tabular data in questions and answers? –  ChrisF Dec 30 '10 at 14:45
1  
In SO there are often questions about sql, where example data is given in a tabular representation. If you want to help you need convert it first. –  bernd_k Dec 30 '10 at 14:47
    
you might want to update your answer with the premise in your comment. It might help avoid downvotes since it's a legitimate solution to the particular issue you describe in your comment. –  tvanfosson Dec 30 '10 at 14:50
3  
SQL posts present data that way because it's common for databases to output data in ascii-tabular format, and they're just copy/pasting it. Even if actual tables existed in SO's markdown, it's unlikely users would take the time to manually create them when they've already got the data another way –  Michael Mrozek Dec 30 '10 at 15:08
1  
+1 I agree entirely. For SQL posts nice cosmetic delimiters such as in Ben Shelock's answer just get in the way when trying to set up test tables with the data. Questions such as this one put quite a lot of work on potential answerers just setting up the test environment. DDL and insert statements or a CTE with select statements and UNIONS are the ideal such questions for me. –  Martin Smith Jan 1 '11 at 0:56

At least for GitHub Flavored Markdown there is support for tables. I was originally very discouraged after reading the answers on this question. I'm glad the HTML workarounds are available, but it definitely gets away from the source being human-readable. I then found the following description of support for tables in GitHub Flavored Markdown, which is also working for me when I create content using R Markdown

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#wiki-tables

Here is a copy of the table example from that site, which I have also found works great for me in the GitHub or R Markdown use cases where I most use markdown:

Tables

Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Colons can be used to align columns.

| Tables        | Are           | Cool |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

share|improve this answer

more <kbd> abominations:

First Name
Donald
Micky
Roger
Last Name
Duck
Mouse
Rabbit

First NameLast Name
Donald Duck
Micky Mouse
Roger Rabbit

share|improve this answer
    
+1, Ingenious, but is this accessible throughout browsers? –  Pacerier Jun 25 at 23:52
1  
They both look OK on desktop Chrome/IE/FF but the second one falls down on mobile (at least on iOS). –  Jack Douglas Jun 26 at 6:53
    
Your first example is the only one that renders correctly on Chrome for Android, though many of the others render correctly on the Stack Exchange mobile app. –  Dennis Sep 15 at 12:00
    
Screenshot: i.imgur.com/whRjFHk.png –  Dennis Sep 15 at 12:10

Just noticing that when we reviewed these proposals a while back, this one never got updated even as the corresponding one on DBAs did.

tl;dr: Implementing this in a way that wouldn't allow authors to break some / all page layouts, whether inadvertently or maliciously, is not feasible.

I know. It sucks. But that's HTML tables for ya.

See also: Markdown footnotes?

share|improve this answer
    
So how is it that everyone else who supports tables via a Markdown extension accomplishes it? I'm no HTML expert, but I can't puzzle out how in the world allowing simple tables would break the layout of the entire page. It's not even like you're allowing free-form HTML. And I shouldn't have to mention that this sounds particularly ridiculous in light of the new "Stack Snippets" feature that literally lets people write code. If you've got programmers on the team who can implement that, you should be able to tame the <table> tag. –  Cody Gray Sep 11 at 6:53
    
Have you looked at the Snippets implementation? Rendering is trapped in a fixed-sized iframe, generated on-demand; there's no integration into the page's default rendering at all. In other words, we sidestepped that particular problem (and a host of others) by not trying to make it work at all. That said... Snippets do offer a potential solution here, and we're looking at ways to expand on that. –  Shog9 Sep 11 at 14:25
    
The point is, if you have the skills (and/or inclination) to solve that problem, you should be able to solve the relatively simpler problem of nested tables. At any rate, rendering simple, markdown-specific tables in a fixed-size iframe still seems like complete overkill to me. –  Cody Gray Sep 11 at 20:24
    
Well... we didn't solve it, @Cody - try some of the example snippets on a mobile device, if you haven't yet; there's no attempt to make the output render properly, so chances are if the author wasn't careful you'll just end up scrolling a tiny, tiny viewport around the output (or worse). There's no expectation that the output will match the themes of every site on the network, and in fact they're not even enabled on most sites. Again, we didn't solve that problem with Snippets - we sidestepped it completely. Could we do the same for tables? Sure - if that's what folks actually want. –  Shog9 Sep 11 at 20:58

If you use pandoc, there is an extension which does tables

http://johnmacfarlane.net/pandoc/demo/example9/pandocs-markdown.html

col1  col2  col3
----- ----- -----
a     b     c
1     5     sup
share|improve this answer

Did you ever think about switching to Textile? Tables are easily written there:

|_. name |_. age |_. sex |
| joan | 24 | f |
| archie | 29 | m |
| bella | 45 | f |

Find more at http://redcloth.org/hobix.com/textile/

share|improve this answer
1  
DV - Textile is Textile and has its own strengths, but a change this major is fairly unrealistic. –  Davïd Jan 22 at 0:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .