（数据科学学习手札109）Python+Dash快速web应用开发——静态部件篇（中）

　　 这是我的系列教程Python+Dash快速web应用开发的第七期，在上一期的文章中，我们对Dash生态里常用的一些简单静态部件进行了介绍和功能展示，并且get到dcc.Markdown()这种非常方便的静态部件。

　　而在今天的教程内容中，我将带大家学习Dash中渲染网页静态表格的常用方法，并在最后的例子中教大家如何配合Dash，简简单单编写一个数据库查询应用~

图1 2 在Dash中渲染静态表格

　　在Dash中渲染静态表格，方法有很多，而我们今天要学习的方法，是配合之前文章介绍过的第三方拓展dash_bootstrap_components中的Table()部件，借助bootstrap的特性来快速创建美观的静态表格：

图2

　　## 2.1 静态表格的构成

　　要学习如何基于Dash在前端中渲染出一张静态表格，首先我们需要学习其元素构成，Dash延续html中table标签相关概念，由Table()、Thead()、Tbody()、Tr()、Th()以及Td()等6个部件来构成一张完整的表，先从一个简单的例子出发：

app1.py

import dash import dash_html_components as html import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( dbc.Table( [ html.Thead( html.Tr( [ html.Th('第一列'), html.Th('第二列'), ] ) ), html.Tbody( [ html.Tr( [ html.Td('一行一列'), html.Td('一行二列'), ] ), html.Tr( [ html.Td('二行一列'), html.Td('二行二列'), ] ) ] ) ] ), style={ 'margin-top': '50px' # 设置顶部留白区域高度 } ) ) if __name__ == '__main__': app.run_server(debug=True)

图3

　　注意，我们这里使用到的Table()部件来自dash_bootstrap_components，而表格其余的构成部件均来自Dash原生的dash_html_components库，这些部件分别的作用如下：

Table()

　　Table()是一张静态表格最外层的部件，而之所以选择dash_bootstrap_components中的Table()，是因为其自带了诸多实用参数，常用的如下：

bordered：bool型，用于设置是否保留表格外边框线

borderless：bool型，用于设置是否删除表格内部单元格框线

striped：bool型，用于设置是否对数值行应用斑马着色方案，即相邻行背景色不同

dark：bool型，用于设置是否应用暗黑主题

hover：bool型，当设置为True时，鼠标悬浮于某行会有对应的效果

　　通过上述参数，我们就可以改变静态表格的整体效果，譬如设置dark=True之后的app1.py效果如下：

图4

Thead()与Tbody()

　　在部件Table()之下一级需要子元素Thead()与Tbody()，分别用于存放表头信息以及表数值内容信息。

Tr()、Th()与Td()

　　经过前面Table()嵌套Thead()与Tbody()的过程之后，我们就可以分别开始在表头区域和数值区域正式组织数据内容。

　　既然是一张表格，那么还是要按照先行后列的网格方式组织内容。而Tr()部件的作用就是作为行容器，其内部嵌套的子元素则是表格中每个单元格位置上的元素。

　　其中在Thead()嵌套的Tr()内部，需要使用Th()来设置每列的字段名称，而在Tbody()嵌套的Tr()内部，Td()与Th()都可以用来设置每个单元格的数值内容，只不过Th()在表现单元格数值时有加粗效果：

app2.py

import dash import dash_html_components as html import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( dbc.Table( [ html.Thead( html.Tr( [ html.Th('字段1'), html.Th('字段2') ] ) ), html.Tbody( [ html.Tr( [ html.Th('1'), html.Td('test') ] ), html.Tr( [ html.Th('2'), html.Td('test') ] ), html.Tr( [ html.Td('3'), html.Td('test') ] ) ] ) ], striped=True ), style={ 'margin-top': '50px' # 设置顶部留白区域高度 } ) ) if __name__ == '__main__': app.run_server(debug=True)

图5

　　而Th()与Td()均有额外参数colSpan与rowSpan，可以传入整数，来实现横向或纵向合并单元格的效果，譬如下面的例子：