table去掉td的边框_21 表格Table教程（plotly Dash Bootstrap版）

今天第21课，本节课程主要学习Dash Bootstrap Components中的表格Table，继续欣赏音乐《First Sunlight》。祝大家周末愉快~~~ (一)功能

使用Table组件将Bootstrap样式的HTML表添加到您的应用中。

html表单中有两种类型的单元格，表头单元格和标准单元格，分别由以下元素创建：

表头单元格：包含表头信息，由

元素创建；

标准单元格：包含数据，由

元素创建；

 表格相关的重要标签：

标签：是table headercell 的缩写，定义表格内的表头单元格，

标签：是table row 的缩写，定义html表格中的行，tr元素包含一个或多个th或td元素；标签：是table data cell的缩写，定义 HTML 表格中的标准单元格。

html.Thead

html.Tbody

(二)调用方式       

table = dbc.Table(table_header + table_body)

(三)Table关键参数      

• responsive：响应式，值可设置为True或'sm'，'md'，'lg'，'xl'之一，以实现表格在水平或垂直方向滚动。

• bordered(布尔值，可选)：应用“ table-bordered”类，该类在表格和单元格的所有侧面添加边框。

• borderless：应用“ table-borderless”类，该类从表和单元格中删除所有边界。

• striped：应用“ table-striped”类，该类将“斑马条纹”应用于表主体中的行。

• dark：将“ table-dark”类应用于深色单元格背景和浅色文本；

• hover：应用`table-hover`类，该类在表主体内的表行上启用悬停状态。

(四)Table使用层层深入      

1. 基本使用方法

使用html.Thead，html.Tbody，html.Th，html.Tr和html.Td构建内容。

import dash_bootstrap_components as dbcimport dash_html_components as htmltable_header = [    html.Thead(html.Tr([html.Th("First Name"), html.Th("Last Name")]))]row1 = html.Tr([html.Td("Arthur"), html.Td("Dent")])row2 = html.Tr([html.Td("Ford"), html.Td("Prefect")])row3 = html.Tr([html.Td("Zaphod"), html.Td("Beeblebrox")])row4 = html.Tr([html.Td("Trillian"), html.Td("Astra")])table_body = [html.Tbody([row1, row2, row3, row4])]table = dbc.Table(table_header + table_body, bordered=True)

 2. 样式化表格

可通过许多可用的关键字参数来修改表格的样式，例如，深色dark，条纹striped，带边框bordered和悬停hover。

table = dbc.Table(    # using the same table as in the above example    table_header + table_body,    bordered=True,    dark=True,    hover=True,    responsive=True,    striped=True,)

3. 从DataFrame直接创建Table Table 组件具有from_dataframe方法，可轻松地从PandasDataFrame构造表 。

import dash_bootstrap_components as dbcimport pandas as pddf = pd.DataFrame(    {        "First Name": ["Arthur", "Ford", "Zaphod", "Trillian"],        "Last Name": ["Dent", "Prefect", "Beeblebrox", "Astra"],    })table = dbc.Table.from_dataframe(df, striped=True, bordered=True, hover=True)

(五)Table本课程完整代码       该部分视频教程的具体代码可看文末完整程序部分。

"""## 表格Tabel使用Table组件将Bootstrap样式的HTML表添加到您的应用中。html表单中有两种类型的单元格，表头单元格和标准单元格，分别由以下元素创建：表头单元格：包含表头信息，由