Skip to content

DOC: minor fixes to recent Styler guide PR #40691

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 30, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 23 additions & 11 deletions doc/source/user_guide/style.ipynb
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@
"Table styles are flexible enough to control all individual parts of the table, including column headers and indexes. \n",
"However, they can be unwieldy to type for individual data cells or for any kind of conditional formatting, so we recommend that table styles are used for broad styling, such as entire rows or columns at a time.\n",
"\n",
"Table styles are also used to control features which can apply to the whole table at once such as greating a generic hover functionality. The `:hover` pseudo-selector, as well as other pseudo-selectors, can only be used this way.\n",
"Table styles are also used to control features which can apply to the whole table at once such as creating a generic hover functionality. The `:hover` pseudo-selector, as well as other pseudo-selectors, can only be used this way.\n",
"\n",
"To replicate the normal format of CSS selectors and properties (attribute value pairs), e.g. \n",
"\n",
Expand Down Expand Up @@ -295,7 +295,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Next we just add a couple more styling artifacts targeting specific parts of the table, and we add some internally defined CSS classes that we need for the next section. Be careful here, since we are *chaining methods* we need to explicitly instruct the method **not to** ``overwrite`` the existing styles."
"Next we just add a couple more styling artifacts targeting specific parts of the table. Be careful here, since we are *chaining methods* we need to explicitly instruct the method **not to** ``overwrite`` the existing styles."
]
},
{
Expand All @@ -308,11 +308,6 @@
" {'selector': 'th.col_heading', 'props': 'text-align: center;'},\n",
" {'selector': 'th.col_heading.level0', 'props': 'font-size: 1.5em;'},\n",
" {'selector': 'td', 'props': 'text-align: center; font-weight: bold;'},\n",
" # internal CSS classes\n",
" {'selector': '.true', 'props': 'background-color: #e6ffe6;'},\n",
" {'selector': '.false', 'props': 'background-color: #ffe6e6;'},\n",
" {'selector': '.border-red', 'props': 'border: 2px dashed red;'},\n",
" {'selector': '.border-green', 'props': 'border: 2px dashed green;'},\n",
"], overwrite=False)"
]
},
Expand Down Expand Up @@ -394,7 +389,7 @@
"\n",
"*New in version 1.2.0*\n",
"\n",
"The [.set_td_classes()][tdclass] method accepts a DataFrame with matching indices and columns to the underlying [Styler][styler]'s DataFrame. That DataFrame will contain strings as css-classes to add to individual data cells: the `<td>` elements of the `<table>`. Here we add our `.true` and `.false` classes that we created previously. We will save adding the borders until the [section on tooltips](#Tooltips).\n",
"The [.set_td_classes()][tdclass] method accepts a DataFrame with matching indices and columns to the underlying [Styler][styler]'s DataFrame. That DataFrame will contain strings as css-classes to add to individual data cells: the `<td>` elements of the `<table>`. Rather than use external CSS we will create our classes internally and add them to table style. We will save adding the borders until the [section on tooltips](#Tooltips).\n",
"\n",
"[tdclass]: ../reference/api/pandas.io.formats.style.Styler.set_td_classes.rst\n",
"[styler]: ../reference/api/pandas.io.formats.style.Styler.rst"
Expand All @@ -406,6 +401,10 @@
"metadata": {},
"outputs": [],
"source": [
"s.set_table_styles([ # create internal CSS classes\n",
" {'selector': '.true', 'props': 'background-color: #e6ffe6;'},\n",
" {'selector': '.false', 'props': 'background-color: #ffe6e6;'},\n",
"], overwrite=False)\n",
"cell_color = pd.DataFrame([['true ', 'false ', 'true ', 'false '], \n",
" ['false ', 'true ', 'false ', 'true ']], \n",
" index=df.index, \n",
Expand Down Expand Up @@ -622,7 +621,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"The only thing left to do for our table is to add the highlighting borders to draw the audience attention to the tooltips. **Setting classes always overwrites** so we need to make sure we add the previous classes."
"The only thing left to do for our table is to add the highlighting borders to draw the audience attention to the tooltips. We will create internal CSS classes as before using table styles. **Setting classes always overwrites** so we need to make sure we add the previous classes."
]
},
{
Expand All @@ -631,6 +630,10 @@
"metadata": {},
"outputs": [],
"source": [
"s.set_table_styles([ # create internal CSS classes\n",
" {'selector': '.border-red', 'props': 'border: 2px dashed red;'},\n",
" {'selector': '.border-green', 'props': 'border: 2px dashed green;'},\n",
"], overwrite=False)\n",
"cell_border = pd.DataFrame([['border-green ', ' ', ' ', 'border-red '], \n",
" [' ', ' ', ' ', ' ']], \n",
" index=df.index, \n",
Expand Down Expand Up @@ -1381,7 +1384,7 @@
"source": [
"### HTML Escaping\n",
"\n",
"Suppose you have to display HTML within HTML, that can be a bit of pain when the renderer can't distinguish. You can use the `escape` formatting option to handle this. Even use it within a formatter that contains HTML itself."
"Suppose you have to display HTML within HTML, that can be a bit of pain when the renderer can't distinguish. You can use the `escape` formatting option to handle this, and even use it within a formatter that contains HTML itself."
]
},
{
Expand All @@ -1400,7 +1403,16 @@
"metadata": {},
"outputs": [],
"source": [
"# df4.style.format(escape=True)"
"df4.style.format(escape=True)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"df4.style.format('<a href=\"https://pandas.pydata.org\" target=\"_blank\">{}</a>', escape=True)"
]
},
{
Expand Down