Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >将熊猫数据呈现为HTML,其样式与朱庇特笔记本相同

将熊猫数据呈现为HTML,其样式与朱庇特笔记本相同
EN

Stack Overflow用户
提问于 2018-08-30 12:11:20
回答 2查看 7.4K关注 0票数 17

我想把熊猫的数据以同样的方式呈现给HTML,就像木星笔记本一样,也就是所有的铃铛和雨衣,比如漂亮的造型,列的突出显示,以及点击上的列排序。

html只输出一个普通的HTML表,并且需要手动样式等等。

jupyter使用的dataframe呈现代码是否可以作为一个独立模块用于任何web应用程序?

另外,像js/css文件这样的资产是否与jupyter分离,以便便于重用?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-01-27 22:46:08

首先要澄清的几点:

  • 熊猫与造型没有任何关系,所有的 HTML表都会出现这种造型,而不仅仅是数据格式。这很容易通过在木星中显示HTML表(答案末尾的示例代码)来检查。
  • 似乎你的木星或你的一个安装的扩展正在做“额外”的样式,默认的样式不包括列排序或列突出显示。只有奇数/偶数行着色和行高亮显示(检查了木星源代码和我的本地木星安装)。这意味着我的回答可能不包括您想要的所有样式。

答案

jupyter使用的dataframe呈现代码是否可以作为一个独立模块用于任何web应用程序?

并不完全是一个独立的模块,但是所有的表格式和样式似乎都附加到html类上。通过检查Firefox中的笔记本HTML,对此进行了二次检查。

您可以使用上面直接链接的.less文件,也可以将所需的样式复制到您的HTML中。

另外,像js/css文件这样的资产是否与jupyter分离,以便便于重用?

就像任何设计良好的web项目(实际上是任何软件项目)一样,包和模块是很好地分开的。这意味着您可以在项目中以最小的努力重用大量代码。您可以在木星源代码.less中找到大多数的这里样式文件。

一个检查样式是否发生在所有HTML表中的示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
from IPython.display import HTML

HTML('''<table>
  <thead><tr><th></th><th>a</th><th>b</th></tr></thead>
  <tbody>
    <tr><th>0</th><td>1</td><td>3</td></tr>
    <tr><th>1</th><td>2</td><td>4</td></tr>
  </tbody>
</table>''')
票数 4
EN

Stack Overflow用户

发布于 2020-07-03 05:39:36

这对我来说很好

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
def getTableHTML(df):
    
    """
    From https://stackoverflow.com/a/49687866/2007153
    
    Get a Jupyter like html of pandas dataframe
    
    """

    styles = [
        #table properties
        dict(selector=" ", 
             props=[("margin","0"),
                    ("font-family",'"Helvetica", "Arial", sans-serif'),
                    ("border-collapse", "collapse"),
                    ("border","none"),
    #                 ("border", "2px solid #ccf")
                       ]),

        #header color - optional
    #     dict(selector="thead", 
    #          props=[("background-color","#cc8484")
    #                ]),

        #background shading
        dict(selector="tbody tr:nth-child(even)",
             props=[("background-color", "#fff")]),
        dict(selector="tbody tr:nth-child(odd)",
             props=[("background-color", "#eee")]),

        #cell spacing
        dict(selector="td", 
             props=[("padding", ".5em")]),

        #header cell properties
        dict(selector="th", 
             props=[("font-size", "100%"),
                    ("text-align", "center")]),


    ]
    return (df.style.set_table_styles(styles)).render()
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
iris = pd.read_csv('https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv')
getTableHTML(iris)
票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52104682

复制
相关文章
React 条件渲染(下)
render() { const isLoggedIn = this.state.isLoggedIn; return (
陈不成i
2021/07/29
7920
React 条件渲染(上)
在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。
陈不成i
2021/07/29
9260
列表渲染与条件渲染
相同的结构是列表渲染的前提,列表等都会有⼏千上万条的数据,它们的共同的特征就是数据的结构相同。
达达前端
2019/11/29
1.6K0
61. 精读《React 八种条件渲染》
本期精读的文章是:8 React conditional rendering methods
黄子毅
2022/03/14
5840
React 条件渲染最佳实践(7 种方法)
在 React 中,条件渲染可以通过多种方式,不同的使用方式场景取决于不同的上下文。在本文中,我们将讨论所有可用于为 React 中的条件渲染编写更好的代码的方法。
秋风的笔记
2020/10/27
5.8K0
【小程序】条件渲染与列表渲染
在小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:
陶然同学
2023/02/24
1K0
【小程序】条件渲染与列表渲染
vue条件渲染
Vue.js中最常用的条件渲染方式是使用v-if指令。这个指令用于在DOM中插入或删除元素,基于一个表达式的结果来决定元素是否应该显示。如果表达式的结果为真,则元素会被渲染;如果结果为假,则元素会被从DOM中移除。
堕落飞鸟
2023/05/21
6570
React-BrowserRouter与HashRouter
BrowserRouter是React Router库提供的一种路由器组件,它使用HTML5 History API来管理URL和导航。BrowserRouter使用浏览器的history对象来记录URL的变化,并通过JavaScript来处理导航。
堕落飞鸟
2023/05/20
1.5K0
Vue 3 条件渲染
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
公众号---人生代码
2020/11/03
9930
Vue 3 条件渲染
React渲染机制
jsx语法转换后,会通过creatElement或jsx的api转换为React element作为ReactDom.render()的第一个参数进行渲染。
goClient1992
2022/12/16
5960
请停止在 React 中使用“&&”进行条件渲染
英文 | https://javascript.plainenglish.io/its-2023-please-stop-using-for-conditional-rendering-in-react-b588a09ebb17
winty
2023/08/23
2400
请停止在 React 中使用“&&”进行条件渲染
Vue基础:条件渲染、列表渲染、事件处理
那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,<input> 不会被替换掉——仅仅是替换了它的 placeholder。
奋飛
2019/08/15
1.9K0
Vue基础:条件渲染、列表渲染、事件处理
那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素, 不会被替换掉——仅仅是替换了它的 placeholder。
奋飛
2021/08/30
7850
React 元素渲染
与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
陈不成i
2021/07/29
5970
十二.Vue条件渲染
十二.Vue条件渲染
Java架构师必看
2021/05/14
7740
十二.Vue条件渲染
【React】1738- 请停止在 React 中使用“&&”进行条件渲染
我经常需要编写需要从服务器端获取数据的页面,这些数据用于呈现列表。如果数据的长度为0,则不应显示。
pingan8787
2023/09/01
2920
【React】1738- 请停止在 React 中使用“&&”进行条件渲染
react入门(五):事件处理、条件渲染、列表&keys、表单
一、事件处理 React事件绑定属性的命名采用驼峰式写法,而不是小写。 直接看代码 两种方式绑定事件并传参数 第一种: constructor(props) { super(props); //在dom上用bind函数绑定了this,这里可以省略 this.handleClick = this.handleClick.bind(this); } handleClick(value, e) { //e要写在value后面 console.log(value);
柴小智
2020/02/13
1.1K0
React Router 邦邦两拳🥊 🥊
这是我参与11月更文挑战的第16天,活动详情查看:2021最后一次更文挑战」 简介
用户4793865
2023/01/12
3.4K0
Vue3 | 条件渲染 与 列表循环渲染
而v-show则通过style="display: none;"样式的配置 隐藏组件:
凌川江雪
2021/03/04
1.2K0
Vue3 | 条件渲染 与 列表循环渲染
测开技能--Web开发 React 学习(九)条件渲染
在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后,依据应用的不同状态,你可以只渲染对应状态下的部分内容。
雷子
2021/03/15
4660
测开技能--Web开发 React 学习(九)条件渲染

相似问题

使用React路由器进行条件渲染

40

React路由器渲染

18

React路由器渲染道具

11

ReactJS和React路由器中的条件路由和条件渲染

219

使用react路由器渲染页面

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文