CODEWITHSUNDEEP
markdownhtml-tablemultimarkdown
adius
adius

Reputation: 14962

Create a table without a header in Markdown

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>

Upvotes: 284

Views: 268724

Answers (15)

DWilches
DWilches

Reputation: 23015

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.

Upvotes: 8

Manngo
Manngo

Reputation: 16311

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.

Upvotes: 13

Simon
Simon

Reputation: 144

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

Upvotes: 0

user2314737
user2314737

Reputation: 29337

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.

Upvotes: 0

vellotis
vellotis

Reputation: 829

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>

Upvotes: 0

theking2
theking2

Reputation: 2823

what works in GitHub issue editor is

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

But it does show an empty header

   
Foo Bar

Upvotes: 1

TG Gowda
TG Gowda

Reputation: 11947

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.

Upvotes: 173

Tony Barganski
Tony Barganski

Reputation: 2291

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.

Upvotes: 45

Long-John Silver
Long-John Silver

Reputation: 45

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

Upvotes: 2

TT--
TT--

Reputation: 3195

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"

Upvotes: 17

Aleksandr
Aleksandr

Reputation: 31

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

<div class="headerless">

| | |
|---|---|
|Some |table |
| WITHOUT | header |
</div>

|This|is|
|---|---|
|Some |table |
| WITH |header |

Upvotes: 3

adius
adius

Reputation: 14962

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.

Upvotes: 169

Stuart Campbell
Stuart Campbell

Reputation: 1147

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

[]()  | 
------|------
Row 1 | row 2

Upvotes: 20

RedGrittyBrick
RedGrittyBrick

Reputation: 4002

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  |

Upvotes: 12

Zombo
Zombo

Reputation: 1

$ 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>

Upvotes: 4

Related Questions