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

  • 46
    @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
  • 2
    @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
  • 9
    @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
  • 3
    Found through @KennyTM's link, another non-SQL table use: truth tables – jball Dec 30 '10 at 18:43
  • 2
    @Michael Mrozek - Are you kidding? I see multiple examples of mangled tables every day. – JohnFx Sep 29 '11 at 20:08
  • 3
    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
  • 2
    @MichaelMrozek: "Do you have any example posts of people mangling tables?" electronics.stackexchange.com/a/42266/142 – endolith Oct 10 '12 at 13:32
  • 6
    GitHub Flavored Markdown supports them: github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables – Benjamin Mar 27 '13 at 12:17
  • 8
    Why not just enable github flavored markdown tables here? – trusktr Oct 12 '13 at 22:51
  • 4
    I think GitHub Flavored Markdown is more appropriate for a programming site like SO. It also supports crreating tables – phuclv Oct 17 '14 at 5:49
  • 7
    Here I am, in the year 2016 and still no table markdown... I guess stackexchange just doesn't care about table formatting – Peter Raeves Jun 28 '16 at 13:31
  • 7
    Why is this status-declined? I don't see any reason why it shouldn't be implemented. – Donald Duck Feb 3 '17 at 20:26
  • 4
    It's completely unacceptable that we have to abuse code blocks to fake tables to provide example data for our SQL questions. Why hasn't this been implemented years ago? – cjm Mar 7 '17 at 22:13
  • 4

22 Answers 22

up vote 348 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

  • 11
    Unicode box-drawing would improve this, kind of ;-) (Markdown source) – Arjan Aug 20 '11 at 12:40
  • 37
    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
  • 4
    @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 '14 at 8:11
  • This works on stackedit.io/editor, the accepted answer does not – Ga Sacchi Apr 20 '16 at 17:05
  • @JayLevitt The page that you have linked has moved to this address. Please consider editing your comment accordingly. – Luke Fisk-Lennon Jan 24 '17 at 8:21
  • 1
    @iONinja and now the address is here – Fezter Jul 31 '17 at 23:02
  • 2
    I just love coming back to this post and copy the table whenever I need while posting on SO :) – RBT Jan 4 at 0:42

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   |

Elsewhere on Meta, I once learned about the nice Senseful Solutions Format Text as a Table tool. As of May 2016 it stopped working, but fortunately the same facility is now available at the ASCII Table Generator. 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:

  • 1
    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 Saeeduddin 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 Saeeduddin 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. – snailboat May 10 '14 at 20:50
  • How? Please include exact steps. – VivekDev Dec 21 '15 at 4:57
  • An easier way of formatting your table as a code block to preserve formatting is to surround it with ``` blocks – Steven Vascellaro May 5 '17 at 18:18

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 :/

  • 5
    Just noticed-on mobile the kbd table looks pretty cool – Manishearth Apr 5 '12 at 14:17
  • 27
    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
  • 23
    -1, encouraging people to abuse the [tag:] formatting option is only going to lead to problems. – gung Aug 12 '13 at 3:33
  • 18
    @gung: “OK, I'm only serious about the first one.” – Ry- Aug 12 '13 at 3:56
  • 2
    On mobile, both the &nbsp; magic and wrapping for small screens would also be a problem. – Arjan Aug 12 '13 at 8:21
  • 1
    Different proportional fonts are different. Nice try, but the results can be inconsistent. – Frungi May 27 '14 at 4:43
  • 1
    Abusing the <kbd> element is not so great either for semantic markup or accessibility. – Andrew Marshall Feb 3 '15 at 0:48
  • 1
    @JackDouglas below proposed an even better solution by combining kbd with code which eliminates the need for non-breaking spaces that can only partially align individual cells. And even if it looks ok on your screen it may not look the same on a different OS. Combining this with proportional font of code makes things reliable. – Robert Koritnik Feb 10 '15 at 9:13
  • 1
    @Arjan, This is way way better than an image because it is text. Would you be able to Ctrl-F an image? – Pacerier Jul 15 '15 at 1:41
  • How? Please include exact steps – VivekDev Dec 21 '15 at 4:57
  • you ARE really nafty;) – yukashima huksay Nov 7 '17 at 7:45
  • if you enclose the text inside the KBD tag in backticks then you can enforce monospace fonts and get perfect column alignment, i.e. <kbd>`Header 1`</kbd> – ccpizza May 13 at 13:14

more <kbd> abominations:

First Name
Donald
Micky
Roger
Last Name
Duck
Mouse
Rabbit

First NameLast Name
Donald Duck
Micky Mouse
Roger Rabbit

  • 1
    +1, Ingenious, but is this accessible throughout browsers? – Pacerier Jun 25 '14 at 23:52
  • 2
    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 '14 at 6:53
  • 1
    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 '14 at 12:00
  • Screenshot: i.imgur.com/whRjFHk.png – Dennis Sep 15 '14 at 12:10
  • +1 the kbd + code combination seems perfect as all columns can be perfectly and easily aligned and stay that way across browsers and operating systems using various different fonts. code actually adds the required proportional character sizing. – Robert Koritnik Feb 10 '15 at 9:09
  • Did one at here. – kenorb Aug 6 '15 at 18:38
  • 2
    YES YES YES ----- – Pëkka Dec 28 '15 at 9:32
  • Wow, I didn't know Roger Rabbit. – Andrei Rinea May 21 at 20:56

Stack Overflow doesn't support MathJax, but stats.SE and math.SE (full list) 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.)

  • 5
    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 the Welcoming 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 the Welcoming 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 the Welcoming 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 the Welcoming 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
  • 1
    works on rpg.stackexchange.com – aloisdg May 14 at 8:53

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.

You can generate text tables at tablesgenerator like following formats.

You can give input as:

  1. SQL result in File -> Paste Table Data
  2. File -> Import CSV File
  3. Or you can generate table manually

Here you can align column values to left, right, centre.

Without Using Unicode symbols for table borders

+----+-------------+--------+-------+-----+
| id | name        | gender | state | age |
+----+-------------+--------+-------+-----+
| 1  | John Kenedy | male   | NY    | 32  |
+----+-------------+--------+-------+-----+
| 2  | Meresa Oslo | female | HI    | 26  |
+----+-------------+--------+-------+-----+
| 3  | Mike Lanes  | male   | FL    | 25  |
+----+-------------+--------+-------+-----+

Using Unicode symbols for table borders

╔════╦═════════════╦════════╦═══════╦═════╗
║ id ║ name        ║ gender ║ state ║ age ║
╠════╬═════════════╬════════╬═══════╬═════╣
║ 1  ║ John Kenedy ║ male   ║ NY    ║ 32  ║
╠════╬═════════════╬════════╬═══════╬═════╣
║ 2  ║ Meresa Oslo ║ female ║ HI    ║ 26  ║
╠════╬═════════════╬════════╬═══════╬═════╣
║ 3  ║ Mike Lanes  ║ male   ║ FL    ║ 25  ║
╚════╩═════════════╩════════╩═══════╩═════╝

Here is a Markdown table

| id | name        | gender | state | age |
|----|-------------|--------|-------|-----|
| 1  | John Kenedy | male   | NY    | 32  |
| 2  | Meresa Oslo | female | HI    | 26  |
| 3  | Mike Lanes  | male   | FL    | 25  |

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.

  • 18
    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
  • 4
    For future readers: HTML <table> tags explicitly don't work, to stop people from being able to break the layout of the whole page. See Shog9's answer on this question. – Peter Cordes Jan 29 '16 at 9:43

CommonMark, a rigorously specified version of Markdown, does support inline HTML tables. Stack Exchange Valued Associates have indicated in the past that they intend to move to CommonMark eventually, and it does support inline HTML blocks that include HTML tables:

http://spec.commonmark.org/0.20/#html-blocks

However, the main reason this wasn't allowed in the original markdown implementation used was due to the ease with which a user could break a page layout using inline HTML tables. Since Stack Exchange allows new users to post content to the page, it was believed to be too big a risk to give them that power.

It may be that they will implement CommonMark and still disable inline HTML tables for this reason or other reasons. Between moderation and some coding for common layout breaking tables uses, I hope they'll be able to enable them.

So there is a possibility that in the next year or so we will have access to proper HTML tables for Stack Exchange content.

  • 1
    I would find tables particularly useful on sites like Seasoned Advice, where recipes are commonly quoted in questions asking for help. – Catija Jul 14 '15 at 16:45
  • "the ease with which a user could break a page layout using inline HTML tables" You could do the same with code blocks. Just put the table in a box with scrollbars, the same as huge code blocks. – endolith May 12 '17 at 14:11
  • "... a possibility that in the next year or so we will have access to proper HTML tables ..." - three years later, no tables. :( – Tony Jun 13 at 2:14

Recently, Table option is introduced in the Stack Overflow Documentation Beta - Example section's markdown editing tool.

But it is not available in other Stack Exchanges sites.

Screenshot for reference:

Table editing option

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

We can use Stack Overflow HTML rendering:

<table style="border-collapse:collapse;border-spacing:0"><tr><th style="font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">url</th><th style="font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">id</th></tr><tr><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">codegolf.stackexchange.com</td><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">0</td></tr><tr><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">https://codegolf.stackexchange.com/q/148927/15214</td><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">1</td></tr><tr><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">https://en.wikipedia.org/wiki/Code_golf</td><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">2</td></tr><tr><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">lichess.org</td><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">3</td></tr><tr><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">https://en.wikipedia.org/wiki/Code_poetry</td><td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:top">4</td></tr></table>

I create this snippet with tablesgenerator.

We can hide js and css, but if we hide HTML we lost the output. There are alternatives to hide stuff, see: How to hide/display a part of the question I create.

  • 1
    True but it requires the visitors to click a button in order to see the table. It is a major downside. – Shadow the Welcoming Wizard Nov 24 '17 at 22:06
  • @ShadowWizard indeed but it stills an alternative – aloisdg Nov 24 '17 at 22:10
  • True, I didn't downvote, just stating a big downside in this alternative. :) – Shadow the Welcoming Wizard Nov 25 '17 at 0:33

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.

  • 9
    What's this got to do with displaying tabular data in questions and answers? – ChrisF Dec 30 '10 at 14:45
  • 2
    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
  • 4
    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.

An alternative is to put html tables tags inside an ꜱᴠɢ file, since ꜱᴠɢ files are xml based, it can contains xhtml. From there you can use the html tags.
This also enable you to style borders with arbitrary ᴄꜱꜱ. The html disabled tags will be<iframe> <script> <input> <video>and<audio>.

http://ytrezq.sdfeu.org/test.svg
The image above contains this code, as you can see there are html in it, you can check this by loading[this url](view-source:http://ytrezq.sdfeu.org/test.svg):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="1000px" preserveAspectRatio="none">
        <defs>
                <style type="text/css"><![CDATA[
                        svg
                        {
                                background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgb25Mb2FkPSJhbGVydCgnaGVsbG8gd29ybGQhJykiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij48IVtDREFUQVsKICAgIGFsZXJ0KCJoZWxsbyB3b3JsZCEiKTsKICBdXT48L3NjcmlwdD4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMTYlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwZjhmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQlIiBzdG9wLWNvbG9yPSIjZmFmZGZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzNCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNmMmY4ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiNlZGY2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlMGYwZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1NiUiIHN0b3AtY29sb3I9IiNkM2VhZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNjOWU1ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NSUiIHN0b3AtY29sb3I9IiNiN2RjZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2OSUiIHN0b3AtY29sb3I9IiNhZGQ3ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiNhM2QyZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4NyUiIHN0b3AtY29sb3I9IiM2ZGI0ZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5NiUiIHN0b3AtY29sb3I9IiMzMjljZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMxOTkwZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA4M2ZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij48IVtDREFUQVsKICAgIGFsZXJ0KCJoZWxsbyB3b3JsZCEiKTsKICBdXT48L3NjcmlwdD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgogIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij48IVtDREFUQVsKICAgIGFsZXJ0KCJoZWxsbyB3b3JsZCEiKTsKICBdXT48L3NjcmlwdD4KPC9zdmc+Cg==);
                        }
                ]]></style>
        </defs>
        <foreignObject width="100%" height="100%" opacity="1">
            <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                    <title>anti 404 error example</title>
                </head>
                <body>
                    <h1>Found !</h1>
                    <p>The requested URL /fghjkl was found on this server.</p>
                    <table border="1" cellpadding="1" cellspacing="2">
                        <tr>
                            <th>Name</th>
                            <th>Cups</th>
                            <th>Type</th>
                            <th>Sugar</th>
                        </tr>
                        <tr>
                            <td>Wendy</td>
                            <td>10</td>
                            <td>Regular</td>
                            <td>yes</td>
                        </tr>
                        <tr>
                            <td>Jim</td>
                            <td>15</td>
                            <td>Decaf</td>
                            <td>no</td>
                        </tr>
                    </table>
                </body>
            </html>     
    </foreignObject>
</svg>

It won’t work in internet explorer and in Safari >9.

Feel free to use tables with tags like<tr>or<td>!

  • When using Chrome 44.0 on OSX the table is very tiny, but looks better when opened in a new tab. Works fine in Firefox. Reported in here. – kenorb Aug 18 '15 at 18:10
  • @kenorb this work perfectly with chrome 43 on windows. If you open an image like this in a new tab, you might end up running the javascript or plugings it might contains' whereas this doesn't, when loaded from an<img>tag. – user2284570 Aug 18 '15 at 18:12
  • 2
    @kenorb An alternative is to do the same with an Adobe Flash Player file and inject arbitrary html on the page with ActionScript 2.0. – user2284570 Aug 18 '15 at 18:18
  • 1
    Looks good, but doesn't support copy and paste. – CJBS Apr 7 '16 at 17:50
  • @CJBS yeah, you need the page source for that. – user2284570 Apr 8 '16 at 21:04

While not a table in the sense that data is in cells, to show data in columns, I use HTML <pre> tag.

      CAT_NO |PROD_CODE   |DESCRIPTION |COLOR |
        SH1  |SH          |Shirt       |Blue  |
        SH2  |SH          |Shirt       |Red   |
        BT1  |BT          |Belt        |Black |
        BT4  |BT          |Belt        |Brown |
        WT1  |WT          |Watch       |Silver|
        WT6  |WT          |Watch       |Gold  |

Example question:

Can SQL be used to return a distributed sample set

You can create table by using Box Drawing Unicode.

This answer helps the new users about the required box-drawing Unicode uses with Unicode-Key.

For creating Table, the following Unicode are essential:

1. Two lines:

  • Horizontal         ━     U+2501
  • Vertical             ┃     U+2503

2. Four Corners:

  • Top Left          ┏       U+250F
  • Top Right        ┓      U+2513
  • Bottom Left     ┗      U+2517
  • Bottom Right   ┛      U+251B

    By using this you can draw box like:

    ┏━━━┓
    ┃ 1 ┃
    ┗━━━┛
    

    But In order to create columns and rows, it requires following T's:

3. For creating columns:

  • Top end         ┳       U+2533
  • Bottom end    ┻      U+253B

    Example:

    ┏━━━┳━━━┓
    ┃ 1 ┃ 2 ┃
    ┗━━━┻━━━┛
    

4. For creating rows:

  • Left end        ┣       U+2523
  • Right end      ┫      U+252B

    Example:

    ┏━━━┓
    ┃ 1 ┃
    ┣━━━┫
    ┃ 2 ┃
    ┗━━━┛
    

5. For giving formate for cells/box at all sides (left+right+top+bottom) :

  • Centre Junction       ╋       U+254B

    Example:

    ┏━━━┳━━━┓
    ┃ 1 ┃ 2 ┃
    ┣━━━╋━━━┫
    ┃ 3 ┃ 4 ┃
    ┗━━━┻━━━┛
    

So, finally with the help of this Box Drawing Unicode, we can create table of unlimited rows and columns!

Note: In this answer, Thick Lines are used. For using another line-style visit Table or Official code charts.

  • 6
    Hello. Do you know that your tables look like this in IE 11? – Peregrine Rook Sep 7 '16 at 3:09

Here is another ugly approach, that you may consider to use. I am illustrating here to show a matrix of numbers.

┏━━━┳━━━┳━━━┳━━━┳━━━┳━━━┳━━━┳━━━┳━━━┓ ┃ 1 ┃ 2 ┃ 5 ┃ 7 ┃ 8 ┃ 9 ┃ 6 ┃ 4 ┃ 3 ┃ ┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫ ┃ 8 ┃ 3 ┃ 7 ┃ 4 ┃ 6 ┃ 5 ┃ 1 ┃ 9 ┃ 2 ┃ ┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫ ┃ 6 ┃ 4 ┃ 9 ┃ 2 ┃ 1 ┃ 3 ┃ 8 ┃ 5 ┃ 7 ┃ ┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫ ┃ 2 ┃ 8 ┃ 3 ┃ 9 ┃ 5 ┃ 4 ┃ 7 ┃ 1 ┃ 6 ┃ ┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫ ┃ 5 ┃ 6 ┃ 1 ┃ 3 ┃ 7 ┃ 8 ┃ 4 ┃ 2 ┃ 9 ┃ ┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫ ┃ 9 ┃ 7 ┃ 4 ┃ 1 ┃ 2 ┃ 6 ┃ 5 ┃ 3 ┃ 8 ┃ ┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫ ┃ 3 ┃ 1 ┃ 2 ┃ 6 ┃ 4 ┃ 7 ┃ 9 ┃ 8 ┃ 5 ┃ ┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫ ┃ 7 ┃ 9 ┃ 8 ┃ 5 ┃ 3 ┃ 1 ┃ 2 ┃ 6 ┃ 4 ┃ ┣━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━╋━━━┫ ┃ 4 ┃ 5 ┃ 6 ┃ 8 ┃ 9 ┃ 2 ┃ 3 ┃ 7 ┃ 4 ┃ ┗━━━┻━━━┻━━━┻━━━┻━━━┻━━━┻━━━┻━━━┻━━━┛

  • 3
    Just FYI this is broken on at least Mac (because Macs apparently don't draw Unicode fixed-width box-drawing characters at the same fixed-width as fixed-width letters), and possibly other browser/OS combinations as well. Not working on Macs is certainly Apple's fault, but it's an unfortunate reality that this doesn't display right on all computers. – SevenSidedDie Mar 12 '17 at 4:16
  • Thanks for explaining. I wont use this now. Perhaps this approach will be useful in the future. Or perhaps in the future Stack Exchange will learn how to format as well as GitHub. – William Entriken Mar 12 '17 at 4:51
  • @SevenSidedDie looks perfectly fine for me on Mac. If there is an issue it's because the box drawing characters and the numbers are being rendered in a different font, but you should be seeing it in Menlo which has all the box-drawing chars – Cai Mar 12 '17 at 7:48

I made a table generator using MathJax arrays:
https://isaurssaurav.github.io/mathjax-table-generator/

New contributor
saurssaurav is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • 2
    MathJax isn't enabled on most SE sites, so this is of very limited applicability. – Nathan Tuggy Sep 14 at 10:20
  • You can improve this answer by adding a short description of what it actually does. – Glorfindel Sep 14 at 12:23

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/

  • 6
    DV - Textile is Textile and has its own strengths, but a change this major is fairly unrealistic. – Dɑvïd Jan 22 '14 at 0:13

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?

  • 22
    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 '14 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 '14 at 14:25
  • 10
    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 '14 at 20:24
  • 2
    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 '14 at 20:58
  • 6
    So how is it you've got this to work for Documentation? – eggyal Jul 27 '16 at 9:39
  • Docs uses an implementation of CommonMark, @eggyal. – Shog9 Jul 27 '16 at 14:39
  • 4
    @CodyGray it doesn't even need to (shouldn't) be an <iframe>... we can just wrap the table in a <div style="overflow:auto;width:100%;max-height:700px"></div> and have scrollbars when/if the table exceeds the div width or max-height. – canon Jan 5 '17 at 14:47
  • 1

You must log in to answer this question.

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