Can we add Markdown support for tables?

Question

This is similar to: Is there Markdown to create tables? and Please add support for tables in answers and questions, but is slightly different. The other questions are asking more of a why question, not a please do this question. I am asking for a specific implementation of Markdown tables. I found an article on making tables in Markdown using PHP Markdown or MultiMarkdown. The code to make a table looks like this:

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       |        This |     This     |
| column     |      column |    column    |
| will       |        will |     will     |
| be         |          be |      be      |
| left       |       right |    center    |
| aligned    |     aligned |   aligned    |

And the result is:

This is much different than this answer, which says that Jeff doesn't want the <tr><td> tags allowed on the SE sites. This request has a specific feature request, as opposed to the other questions which don't really have a decisive yes/no answer.

Here are some specific posts that need this type of support:
Where can I find the Unicode symbols for Mac functional keys? (Command, Shift, etc.)
Is there a way to directly link requirements to code units?

Answer 1

I don't think we need to request support for tables via Markdown specifically, but I agree that tables would be helpful. On several SE sites, posts with tables could be improved if table support is added (or spreadsheets!). On gaming.SE, things like Minecraft crafting layouts would be possible without embedding images. I also started building a specific list of questions over on Scifi.SE that I think would be helped, as many concrete examples always help bolster a feature-request.

Answer 2

Over on DBA.SE, this would matter more than on most sites, but we have had our feature-request declined (too).

However, if I recall correctly, Anna Lear said there was some hope of a user-script being incorporated into the site if we can write one ourselves and get a good number of folk using it before raising the request again.

I don't know how to do this, but perhaps someone else would like to take the 'proof of principle' bit of jQuery I wrote and turn it into a proper script?

Jake Feasel has already kindly changed SQLFiddle to generate 'normal' markdown for tables like this:

a table:
    
|Item    |Value|
|--------|----:|
|Computer|$1600|
|Phone   |  $12|
|Pipe    |   $1|

Here's the code I came up with (tested on Firefox only and missing the justification feature):

$('div.post-text>pre').each(function() {
    $(this).children().html($(this).children().html().replace(/(^\|.*\|$\n)+/gm, function(match) {
        var index = 0;
        return '<table style="margin: 0.5em; table-layout: fixed; font-size: smaller; background-color: white; box-shadow: 2px 2px 6px #777;">' + match.replace(/^(.*)$/gm, function(match) {
            var cell = 'th';
            index++;
            if (index === 2) {
                return '';
            }
            if (index > 2) {
                cell = 'td';
            }
            return '<tr>' + match.replace(/^\|/, '<' + cell + '>').replace(/\|$/, '</' + cell + '>').replace(/\|/, '</' + cell + '><' + cell + '>') + '<tr>';
        }) + '</table>';
    }));
}).find('td,th').css('border', '1px solid black').css('padding', '2px').each(function() {
    $(this).text($(this).text().replace(/^\s+|\s+$/g, ''));
}).filter('th').css('background-color', '#eee')

Here's a screenshot of the output for those who can't run the script:

Answer 3

In sites where snippets are enabled, you can create code that renders the table. Just write it down by hand if you know how or use an online table editor.

I used Tables Generator to create this nice Spanish verbs table for SSE (just remember to save your work in .tng before leaving just in case you need some edit in the future).

Too bad we have code snippets disabled there. I think this would be a good reason to allow snippets in more SE sites (well... all of them?). I don't believe this would be riskier than enabling them here, for example. What's more, my table has no JS so what's the danger?

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{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;border-color:black;}
.tg .tg-yj5y{background-color:#efefef;border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-b7v7{color:#000000;border-color:inherit;text-align:right;vertical-align:top}
.tg .tg-m223{font-size:100%;border-color:#000000;text-align:left;vertical-align:top}
.tg .tg-7btt{font-weight:bold;border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-dvpl{border-color:inherit;text-align:right;vertical-align:top}
.tg .tg-fbe1{font-style:italic;background-color:#efefef;border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-eiws{font-weight:bold;color:#000000;border-color:inherit;text-align:right;vertical-align:top}
.tg .tg-fymr{font-weight:bold;border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-r9b6{font-size:100%;color:#000000;border-color:inherit;text-align:right;vertical-align:top}
.tg .tg-73oq{border-color:#000000;text-align:left;vertical-align:top}
.tg .tg-6ic8{font-weight:bold;border-color:inherit;text-align:right;vertical-align:top}
.tg .tg-mcqj{font-weight:bold;border-color:#000000;text-align:left;vertical-align:top}
</style>

<table class="tg">
  <tr>
    <td class="tg-7btt" colspan="4">No personales<br></td>
  </tr>
  <tr>
    <td class="tg-dvpl">Infinitivo</td>
    <td class="tg-fbe1">amar</td>
    <td class="tg-fbe1">haber amado</td>
    <td class="tg-0pky">Infinitivo compuesto</td>
  </tr>
  <tr>
    <td class="tg-dvpl">Participio</td>
    <td class="tg-fbe1">amado</td>
    <td class="tg-fbe1"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-dvpl">Gerundio</td>
    <td class="tg-fbe1">amando</td>
    <td class="tg-fbe1">habiendo amado</td>
    <td class="tg-0pky">Gerundio compuesto</td>
  </tr>
  <tr>
    <td class="tg-7btt" colspan="4">Personales</td>
  </tr>
  <tr>
    <td class="tg-eiws">Formas simples</td>
    <td class="tg-7btt" colspan="2">Indicativo</td>
    <td class="tg-fymr">Formas compuestas</td>
  </tr>
  <tr>
    <td class="tg-r9b6">Presente</td>
    <td class="tg-yj5y"><span style="font-style:italic">amas</span> / <span style="font-style:italic">amás</span></td>
    <td class="tg-fbe1">has amado</td>
    <td class="tg-m223">Pret. perfecto compuesto<br>Antepresente</td>
  </tr>
  <tr>
    <td class="tg-b7v7">Pret. imperfecto<br>Copretérito</td>
    <td class="tg-fbe1">amabas</td>
    <td class="tg-fbe1">habías amado</td>
    <td class="tg-73oq">Pret. pluscuamperfecto<br>Antecopretérito</td>
  </tr>
  <tr>
    <td class="tg-b7v7">Pret. perfecto simple<br>Pretérito</td>
    <td class="tg-fbe1">amaste</td>
    <td class="tg-fbe1">hubiste amado</td>
    <td class="tg-73oq">Pret. anterior<br>Antepretérito</td>
  </tr>
  <tr>
    <td class="tg-b7v7">Futuro simple<br>Futuro</td>
    <td class="tg-fbe1">amarás</td>
    <td class="tg-fbe1">habrás amado</td>
    <td class="tg-73oq">Futuro compuesto<br>Antefuturo</td>
  </tr>
  <tr>
    <td class="tg-b7v7">Condicional simple<br>Pospretérito</td>
    <td class="tg-fbe1">amarías</td>
    <td class="tg-fbe1">habrías amado</td>
    <td class="tg-73oq">Condicional compuesto<br>Antepospretérito</td>
  </tr>
  <tr>
    <td class="tg-6ic8">Formas simples</td>
    <td class="tg-7btt" colspan="2">Subjuntivo</td>
    <td class="tg-mcqj">Formas compuestas</td>
  </tr>
  <tr>
    <td class="tg-dvpl">Presente</td>
    <td class="tg-fbe1">ames</td>
    <td class="tg-fbe1">hayas amado</td>
    <td class="tg-73oq">Pret. perfecto compuesto<br>Antepresente</td>
  </tr>
  <tr>
    <td class="tg-dvpl">Pret. imperfecto<br>Pretérito</td>
    <td class="tg-yj5y"><span style="font-style:italic">amaras</span> o <span style="font-style:italic">amases</span></td>
    <td class="tg-yj5y"><span style="font-style:italic">hubieras</span> o <span style="font-style:italic">hubieses amado</span><br></td>
    <td class="tg-73oq">Pret. pluscuamperfecto<br>Antecopretérito</td>
  </tr>
  <tr>
    <td class="tg-dvpl">Futuro simple<br>Futuro</td>
    <td class="tg-fbe1">amares</td>
    <td class="tg-fbe1">hubieres amado</td>
    <td class="tg-73oq">Futuro compuesto<br>Antefuturo</td>
  </tr>
  <tr>
    <td class="tg-7btt" colspan="4">Imperativo</td>
  </tr>
  <tr>
    <td class="tg-yj5y" colspan="4"><span style="font-style:italic">ama </span>/ <span style="font-style:italic">amá</span></td>
  </tr>
</table>