How to display Table in README.md file in Github?

Question

I want to display a table in readme.md file. I read GitHub Flavored Markdown and followed what it said. So this is my table:

| Attempt | #1 | #2 | #3 | #4 | #5 | #6 | #7 | #8 | #9 | #10 | #11 | #12 |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| Seconds | 301 | 283 | 290 | 286 | 289 | 285 | 287 | 287 | 272 | 276 | 269 | 254 |

However, I don't see any table and result looks like:

My experience (12/2021) suggests the documentation isn’t reliable with respect to `.md` files in a git repo., like the `README.md` file. I migrated about 300 `.md` files from Azure DevOps Wiki and most all tables came across and render just fine. That’s without the "preceding blank line" and without the "required" 3 hyphens (dashes). The few tables that did not render correctly were due to the column header line specifying more columns than the table contained. Azure DevOps Wiki engine didn’t mind. GitHub’s rendering did. Finding the source of the issue was painful. Fixing it was trivial. — ScottWelker, Dec 03 '21 at 23:15

score 181 · Accepted Answer · answered Sep 07 '16 at 20:21

181

You need to see documentation again. You can see this cheatsheet

In your case you need to make second line like in example below:

Attempt | #1 | #2 | #3 | #4 | #5 | #6 | #7 | #8 | #9 | #10 | #11
--- | --- | --- | --- |--- |--- |--- |--- |--- |--- |--- |---
Seconds | 301 | 283 | 290 | 286 | 289 | 285 | 287 | 287 | 272 | 276 | 269

difference between this code and your code in repo is that second line with separator has same columns as header. After that this table will be shown

answered Sep 07 '16 at 20:21

Spell

8,188
2
16
19

1

ya, thanks man. Even readme.md plugin on my Android studio still doesn't show the table while Github does. Thanks for sharing your knowledge. – Hesam Sep 07 '16 at 20:27
1

@Hesam I recommend you to use some online Markdown editor. I used [this](http://dillinger.io/) – Spell Sep 07 '16 at 20:29

Gerard Roche · Answer 2 · 2022-08-25T03:06:38.100

| Attempt | #1 | #2 | #3 | #4 | #5 | #6 | #7 | #8 | #9 | #10 | #11 | #12 |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| Seconds | 301 | 283 | 290 | 286 | 289 | 285 | 287 | 287 | 272 | 276 | 269 | 254 |

Making your example shorter to make easier to understand.

| Attempt | #1    | #2    |
| :---:   | :---: | :---: |
| Seconds | 301   | 283   |

And formatted to make it even easier to read.

| Attempt | #1    | #2    |
| :---:   | :---: | :---: |
| Seconds | 301   | 283   |

Headers must be separated by pipe | characters and underlined by - dash characters. There must be at least three hyphens in each column.

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |.
First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell
For aesthetic purposes, you can also add extra pipes on the ends:
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
— GitHub Flavored Markdown

Our example becomes:

| Attempt | #1  | #2  |
| ------- | --- | --- |
| Seconds | 301 | 283 |

Finally, by including colons : within the header row, you can define text to be left-aligned, right-aligned, or center-aligned:
| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |
— GitHub Flavored Markdown

So to center align, our example becomes:

| Attempt | #1    | #2    |
| :-----: | :---: | :---: |
| Seconds | 301   | 283   |

The final example is not correct because you need at least 3 hyphens as the [documentation says](https://docs.github.com/en/free-pro-team@latest/github/writing-on-github/organizing-information-with-tables#creating-a-table). — Iuri Guilherme, Dec 17 '20 at 20:05
Great answer, thank you. I assume this must be marked as accepted. — Alexandr, Jul 06 '22 at 07:26

score 20 · Answer 3 · answered Jun 11 '19 at 16:17

20

Don't forget to include an empty line before the table or it won't format correctly.

answered Jun 11 '19 at 16:17

Vito

319
2
5

4

This provide no useful answer , Please if you want to point to something you can use comments – Abdulrahman Falyoun Jun 11 '19 at 19:09
5

This! This fixed my problem. The extra line is part of the formatting and I didn't realize that. – webneko Feb 28 '20 at 21:39
I am kind of impatient, I faced same problem, this resolved my problem as well. – CredibleAshok Jun 27 '22 at 08:18

score 10 · Answer 4 · answered Nov 14 '17 at 20:36

I use the Markdown Table tool (https://www.tablesgenerator.com/markdown_tables) that helps me to import data from csv or convert my html tables into Markdown which I can simply copy it into my README.md file and it's a real timesaver for me.

I generally write things that I'm going to publish on my README file on excel file and save it as csv and import into this tool and copy paste the Generated Markdown and it creates a table that its decent for others to read your instructions.

Hope that helps.

score 4 · Answer 5 · answered Sep 07 '16 at 20:03

4

Save your readme file as README.md and not READ.ME

answered Sep 07 '16 at 20:03

Varad Chemburkar

458
2
6
15

1

ah, sorry, it was my typo mistake (I fixed it in my question). It is readme.md actually. This is my repo https://github.com/Hesamedin/DatabaseTester – Hesam Sep 07 '16 at 20:13

Fabian Zelaya · Answer 6 · 2022-09-09T08:23:43.467

3

We can add three dashes (center aligned): | --- |
Center align with two dashes: | :---: |
Left align with two dashes: | :--- |
Right align with two dashes: | ---: |

Sample (Left align):

Collection coll = new ArrayList<>();	The ArrayList class implements the Collection interface.
coll = new TreeSet<>();	The TreeSet class also implements the Collection interface.

edited Sep 09 '22 at 08:23

answered Sep 09 '22 at 08:22

Fabian Zelaya

31
4

nahidhashik · Answer 7 · 2023-03-15T03:14:21.410

2

You can create tables with pipes | and hyphens -. Hyphens are used to create each column's header, while pipes separate each column. You must include a blank line before your table in order for it to correctly render

follow this image

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

edited Mar 15 '23 at 03:14

answered Mar 15 '23 at 03:09

nahidhashik

21
4

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables – nahidhashik Mar 15 '23 at 03:14

score 2 · Answer 8 · answered May 26 '23 at 12:14

| Header    | Heading |
| --------- | ------- |
| first     |         |
|           |         |
|           |         |
|           |         |
|           |         |
|           |         |
|           |         |

You can use this pattern to form README.md

How to display Table in README.md file in Github?

8 Answers8