ipython notebook align table to the left of cell

StackOverflow https://stackoverflow.com/questions/21892570

  •  13-10-2022
  •  | 
  •  

Question

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.
Was it helpful?

Solution

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

OTHER TIPS

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>

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>

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.

!important Overrides the css of rendered _html

Use your styles with !important

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

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.

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 😊

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top