'Horizontal' Tables in Markdown (gitHub flavour)

49 views Asked by At

I'm using VS Code 1.86.2 on Ubuntu 22.

I'm trying to get it to render a 'horizontal' table (if that's the right term), whereby the first column is the heading, and is shaded, or in bold text:

| Head 1 | Col 1 |
| Head 2 | Col2  |

I tried this, but it just puts a line break across the page:

Head 1      Col 1
----------- --------------
Head 2      Col 2
----------- --------------
2

There are 2 answers

0
jri On BEST ANSWER

Markdown does not support landscape tables out of the box. The closest you can get with native Markdown is something like this (note that all the header entries are bold):

| **Heading 1**   | Content 1 | Content 2 |
| -------------   | --------- | --------- |
| **Heading 2**   | Content 3 | Content 4 |
| **Heading 3**   | Content 5 | Content 6 |
Heading 1 Content 1 Content 2
Heading 2 Content 3 Content 4
Heading 3 Content 5 Content 6

However, if you are in an environment that supports HTML and CSS you can use something like this:

<style>
  th:first-child {
    font-weight: bold;
  }

  th {
    font-weight: normal;
  }

  .bold-first-column td:first-child {
    font-weight: bold;
  }
</style>
0
Chris On

Another option is to use HTML since it can be embedded in Markdown without any special syntax:

<table>
  <tr>
    <th>Head 1</th>
    <td>Col 1</td>
  </tr>
  <tr>
    <th>Head 2</th>
    <td>Col 2</td>
  </tr>
</table>

Stack Overflow seems to ignore table tags, but here's how it looks on GitHub:

Screenshot of table rendered on GitHub