102

I have below ipython notebook code (markdown):

#### example table
|Name|Description|
|--|-------------------------------|
|Mary |She is a nice girl.|
|Jackie |He is a very naughty boy.|

The output looks like below: enter image description here

How can I:

  1. Left align the table of the cell, it's center by default now.
  2. Right align the second col text.
lucky1928
  • 8,708
  • 10
  • 43
  • 92

9 Answers9

69

Well, yes !

| Name | Description | age         
| :- |-------------: | :-:
|Mary| She is a nice girl.  | 20
| Jackie Junior | He is a very naughty boy. | 5
  • :--- or --- = left align
  • ---: = right align
  • :---: = centered

table

jrjc
  • 21,103
  • 9
  • 64
  • 78
  • 10
    Cool, you have answered my second question. how about the first one? BTW, the first question means the whole table is in the center of the page, I wish to align it to the left of page border. – lucky1928 Jul 09 '14 at 01:28
  • Ah, I didn't understood you wanted the table to be left align. For that I don't know, I'm not sure it's possible in Markdown. But it might be possible with nbconvert to html by using a template which left align table by modifying CSS properties of tables – jrjc Jul 09 '14 at 10:47
  • 28
    Doesn't work in a fresh markdown cell in jupyter notebook (they changed the name from ipython notebook a few years ago): All cell content is right-justified. Any ideas? – Joachim Wagner Feb 01 '18 at 12:39
  • 3
    As @JoachimWagner notes, this seems to not be working, and to be related to this bug: https://github.com/jupyter/notebook/issues/3919 – nealmcb Oct 30 '18 at 04:33
  • 2
    @nealmcb, you're right, but it works in jupyter lab. https://github.com/jupyterlab/jupyterlab/pull/5301 – jrjc Oct 30 '18 at 17:41
62

Answer to the 1st question - left-align the table - create and run a code cell above the table markdown cell, with the following content:

%%html
<style>
table {float:left}
</style>
knuth
  • 683
  • 5
  • 7
  • 4
    This forces all subsequent lines to be to the right of the table, and Roberto's solution below doesn't work. So how do you put it on the left without messing up the surrounding format? – orodbhen Sep 22 '16 at 01:47
  • 1
    @orodbhen I have edited my solution to work with the new styles of the jupyter-notebook, does it solve your problem? – Roberto Trani Mar 22 '17 at 08:46
  • 2
    it does not work for me, use `table { text-align: left }` instead works well. – weiheng Dec 13 '17 at 12:09
  • 3
    `table {align:left;display:block}` Try this to above the subsequent lines float to the right of the table – Cheng Jan 06 '19 at 13:23
  • Just a tip on best practices, `float` should generally be avoided in HTML/CSS except in certain specific situations, because of how it has unintended effects on the flow of the surrounding document. – Danny Bullis Jun 10 '21 at 18:25
  • This doesn't work when rendering ipynb on github, does it? – Lance Jan 23 '22 at 20:40
40

I would suggest to use this variant of the knuth's answer that doesn't affect the flow of the remaining elements around the table. Put this code inside a cell above the one containing the table:

%%html
<style>
  table {margin-left: 0 !important;}
</style>
Roberto Trani
  • 1,217
  • 11
  • 14
  • I just tested both solutions on Python 2.7 in Jupyter / Anaconda 4.2. The "float" solution works. The margin-left solution put forward in your post did not change the alignment of the table in my notebooks. Out of curiosity,did you test on 3.x or 2.7? – TMWP Mar 18 '17 at 15:59
  • 1
    @TMWP you are right, something has changed in the default css styles. To fix this add !important at the end of the style (as in the edited solution) to overcome the problem. Thank you for the report. – Roberto Trani Mar 22 '17 at 08:43
  • That fixes it for 2.7. Output is also slightly cleaner than the original posted output which seems to add a little verticle space. – TMWP Mar 22 '17 at 13:00
  • Works for me in 3.5 as well – etov Nov 22 '17 at 09:36
  • Works for me - Dec 2020 – Mitch Dec 24 '20 at 18:48
  • Agreed; float does weird things in HTML/CSS and is good to avoid except in specific situations. – Danny Bullis Jun 10 '21 at 18:23
  • This doesn't work when rendering ipynb on github, does it? – Lance Jan 23 '22 at 20:40
10

Yeah, I don't like that centered table either. Insert this at the top of your notebook after the imports section:

from IPython.core.display import HTML
table_css = 'table {align:left;display:block} '
HTML('<style>{}</style>'.format(table_css))

The IPython.core.display namespace allows you to imbed audio, local filelinks among others - as well as HTML within your notebook.

Douglas Wiley
  • 483
  • 1
  • 7
  • 10
7

You can make a custom preference in Ipython.

Just make the following file

~/.ipython/profile_default/static/custom/custom.css

and add the following code. 

table {float: left};

and You don't have to put the custom css in all ipython files.

Anderson
  • 3,139
  • 3
  • 33
  • 45
  • How could I set cells width to be wider? – Royi Mar 20 '18 at 18:43
  • There's a fairly exhaustive discussion on setting cell widths here: https://stackoverflow.com/questions/21971449/how-do-i-increase-the-cell-width-of-the-jupyter-ipython-notebook-in-my-browser. Best of luck with it. – amunnelly Oct 31 '18 at 11:40
  • 2
    For a Jupyter notebook, use `~/.jupyter//custom/custom.css`. – Vicki B Jan 03 '20 at 23:48
7

!important overrides the css of rendered _html

Use your styles with !important

<style> table td, table th, table tr {text-align:left !important;} </style>

petezurich
  • 9,280
  • 9
  • 43
  • 57
balaji dileep kumar
  • 622
  • 7
  • 12
7

I know many have already answered this, but personally, I found their answer lacks a little more description, and because of this many are not able to implement this.

Clarification

Also, I want to clear one thing that I am not giving the solution for aligning the values inside the table but for aligning the whole table rendering itself. And if you are looking solution for the table's cell alignment then you can consider the first answer itself

Solution

Here are the steps:

  • First create a Code cell (not markdown) just above your markdown cell where you want to show your table.
  • Then write the following in your Code cell inside it.
%%html
<style>
table {float:left}
</style>
Run your Code cell.
  • Now just create your table as normally you do, no need to add anything extra. And Voila! Your table should now render to the left.

For every notebook, you have to do this step for changing the table alignment. But if you don't want to do this, you can follow @Anderson answer. For ease, I am copying his answer here.

  • First you need to create a file named custom.css where you will put the following code
table {float: left};
  • Then you have to move this file to your ipython directories, it will be something like this
~/.ipython/profile_default/static/custom/custom.css

Hope it helped

Darkstar Dream
  • 1,649
  • 1
  • 12
  • 23
3

Answering the fist question: When creating a table and assigning it the float: left attribute you end up having to add more CSS to resolve the text that surrounds the table. Place this in a code cell before your markdown cell

%%html
<style>
    table {
        display: inline-block
    }
</style>

However, if you have a lot of CSS, might be best to put it in another file for the overall beauty of the document.

@jrjc answers the 2nd question perfectly ;)

sometimes24
  • 355
  • 4
  • 15
0

If you look at the table in the inspector, you'll see that the cause of the issue is the fact that the margin-left and margin-right CSS properties on the table are set to auto, making it centered. You can make it left-aligned by doing something like this in your custom.css:

.rendered_html table {
    margin-left: 0px;
}

That should only left-align those specific tables and not affect anything else.

David A
  • 344
  • 1
  • 4