Jupyter Notebook table design in vs code

Question

I have a concern working with Jupyter Notebook in VS Code: I was trying to make a simple table using markdown but come across with a simple issue

| Class Interval | frequency |
| :------------: | :-------: |
| 10-19 | 3 |
| 20-29 | 5 |
| 30-39 | 3 |
| 40-49 | 1 |

I was using this markdown code but the output was not that visually relevant, the headers are really near to each other. Image

How can I fix this? and how can I separate the header to each other visually?

that is already the code, I was only using the markdown feature of vs code-jupyter — Rica Dan, May 10 '21 at 12:05

score 1 · Answer 1 · answered May 06 '21 at 08:12

You can try putting some CSS styling with your table, eg. to style table header elements.

<style>
th {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
}
</style>

| Class Interval | frequency |
| :------------: | :-------:  |
| 10-19 | 3 |
| 20-29 | 5 |
| 30-39 | 3 |
| 40-49 | 1 |

While this changed the table in the markdown viewer I was using to test, it doesn't seem to change a Jupyter notebook cell. You may want to look at this answer as well.

Jupyter Notebook table design in vs code

1 Answers1