294

Is it possible to create a table without a header in Markdown?

The HTML would look like this:

<table> <tr> <td>Key 1</td> <td>Value 1</td> </tr> <tr> <td>Key 2</td> <td>Value 2</td> </tr> </table>
Improve this question
0

16 Answers 16

Reset to default
182

If you don't mind wasting a line by leaving it empty, consider the following hack (it is a hack, and use this only if you don't like adding any additional plugins).

| | | |---|---| |__Bold Key__| Value1 | | Normal Key | Value2 |
Bold Key Value1
Normal Key Value2

To view how the above one could look, copy the above and visit https://stackedit.io/app

It worked with GitLab/GitHub's Markdown implementations.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

What implementation does that work with? It doesn't work with Perl's Text::MultiMarkdown but I think it might work with some PHP MultiMarkdown implementations.
It worked with gitlab/github's markdown implementations. I am not sure about perl's Text::MultiMarkdown
This will create an empty table header and an empty row.
This actually works great with pandoc markdown to pdf.
Thanks! This works with Laravel 5.8 (multi) markdown as well. No headers are visible - only a line. Looks like a divider, which may can be removed using some CSS in the theme.
|
174

Most Markdown parsers don't support tables without headers. That means the separation line for headers is mandatory.

Parsers that do not support tables without headers

Parsers that do support tables without headers.

CSS solution

If you're able to change the CSS of the HTML output you can however leverage the :empty pseudo class to hide an empty header and make it look like there is no header at all.

Improve this answer

3 Comments

More on CSS solution: stackoverflow.com/questions/12023771/hide-empty-cells-in-table
:empty doesn't help because if you only hide the <th> it doesn't look right; you have to hide the whole <tr> or even the entire <thead>.
Or you could just put the content in the header and have no rows
46

Universal Solution

Many of the suggestions unfortunately do not work for all Markdown viewers/editors, for instance, the popular Markdown Viewer Chrome extension, but they do work with iA Writer.

What does seem to work across both of these popular programs (and might work for your particular application) is to use HTML comment blocks ('<!-- -->'):

| <!-- --> | <!-- --> | |-------------|-------------| | Foo | Bar |
Foo Bar

Like some of the earlier suggestions stated, this does add an empty header row in your Markdown viewer/editor. In iA Writer, it's aesthetically small enough that it doesn't get in my way too much.

Improve this answer

12 Comments

This completely defats the point of using Markdown, as when viewed as text-only, the comments will be stripped and the columns won't even align anymore.
I think @hackel misunderstood. This does not align the columns using fixed widths. Rather, it gives a nice workaround to have valid but empty column headers. It was a great workaround in my situation. The table still rendered as intended/expected; it simply had no header row.
Nice, yet this really isn't a universal solution
This will create an empty table header and an empty row.
@TonyBarganski I must have missed a typo. You are right it does work. And actually without the <!-- --> in the header line. Leaving empty spaces
|
20

I got this working with Bitbucket's Markdown by using a empty link:

[]() | ------|------ Row 1 | row 2
Improve this answer

3 Comments

Will also prompt an empty header line. At least its only half the height as an normal line. Worked for me as Hack in github too
This hack worked for me when writing documentation in Insomnia. Still creates a header line, but it's a lot shorter than if I put text in there. Thanks!
Brilliant! I still see a little vertical space with Github Markdown, but it's better than before.
20

At least for the GitHub Flavoured Markdown, you can give the illusion by making all the non‑header row entries bold with the regular __ or ** formatting:

|Regular | text | in header | turns bold | |-|-|-|-| | __So__ | __bold__ | __all__ | __table entries__ | | __and__ | __it looks__ | __like a__ | __"headerless table"__ |
Regular text in header turns bold
So bold all table entries
and it looks like a "headerless table"
Improve this answer

4 Comments

I was looking for something that'd work in GFM and this hack is a creative one!
There's a problem when rendered tables have a different color for header row (e.g. StackExchange).
By default, the header texts are center aligned, you may want to align them to the left if you don't want the header to standout. In your second line, change it to |:-|:-|:-|:-|
To perfect the illusion, you should also make the text outside the table bold so that the table won't stand out 😃.
16

You may be able to hide a heading if you can add the following CSS:

<style> th { display: none; } </style>

This is a bit heavy-handed and doesn’t distinguish between tables, but it may do for a simple task.

Update

HTML output varies between Markdown editors, but if the table includes a thead element, you can target the empty header cells more specifically with:

thead th:empty { border: thin solid red !important; display: none; }

This works if your header row contains no visible content. Spaces between the bars are OK.

Improve this answer

1 Comment

The only CSS trick that works for me for some reason (I'm using VNote with the Markdown-it renderer). None of the solutions given here: stackoverflow.com/questions/12023771/hide-empty-cells-in-table worked.
13

Omitting the header above the divider produces a headerless table in at least Perl Text::MultiMarkdown and in FletcherPenney MultiMarkdown

|-------------|--------| |**Name:** |John Doe| |**Position:**|CEO |

See PHP Markdown feature request

Empty headers in PHP Parsedown produce tables with empty headers that are usually invisible (depending on your CSS) and so look like headerless tables.

| | | |-----|-----| |Foo |37 | |Bar |101 |
Improve this answer

2 Comments

About the use of Parsedown, actually the header is still here, just check the HTML. If you have a CSS padding on cells you will see the header cells. But I guess that table th:empty { padding: 0; } would fix that.
All of these is now included in adius' answer.
8

The following works well for me in GitHub. The first row is no longer bolded as it is not a header:

<table align="center"> <tr> <td align="center"><img src="docs/img1.png?raw=true" alt="some text"></td> <td align="center">Some other text</td> <td align="center">More text</td> </tr> <tr> <td align="center"><img src="docs/img2.png?raw=true" alt="some text"></td> <td align="center">Some other text 2</td> <td align="center">More text 2</td> </tr> </table>

Check a sample HTML table without a header here.

Improve this answer

2 Comments

This is just what the questioner said they didn't want.
HTML tables don't seem to work in Bitbucket (community.atlassian.com/t5/Bitbucket-questions/…) - it displays the HTML itself rather than rendering a table.
5 
$ cat foo.md Key 1 | Value 1 Key 2 | Value 2 
$ kramdown foo.md <table> <tbody> <tr> <td>Key 1</td> <td>Value 1</td> </tr> <tr> <td>Key 2</td> <td>Value 2</td> </tr> </tbody> </table>
Improve this answer

1 Comment

This seems not to work with github.com/chjj/marked . Is there a reference, in which I can look up if this is even the expected behavior?
4

I've found that putting the content in the header often works for what I'm trying to do:

 | a | b | c | |--|--|--|
a b c
Improve this answer

Comments

3 
<style> .headerless th { display: none; } </style> <div class="headerless"> | | | |---|---| |Some |table | | WITHOUT | header | </div> |This|is| |---|---| |Some |table | | WITH |header |
Improve this answer

1 Comment

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach?
3

Pure CSS solution (working as of 2023-12-19 for all browsers)

  1. IF any empty ths exist, AND
  2. no any th elements with content, THEN
  3. display: none;

/* PURE CSS SOLUTION */ table > thead:has(> tr > th:empty):not(:has(> tr > th:not(:empty))) { display: none; }
<h1>Compiled Markdown</h1> <div id="markdown-compiled"></div> <hr> <h1>Raw Markdown</h1> <pre><code id="markdown-raw"> <!-- OR USE MARKDOWN INLINE CSS HTML STYLE --> <style type="text/css" rel="stylesheet"> table > thead:has(> tr > th:empty):not(:has(> tr > th:not(:empty))) { display: none; } </style> ### Empty header | | | | ----- | ----- | | Lorem | ipsum | | dolor | sit | ### Header with content | | not empty | | ----- | --------- | | Lorem | ipsum | | dolor | sit | </code></pre> <!-- !!! IGNORE THE FOLLOWING !!! --> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <style> /* Table styling from https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l */ table { border-collapse: collapse; margin: 25px 0; font-size: 0.9em; font-family: sans-serif; min-width: 400px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } table thead tr { background-color: #009879; color: #ffffff; text-align: left; } table th, table td { padding: 12px 15px; } table tbody tr { border-bottom: 1px solid #dddddd; } table tbody tr:nth-of-type(even) { background-color: #f3f3f3; } table tbody tr:last-of-type { border-bottom: 2px solid #009879; } </style> <script> document.getElementById('markdown-compiled').innerHTML = marked.parse(document.getElementById('markdown-raw').innerHTML); </script>

Improve this answer

Comments

2

I use <span> in the first column header:

 <span> | --- | --- Value | Value Value | Value

It creates an empty header with border, but with 1/2 the size.
Value
Value
Improve this answer

Comments

1

what works in GitHub issue editor is

&nbsp; |&nbsp; ------ | --- Foo | Bar

But it does show an empty header

   
Foo Bar
Improve this answer

1 Comment

As someone with a quasi-Markdown parser that does tables I'm wondering if I should "special case" the first row being non-breaking space cells - and just suppress the header row. My target (PowerPoint slides) would happily support a headerless table. Or would this be considered a deviation too far? (I already have a section in the manual for such deviations - so could add this as "some other parsers might not...")
0

This solution does not even attempt to involve Markdown tables. It uses the plain text feature of Markdown to make the table in a different way.

+-----+-------+ |Key 1|Value 1| +-----+-------+ |Key 2|Value 2| +-----+-------+

Before flaming me, please consider that this old-school answer is from someone who remembers terminals and mainframe green screens. Back in the day, the ASCII character set was used for everything. Necessity led to invention.

Improve this answer

Comments

-1

Adding a CSS hack (source) to this collection of workarounds:

|<span style="font-weight:normal">This is not</span>|<span style="font-weight:normal">A Header</span>| |:--------------------------------------------------|:-----------------------------------------------| | Achieved using a | CSS hack |

This works with Hoedown, the markdown parser used by Macdown.

Doesn't work for Github markdown, for this there's already a very creative solution of making all text bold so that the header doesn't stands out.

Improve this answer

1 Comment

"for this there's already a very creative solution of making all text bold" That's neither creative nor a solution, but an ugly alternative.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.