New Feature: Table Support

Question

Update: I've just enabled this feature network-wide. All sites across Stack Exchange are now able to use tables. Thanks for all the feedback. We'll keep monitoring this question and we'll continue to iron out some of the rough edges.

---

No waffling, right to the point:

What?	When?	Where?
Table support	2020-11-23	Meta Stack Exchange & DBA Meta
More table support	week of 2020-11-30	DBA Stack Exchange
Even more table support	week of 2020-12-07	Network-wide launch (if no major issues found)

---

That's right. It's finally time to support table syntax in our Markdown dialect. This has been a long-requested feature and we're happy that we can finally do something about it. Starting today you can include tables in your posts using the GitHub-flavored Markdown table syntax.

In the past, we've been hesitant to introduce table syntax to our Markdown dialect. One reason was the lack of a good standard. There are various formats floating around the web but there hasn't been a well-defined standard for a long time. CommonMark still doesn't specify tables in version 0.29.

Another major reason was that tables are hard to pull off. If done poorly, there's a risk that rogue tables ruin the entire page layout for our users. And turning a bunch of markdown into proper tables has always been a scary task when we still maintained our own markdown renderers.

A lot of time has passed and it's time to re-evaluate our concerns.

Switching to CommonMark is paying its dividends: The newly introduced open source Markdown renderers support table syntax and we can rely on them to handle this tricky task incredibly well.

The uncertainty around a well-specified table syntax hasn't completely gone away. Ideally, we'd use the official CommonMark syntax, if only there was one. However, we think that GitHub-flavored markdown offers a table syntax that's stable and usable enough to serve our purpose.

And finally, this is another case where we can happily promote a Stack Overflow for Teams feature to be used by all our network sites. When building Articles for Teams our Teams users let us know that table support is crucial for their documentation purposes. This request was one of the major triggers behind the whole CommonMark migration and supporting table syntax today.

Note: our usual holiday build freeze starts end of day Tuesday, November 24th. We want to start collecting feedback early but we won’t be able to address any issues until Monday Nov 30th, after Thanksgiving. If something’s going horribly wrong, we will disable the feature again (but let’s hope for the best!).

Syntax

Okay, so how do you use tables? We've updated our formatting help to give you some guidance. But here's an overview for you.

A simple table looks like this:

| A header | Another header |
| -------- | -------------- |
| First    | row            |
| Second   | row            |

The result:

A header	Another header
First	row
Second	row

The rules

• You always need a header row

• Cells are separated by a pipe (|) symbol

• You can include leading and trailing pipes but don't have to

• A header row has to be followed by a separator row with the same amount of cells, and you can't have spaces between separators (- characters)

  (that's the |---|---| line)

• The amount of space and - characters in a cell don't have to line up (but it sure looks nice if it does)

• You can set the alignment of a table column by including a : in the corresponding cell of the separator line. A : on the left will make a column left-aligned (this is the default). A : on the right will make it right-aligned. Both, left and right :s will produce a center-aligned column.

  | left | center | right |
  |:---- |:------:| -----:|
  | One  | Two    | Three |
  

  left	center	right
  One	Two	Three

Limitations

Markdown tables come with a set of limitations. They don't support everything you can do with HTML tables, and that's on purpose. Each cell can only include inline content (text, images, links, inline code).

You can't merge cells or rows.

Block content like multiple paragraphs, lists, code blocks, sub-tables and other complex stuff does not work. If you're trying to mix a Markdown table with inline HTML, you might be up for a wild ride.

You can't manually determine the width of a column. Your browser will decide what's a good width for any given column based on the content in your table.

If you need more details, I recommend taking a peek at the GitHub-flavored Markdown specification for tables.

Roll-out plan

Teams users have been able to use tables in their posts for a few weeks now, so nothing's changing over there.

Starting 2020-11-23 we're going to enable table support for Meta Stack Exchange and our table-loving friends over at DBA Meta Stack Exchange so you can start playing around with the feature, get familiar with the syntax and help us weed out some issues we have missed.

The plan is to enable tables on DBA Stack Exchange the week of 2020-11-30 if there's no feedback or concerns suggesting this was a bad idea.

After that, we're letting the feature sink in for a bit and gather more feedback before rolling it out network-wide to all sites across the Stack Exchange network. We're hoping to roll it out the week of 2020-12-07.

FAQ

I found a bug. What should I do?

This is great! We know that table support can still have some rough edges. Please add an answer to this announcement that reproduces the issue you've found (if possible) and we'll investigate.

What took you so long?

The amount of effort to build and maintain our own renderer when we still built our own Markdown renderers made this change prohibitively expensive. Teams customers asking for this feature allowed us to spent time on fundamentally revamping our Markdown rendering functionality and to get all the foundations in place to finally support tables.

What happens if CommonMark adopts an official table syntax in the future?

We're trying to be as CommonMark compliant as we can be, so chances are we're going to support the CommonMark syntax if that ever happened. Our Markdown renderers (markdown-it and Markdig) both comply to the CommonMark specification. Most likely, it would be a matter of time until they adopted an official CommonMark table syntax. If they did, we could update both libraries to introduce the same syntax on the Stack Exchange network. If we ever get to that point, we'll know more details and can think through all the details.

Why did you choose the GitHub-flavored syntax over <my favorite syntax>?

GitHub-flavored Markdown's ("GFM") table syntax has a reasonable specification. It's working for other significant sites on the web. Our Markdown renderers support GFM-style tables out of the box. It was the most pragmatic choice from our point of view.

Will tables show up properly in the live preview?

Yes. Our live preview below the editor will render the tables as you type.

We've got some more refinements around inserting and editing tables lined up that we'll release in the next few weeks.

Answer 1

feature-request status-completed

Allow lowercase letters in table headers

It seems that table headers will always appear with uppercase letters, even if the Markdown has them as lowercase letters. This seems to be part of the styling for table headers: there's a text-transform: uppercase there.

I understand that stylistically, uppercase headers look better, and it serves to better signify that it's a header instead of just a normal cell. However, please provide an option to disable capitalization in table headers, for three main reasons:

Capitalization may be important to define and differentiate the header

In some cases, the casing of what's in the table actually matters to the content of the post. Example below:

User group	Preference of style "HoTMaiL"	Preference of style "Hotmail"
Former users	72%	23%
New users	19%	63%

If you click to edit the post, you'll see that the second heading actually has the text "HoTMaiL", while the third one says "Hotmail". However, they look exactly the same in the table headers. (For context, the first style was used by the site's initial founders to indicate that the site offered the first HTML-based email client - the letters "HTML" were capitalized.)

Violates rules of style in some handbooks, which require lowercase lettering in some specific cases even when using all caps

This also may violate rules of style in certain style handbooks, which state that some letters should be lowercase even if using all caps otherwise. As an example, in at least one style book, the names "McDonald" and "LaSalle" should be written as McDONALD or LaSALLE in all caps. But this styling doesn't allow for that. Example:

Prefers McDonald's	Prefers Burger King
72%	23%
19%	63%

Some characters' uppercase forms may be vastly different from their lowercase forms

Finally, the all-uppercase styling can introduce quirks with characters that display differently in uppercase than in lowercase. For example, the long S character ſ's uppercase form is "S", and so tables that have that character will confusingly show the letter "S" instead of the long S character ſ. Example below:

Years	Incidence of ſ in books
1700-1800	64%

It's also impossible to type the German eszett symbol ß into a header, as that breaks apart into "SS":

Characters that break in table headers	ß
As pointed out by iBug in a comment: actual character in header:	ß

While these instances can be worked around with code formatting, as after this answer was completed, code in table headers is no longer uppercased, the general etiquette on sites is to only use code formatting on things that are actually code, and this will go against that.

---

Can there please be some way to write lowercase letters in table headers, even if the preferred style is to have them all caps?

Answer 2

feature-request editor status-completed

Please include a help for table support as well.
See screenshot for implementation suggestion.

Answer 3

feature-requeststatus-deferred

Add ability to lexicographically sort data in a column. I.e., make tables sortable (click on a header = sort the corresponding column).

E.g., useful in a result table:

ASR API	Date	CV	F	IER	LS-c	LS-o
Human					5.8	12.7
Google	2018-03-30	23.2	24.2	16.6	12.1	28.8
Google Cloud	2018-03-30	23.3	26.3	18.3	12.3	27.3
IBM	2018-03-30	21.8	47.6	24.0	9.8	25.3
Microsoft	2018-06-30	29.1	28.1	23.1	18.8	35.9
Speechmatics	2018-09-12	19.1	38.4	21.4	7.3	19.4
Wit.ai	2018-01-03	35.6	54.2	37.4	19.2	41.7

as we can do in most spreadsheet programs, Wikipedia and Reddit:

Other examples of a table where sorting would be useful (feel free to add your example to the list):

• 2020: a year in closing
• Number of launches by year, by country

Answer 4

The tables work just fine in blockquotes:

A header	Another header
Row, row your boat	Gently down the stream
Merrily, for life is but	a burnout.

This is what happens in spoilers:

| A header | Another header | | -------- | -------------- | | First | row | | Second | row |

Answer 5

bug

Here's the code:

| This is what happens when MathJaX is used in a header: | $\textrm{Equation gets squished despite enough room:}$ |
| - | ------------------ |
|   | $\int e^x = f(u)n$ |

Likewise the headers can wrap around unnecessarily (this is an example of a real table that I typed to answer something):I had to do some tweaking to get the 4th column header not to look so ugly (and somewhat erroneous due to the "y" variable seemingly not quantified properly):

The two relevant code blocks are here:

| $a|b$ | $a|c$| $(a|b) \\wedge (a|c)$ | $a|(bx + cy), \\forall x,y$  | $a | (bx+cy)$
|-|-|-|-|-|-|-|
|T |T |T |T |T |
|T |F |F |F |Open in $y$ |
|F |T |F |F |Open in $x$ |
|F |F |F |F |Open in $(x,y)$ |

| $a|b$ | $a|c$| $(a|b) \\wedge (a|c)$ | $a|(bx + cy), \\forall x,y$     | $a | (bx+cy)$
|-|-|-|-|-|-|-|
|T |T |T |T |T |
|T |F |F |F |Open in $y$ |
|F |T |F |F |Open in $x$ |
|F |F |F |F |Open in $(x,y)$ |

Answer 6

bug

If you have text right above or below the table, the preview renders the table markdown as a table. But after you save the post, the table is not rendered and just shows the markdown code.

You can use the code below as an example. If you try to edit my answer, it shows a table in the preview but not in the backend-rendered post view.

Raw Markdown:

text above table
|test|test|
|----|----|
|test|test|

How it looks in Preview

Result after posting

text above table |test|test| |----|----| |test|test|

So either the backend renderer is broken or the preview renderer is broken.

Answer 7

feature-requeststatus-completed

Code in headers shouldn't be uppercased?

code sample uppercase
The same code sample is lowercase in the body

Answer 8

bug status-deferred

While putting a markdown quote in a table renders in the preview without breaking...

...it fails in the actual post:

this|is|a|table
-|-|-|-
> markdown quote | > another quote | > quote 3 | > 4

this	is	a	table

markdown quote | > another quote | > quote 3 | > 4

While this is an edge case, it would be nice if the preview matched the real rendering.

---

Update

As pointed out by @HamVocke♦ in a comment below, as long as you add pipes | to the outer edges of the table row containing the leading > character, it should render without breaking.

Example:

|this|is|a|table|
|-|-|-|-|
|> markdown quote | > another quote | > quote 3 | > 4|

this	is	a	table
> markdown quote	> another quote	> quote 3	> 4

Answer 9

bugstatus-deferred

The link renderer (which automatically converts raw links to a link displaying the title of a question) works in the preview, but not in the actually rendered post, unless you add leading and trailing spaces.

Source	Link	Spaces
| https://meta.stackexchange.com/q/277369 |	A Terms of Service update restricting companies that scrape your profile information without your permission	leading+trailing
|https://meta.stackexchange.com/q/333965 |	https://meta.stackexchange.com/q/333965	trailing
| https://meta.stackexchange.com/q/336526|	https://meta.stackexchange.com/q/336526|leading|
|https://meta.stackexchange.com/q/7931|	https://meta.stackexchange.com/q/7931	none

The third row is especially interesting since the client side preview renderer correctly guesses my intentions but the server side renderer does not.

You can start to edit this post to see it for yourself, or check this screenshot.

Answer 10

bugstatus-completed

Tables don't show up in the profile editor preview:

Though they do show up on my actual profile:

Answer 11

After the note about HTML element limitations, I wanted to experiment:

left align	center align	right align	none/ default align
markdown link	HTML Image:	pre tag	triple backticks just yield code spans
backtick inline code, with no added breaks	html code tag	pre tag with line break tags	pre tag with line break tags
> markdown quote This breaks in real posts, but not the preview	>! spoiler	html <blockquote>	html blockquote with line breaks
html code tag with inline break tags	* markdown ul	1. markdown ol	html <strike>
Description List (<dl>): item (<dt>) 1 item 1 description (<dd>) description list item 2 item 2 desc	Ordered List (<ol>): list item 1 list item 2 list item 3	Unordered List (<ul>): list item 1 list item 2 list item 3	Default aligned <ol> list: list item 1 list item 2 list item 3
markdown italic	markdown bold	markdown bold italic	# markdown header
html italic	html bold	html bold italic	html <h1> header
superscript <sup>	subscript<sub>	markdown horizontal --- rule	html horizontal rule <hr>

_{(SE allowed HTML tags refresher)}

It generally seems, on the surface, to play fairly nice right now!

Is there any reason this support would foreseeably change in the future?
Or can this be counted upon as a feature?

Answer 12

bug status-completed

The tables also do not render in the tag wiki previews:

However, the tables do render properly in the actual tag wiki (here).

Answer 13

feature-requeststatus-declined

Please add the ability to make tables without headers.

Answer 14

bugstatus-review

The tables render differently in the timeline of a post than in the actual thing. For example, here is a screenshot of a table in the timeline of this post:

And here's the table in the actual post:

You can see that the "user group" and "preference of style" are not separated with the lines the | pipe should make. The header font is also not as black/bold in the timeline.

Answer 15

bug suggested-edits diff

When suggesting an edit, and switching from "Rendered Output" to "Markdown" and back to "Rendered Output", the table disappears in the diff.

Before switching:

After switching:

Also, the table header padding in the diff is interesting.

Answer 16

feature-request

Can we get "Table" option in the markdown editor toolbar, same as which was already introduced in the Stack Overflow documentation.

Screenshot taken from SO documentation:

Answer 17

feature-request

Add ability to transpose a table (it is tedious to do it manually).

E.g.:

Example of use case: when writing the table, the author may realize the table's width has become too large and transposing the table would make it fit without having to horizontally scroll.

Answer 18

feature-request

Add ability to swap two columns in a table (it is tedious to do it manually).

E.g.:

Answer 19

Add the ability to copy tables from spreadsheet software (Microsoft Excel, LibreOffice Calc, Google Sheets, and others) and paste them in the edit box on SE.

Given how tedious creating Markdown tables is, I've discovered that ever since GitLab introduced this option it has become my preferred workflow.

Answer 20

A Stack Overflow or Database Administrators minimum reproducible example should have code that readers can cut and paste and run, including initial values for tables or similar data structures formatted in a tabular way for readability.

Unfortunately these new markdown tables are going to make it harder to get MREs because initial values will be given in a format that we can't cut and paste and run. In particular, for SQL, and, ironically, at Database Administrators.

At the very least please update the documentation for tables and for code post composition and editing to emphasize that use of markdown tables should not interfere with giving code that is both readable and able to be cut and pasted and run, in the post and not just at a link.

Functionality to generate code from text tables found at language sandbox sites like sqlfiddle.com is helpful for writers. But readers should not be expected to all reproduce that effort. And it doesn't necessarily reconstruct the actual table definition & contents used.

... and here we go:
https://stackoverflow.com/revisions/65207252/1

Answer 21

feature-request

Please add a keyboard shortcut to insert a table into a post. I really like these new tables and would appreciate not having to click Show formatting tips → Insert table → copy/paste table to insert them.

Answer 22

I	just	wanted	to	say...
Thank	you	very	much	!

Having said that...

feature-requeststatus-declined

I would like to have some bot/query/process go over all my posts on the network, and suggest those posts with what appear to be tables, for me to review and edit into actual tables. Example.

Answer 23

I posted this on meta S.O originally because I couldn't post it here (not enough rep) but apparently that restriction was removed and I was told maybe I should repost it here.

I tried to post this markdown table in an answer on S.O

| Number of bytes | First code point | Last code point | Byte 1 | Byte 2 | Byte 3 | Byte 4 |
| - | ------- | -------- | -------- | -------- | -------- | -------- |
| 1 | U+0000  | U+007F   | 0xxxxxxx |          |          |          |
| 2 | U+0080  | U+07FF   | 110xxxxx | 10xxxxxx |          |          |
| 3 | U+0800  | U+FFFF   | 1110xxxx | 10xxxxxx | 10xxxxxx |          |
| 4 | U+10000 | U+10FFFF | 11110xxx | 10xxxxxx | 10xxxxxx | 10xxxxxx |

It formats correctly in the preview:

But the editor claims it's a bad code block and won't let me post the answer:

Answer 24

bugstatus-bydesign

When highlighted, the table body is orange while the header stays gray

Answer 25

bug

On Opera (unsupported I know but FYI) with Opera's dark mode on on Android 10: table borders are sometimes grey, sometimes white:

Answer 26

Do the displayed tables have to be full width?

Or, more accurately, when a table is simple and small, as (for example), in this SQL question on Stack Overflow, it would be nicer to my way of thinking if the tables did not expand to the full width.

The tables there are:

ID	Name
157	Bob
157	James
300	Phil
300	Keith
300	Paul

and:

ID	Name
157	Bob, James
300	Phil, Keith, Paul

In my opinion, neither table benefits from being expanded to the width of a browser window on a big monitor.

This is an image of a narrower version of the tables (obtained by shrinking a Chrome window to its minimum width), but the final result could be a lot narrower still for these tables.

I'm not a web programmer (you mean, there are things called 'user interfaces'? I had no idea!), so I'm not sure what this request entails.

Answer 27

I am left wondering how this will impact copy-editors. Because editing wrongly formatted tables may become the most tedious chore a copy-editor is likely to encounter.

Hopefully you can build-in some kind of detection mechanism to give the OP a warning if the table isn't well formatted.

Answer 28

feature-requeststatus-declined

Add ability to specify thead (<th>) labels (i.e., row headers).

For example:

Answer 29

feature-request Ability to repeat header, or have "sticky header"

This post has a very long table: 2020: a year in closing, because it lists stats for all ~200 sites in the SE network.

Here's what the top of the table looks like:

After about 200 rows, here's what the bottom looks like:

If I am interested in information in the lowest rows, then it's very hard to see what the headers are. No amount of zooming out will allow me to see the headers and the data at the same time. A solution could be to have the option to repeat headers after every 50 rows, for example. I have seen this on various tables on Wikipedia. Another option would be a "sticky" header, which remains present when you're scrolling up and down.

Answer 30

bugstatus-bydesign

Spoilers in a table render in neither the preview nor the actual post:

A header	Another header
>! First	>! row
>! Second	>! row

And in the preview: