Garvit Joshi
Garvit Joshi

Reputation: 133

Is There A Way to make complex Markdown Table?

I Wanted to create a markdown table Complex table

but can't get it right:

| Available     | Process   | Allocation       |     Max         |
|---------------|-----------|:----------------:|----------------:|
| A | B | C | D |           |   A | B | C | D  | A | B | C | D   |
| 1 | 5 | 2 | 0 | P0        |   0 | 0 | 1 | 2  | 0 | 0 | 1 | 2   |
|               | P1        |   1 | 0 | 0 | 0  | 1 | 7 | 5 | 0   |
|               | P2        |   1 | 3 | 5 | 4  | 2 | 3 | 5 | 6   |
|               | P3        |   0 | 6 | 3 | 2  | 0 | 6 | 5 | 2   |
|               | P4        |   0 | 0 | 1 | 4  | 0 | 6 | 5 | 6   |

Upvotes: 7

Views: 11991

Answers (3)

ruffin
ruffin

Reputation: 17453

Pro Markdowning tip: Always start by checking results at BabelMark to see which renderer gets closest and edit from there!

Your original code gets close in MultiMarkdown, which you can preview at BabelMark.

It's a few tweaks away from what you want.


With tweaks

MultiMarkdown (MMD) does support colspans, and seems to do what you want with this MultiMarkdown code:

| Available  |||| Process   | Allocation    ||||     Max      ||||
|---|---|---|---|-----------|-----|---|---|----|---|---|---|-----|
| A | B | C | D |           |   A | B | C | D  | A | B | C | D   |
| 1 | 5 | 2 | 0 | P0        |   0 | 0 | 1 | 2  | 0 | 0 | 1 | 2   |
|            |||| P1        |   1 | 0 | 0 | 0  | 1 | 7 | 5 | 0   |
|            |||| P2        |   1 | 3 | 5 | 4  | 2 | 3 | 5 | 6   |
|            |||| P3        |   0 | 6 | 3 | 2  | 0 | 6 | 5 | 2   |
|            |||| P4        |   0 | 0 | 1 | 4  | 0 | 6 | 5 | 6   |

You can double-check on BabelMark

multimarkdown rendering

More on MultiMarkdown here.


Rendering in MultiMarkdown

If you're not familiar with running Perl or want live preview of edits, there is a Multimarkdown texteditor for macOS for sale by MMD's creator.

If you're on Windows, I don't think there's an editor with full MMD support out of the box. You can learn Perl or you can get practically identical results with an app I've written* for Windows, MarkUpDown, which supports MMD tables.

If you're on Linux, I'll assume you can spell Perl. ;^D


*I'm offering this b/c I don't know of another app on Windows that supports MMD tables out of the box, and I know (intimately) that this one does. As the FAQ at one time said, Post good, relevant answers, and if they happen to be about your product, so be it. But honestly, MMD is Perl. If you want to do it for free, you can!

Upvotes: 5

Venkataraman R
Venkataraman R

Reputation: 12959

You cannot create this complex table in markdown. you need to write HTML tables as given by Jacob in his answer. What you have to do is, as <table> is a block element, create new line before and after it.

Your markdown content before

<table>... </table>

Your markdown content after

Markdown is not a replacement for HTML. As creator of Markdown, John Gruber puts it:

INLINE HTML Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.

Reference Markdown HTML Documentation

Upvotes: 2

Jacob S&#225;nchez
Jacob S&#225;nchez

Reputation: 459

Markdown supports some HTML syntax, such as <table> elements. To make a column like the headers on the image, the magic attribute is

colspan="X"  

Where X is the number of columns you want it to extend to, as well as

rowspan="Y"

Where Y is the number of rows you want it to extend to

For example:

table {
  border-collapse:collapse;
}

td {
  border: 1px solid #000;
  margin: 0;
  padding: 0.5em;
}
<table>
  <tr>
    <td colspan="4">
      Available
    </td>
    <td rowspan="2">
      Processes
    </td>
    <td colspan="4">
      Allocation
    </td>
    <td colspan="4">
      Max
    </td>
  </tr>
  <tr>
    <td>
      A
    </td>
    <td>
      B
    </td>
    <td>
      C
    </td>
    <td>
      D
    </td>
    <td>
      A
    </td>
    <td>
      B
    </td>
    <td>
      C
    </td>
    <td>
      D
    </td>
    <td>
      A
    </td>
    <td>
      B
    </td>
    <td>
      C
    </td>
    <td>
      D
    </td>
  </tr>
  <tr>
    <td>
      1
    </td>
    <td>
      5
    </td>
    <td>
      2
    </td>
    <td>
      0
    </td>
    <td>
      P0
    </td>
    <td>
      0
    </td>
    <td>
      0
    </td>
    <td>
      1
    </td>
    <td>
      2
    </td>
    <td>
      0
    </td>
    <td>
      0
    </td>
    <td>
      1
    </td>
    <td>
      2
    </td>
  </tr>
  <tr>
    <td colspan="4">
    </td>
    <td>
      P1
    </td>
    <td>
      1
    </td>
    <td>
      0
    </td>
    <td>
      0
    </td>
    <td>
      0
    </td>
    <td>
      1
    </td>
    <td>
      7
    </td>
    <td>
      5
    </td>
    <td>
      0
    </td>
  </tr>
</table>

Note that CSS is only necessary here because the Markdown interpreter will be rendering the table with the default styling.

Upvotes: 9

Related Questions