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

GithubMarkdownReadme

Github Problem Overview


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:

enter image description here

Github Solutions


Solution 1 - Github

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

Solution 2 - Github

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

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

Solution 3 - Github

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

Solution 4 - Github

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.

Solution 5 - Github

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHesamView Question on Stackoverflow
Solution 1 - GithubSpellView Answer on Stackoverflow
Solution 2 - GithubGerard RocheView Answer on Stackoverflow
Solution 3 - GithubVitoView Answer on Stackoverflow
Solution 4 - GithubSidd ThotaView Answer on Stackoverflow
Solution 5 - GithubVarad ChemburkarView Answer on Stackoverflow