html开发笔记17-从网页中画表格

、表格介绍

我们经常从网页上看见这种的表格，这个表格是如何画出来的呢？

二、网页上画表格的原理

1、说明：表格是有行和列的，画表格也不是一个标签，而是多个标签组合使用。

2、画表格步骤：先看图

代码演示：

<body>
<!-- 1、使用 table 标签画出表格的整体范围-->
<!-- 5、在 table 的起始标签里添加 border 给表格画线；"2" 代表表格外框的线粗细-->
<table border="2">
  <!--2、使用 tr 标签画行-->
  <tr>
    <!-- 3、使用 td 标签画单元格，就相当于是 列-->
    <td>张三</td>
  </tr>
</table>
</body>

<body>
<table border="2">
  <tr>
    <td>张三</td>
  </tr>
  
  <tr> <!-- 如果需要多行，可以复制上面的 tr 包括 td 标签-->
    <td>张三</td>
    <td>李四</td>
    <td>王五</td>  <!--如果需要多个列，可以多复制几个 td 标签-->
    <!-- 列的排序方式是：第一行的td标签为第1列，第二行的td为第2列，以此类推-->
  </tr>
</table>
</body>

三、表格位置说明

1. 前言

最近在用 Python 写一个小工具，这个工具主要就是用来管理各种资源的信息，比如阿里云的 ECS 等信息，因为我工作的电脑使用的是 LINUX，所以就想着用 python 写一个命令行的管理工具，基本的功能就是同步阿里云的资源的信息到数据库，然后可以使用命令行查询。

因为信息是展现在命令行中的，众所周知，命令行展现复杂的文本看起来着实累人，于是就想着能像表格那样展示，那看起来就舒服多了。

prettytable 库就是这么一个工具，prettytable 可以打印出美观的表格，并且对中文支持相当好（如果有试图自己实现打印表格，你就应该知道处理中文是多么的麻烦）

# 2. 安装

prettytable 并非 python 的内置库，通过 pip install prettytable即可安装。

# 3. 示例

我们先来看一个示例：

#!/usr/bin/python
#**coding:utf-8**
import sys
from prettytable import PrettyTable
reload(sys)
sys.setdefaultencoding('utf8')

table = PrettyTable(['编号','云编号','名称','IP地址'])
table.add_row(['1','server01','服务器01','172.16.0.1'])
table.add_row(['2','server02','服务器02','172.16.0.2'])
table.add_row(['3','server03','服务器03','172.16.0.3'])
table.add_row(['4','server04','服务器04','172.16.0.4'])
table.add_row(['5','server05','服务器05','172.16.0.5'])
table.add_row(['6','server06','服务器06','172.16.0.6'])
table.add_row(['7','server07','服务器07','172.16.0.7'])
table.add_row(['8','server08','服务器08','172.16.0.8'])
table.add_row(['9','server09','服务器09','172.16.0.9'])
print(table)

以上示例运行结果如下：

linuxops@deepin:~$ python p.py
+------+----------+----------+------------+
| 编号 |  云编号  |   名称   |   IP地址   |
+------+----------+----------+------------+
|  1   | server01 | 服务器01 | 172.16.0.1 |
|  2   | server02 | 服务器02 | 172.16.0.2 |
|  3   | server03 | 服务器03 | 172.16.0.3 |
|  4   | server04 | 服务器04 | 172.16.0.4 |
|  5   | server05 | 服务器05 | 172.16.0.5 |
|  6   | server06 | 服务器06 | 172.16.0.6 |
|  7   | server07 | 服务器07 | 172.16.0.7 |
|  8   | server08 | 服务器08 | 172.16.0.8 |
|  9   | server09 | 服务器09 | 172.16.0.9 |
+------+----------+----------+------------+

在以上的示例中，我们通过form导入了表格库。table实例化了一个表格库，并且添加了['编号','云编号','名称','IP地址']为表头，如果没有添加表头，那么会以默认的Field+编号显示，例如：

+---------+----------+----------+------------+
| Field 1 | Field 2  | Field 3  |  Field 4   |
+---------+----------+----------+------------+

所以为更直观看出每一列的意义，还是要添加表头的。

# 4. 添加数据

prettytable提供了多种的添加数据的方式，最常用的应该就是按行按列添加数据了。

按行添加数据 table.add_row

在上面简单的示例中，我们就是按行添加数据的。

添加的数据必须要是列表的形式，而且数据的列表长度要和表头的长度一样。在实际的使用中，我们应该要关注到添加的数据是否和表头对应，这一点很重要。

按列添加数据 table.add_column()

看下面的示例：

#!/usr/bin/python
#**coding:utf-8**
import sys
from prettytable import PrettyTable
reload(sys)
sys.setdefaultencoding('utf8')

table = PrettyTable()
table.add_column('项目', ['编号','云编号','名称','IP地址'])
table.add_column('值', ['1','server01','服务器01','172.16.0.1'])
print(table)

运行结果如下：

+-------+--------+------------+
| index | 项目 |    值     |
+-------+--------+------------+
|   1   |  编号  |     1      |
|   2   | 云编号 |  server01  |
|   3   |  名称  |  服务器01   |
|   4   | IP地址 | 172.16.0.1 |
+-------+--------+------------+

以上示例中，我们通过add_column来按列添加数据，按列添加数据不需要在实例化表格的时候制定表头，它的表头是在添加列的时候指定的。

table.add_column('项目', ['编号','云编号','名称','IP地址']) 这一行代码为例，项目指定了这个列的表头名为"项目"，['编号','云编号','名称','IP地址']为列的值，同样为列表。

从csv文件添加数据

PrettyTable不仅提供了手动按行按列添加数据，也支持直接从csv文件中读取数据。

#!/usr/bin/python
#**coding:utf-8**
import sys
from prettytable import PrettyTable
from prettytable import from_csv
reload(sys)
sys.setdefaultencoding('utf8')

table = PrettyTable()
fp = open("res.csv", "r")
table = from_csv(fp)
print(table)
fp.close()

如果要读取cvs文件数据，必须要先导入from_csv，否则无法运行。上面的示例运行结果如下：

PS：csv 文件不能通过 xls 直接重命名得到，会报错。如果是 xls 文件，请用另存为 csv 获得 csv 文件

从sql查询值添加

从数据库查询出来的数据可以直接导入到表格打印，下面的例子使用了sqlite3,如果使用的是mysql也是一样的，只要能查询到数据就能导入到表格中。

#!/usr/bin/python
#**coding:utf-8**
import sys
from prettytable import PrettyTable
from prettytable import from_db_cursor
import sqlite3
reload(sys)
sys.setdefaultencoding('utf8')

conn = sqlite3.connect("/tmp/aliyun.db")
cur = conn.cursor()
cur.execute("SELECT * FROM res")
table = from_db_cursor(cur)
print(table)

运行结果如下：

+------+----------+----------+------------+
| 编号 |  云编号  |   名称   |   IP地址   |
+------+----------+----------+------------+
|  1   | server01 | 服务器01 | 172.16.0.1 |
|  2   | server02 | 服务器02 | 172.16.0.2 |
|  3   | server03 | 服务器03 | 172.16.0.3 |
|  4   | server04 | 服务器04 | 172.16.0.4 |
|  5   | server05 | 服务器05 | 172.16.0.5 |
|  6   | server06 | 服务器06 | 172.16.0.6 |
|  7   | server07 | 服务器07 | 172.16.0.7 |
|  8   | server08 | 服务器08 | 172.16.0.8 |
|  9   | server09 | 服务器09 | 172.16.0.9 |
+------+----------+----------+------------+

从HTML导入数据

支持从html的表格中导入，请看下面这个例子：

#!/usr/bin/python
#**coding:utf-8**
import sys
from prettytable import PrettyTable
from prettytable import from_html
reload(sys)
sys.setdefaultencoding('utf8')

html_string='''<table>
<tr>
<th>编号</th>
<th>云编号</th>
<th>名称</th>
<th>IP地址</th>
</tr>
<tr>
<td>1</td>
<td>server01</td>
<td>服务器01</td>
<td>172.16.0.1</td>
</tr>
<tr>
<td>2</td>
<td>server02</td>
<td>服务器02</td>
<td>172.16.0.2</td>
</tr>
</table>'''

table = from_html(html_string)

print(table[0])

运行结果如下：

+------+----------+----------+------------+
| 编号 |  云编号  |   名称   |   IP地址   |
+------+----------+----------+------------+
|  1   | server01 | 服务器01 | 172.16.0.1 |
|  2   | server02 | 服务器02 | 172.16.0.2 |
+------+----------+----------+------------+

如上示例中，我们可以导入html的表格，但是不一样的地方是print语句，使用html表格导入数据的时候print的必须是列表中的第一个元素，否则有可能会报[<prettytable.PrettyTable object at 0x7fa87feba590>]这样的错误。

这是因为table并不是PrettyTable对象，而是包含单个PrettyTable对象的列表，它通过解析html而来，所以无法直接打印table，而需要打印table[0]

# 5. 表格输出格式

正如支持多种输入一样，表格的输出也支持多种格式，我们在上面中的例子中已经使用了print的方式输出，这是一种常用的输出方式。

print

直接通过print打印出表格。这种方式打印出的表格会带边框。

输出HTML格式的表格

print(table.get_html_string())可以打印出html标签的表格。

在上面的例子中，使用print(table.get_html_string())会打印出如下结果：

<table>
    <tr>
        <th>编号</th>
        <th>云编号</th>
        <th>名称</th>
        <th>IP地址</th>
    </tr>
    <tr>
        <td>1</td>
        <td>server01</td>
        <td>服务器01</td>
        <td>172.16.0.1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>server02</td>
        <td>服务器02</td>
        <td>172.16.0.2</td>
    </tr>
</table>

# 6. 选择性输出

prettytable在创建表格之后，你依然可以有选择的输出某些特定的行.

输出指定的列

print table.get_string(fields=["编号", "IP地址"])可以输出指定的列

输出前两行

通过print(table.get_string(start = 0, end = 2))的可以打印出指定的列，当然start和end参数让我可以自由控制显示区间。当然区间中包含start不包含end，是不是很熟悉这样的用法？

根据输出指定行列的功能，我们可以同时指定行和列来输出，这里就不说明了。

将表格切片

从上面的输出区间，我们做一个大胆的假设，既然区间包含start不包含end这种规则和切片的一样，我们可以不可通过切片来生成一个新的表格然后将其打印。

事实上是可以的。

new_table = table[0:2]
print(new_table)

如上代码段中，我们就可以打印出0到1行共2行的表格，python的切片功能异常强大，配合切片我们可以自由的输入任意的行。

输出排序

有时候我们需要对输出的表格进行排序，使用print table.get_string(sortby="编号", reversesort=True)就可以对表格进行排序，其中reversesort指定了是否倒序排序,默认为False，即默认正序列排序。

sortby指定了排序的字段。

# 7. 表格的样式

内置样式

通过set_style()可以设置表格样式，prettytable内置了多种的样式个人觉得MSWORD_FRIENDLY，PLAIN_COLUMNS，DEFAULT 这三种样式看起来比较清爽，在终端下显示表格本来看起就很累，再加上一下花里胡哨的东西看起来就更累。

除了以上推荐的三种样式以外，还有一种样式不得不说，那就是RANDOM，这是一种随机的样式，每一次打印都会在内置的样式中随机选择一个，比较好玩。

具体内置了几种样式，请各位参考官网完整自己尝试输出看看。

#!/usr/bin/python
#**coding:utf-8**
import sys
from prettytable import PrettyTable
from prettytable import MSWORD_FRIENDLY
from prettytable import PLAIN_COLUMNS
from prettytable import RANDOM
from prettytable import DEFAULT

reload(sys)
sys.setdefaultencoding('utf8')

table = PrettyTable(['编号','云编号','名称','IP地址'])
table.add_row(['1','server01','服务器01','172.16.0.1'])
table.add_row(['3','server03','服务器03','172.16.0.3'])
table.add_row(['2','server02','服务器02','172.16.0.2'])
table.add_row(['9','server09','服务器09','172.16.0.9'])
table.add_row(['4','server04','服务器04','172.16.0.4'])
table.add_row(['5','server05','服务器05','172.16.0.5'])
table.add_row(['6','server06','服务器06','172.16.0.6'])
table.add_row(['8','server08','服务器08','172.16.0.8'])
table.add_row(['7','server07','服务器07','172.16.0.7'])
table.set_style(DEFAULT)

print(table)

自定义样式

除了内置的样式以外，PrettyTable也提供了用户自定义，例如对齐方式，数字输出格式，边框连接符等等

设置对齐方式

align提供了用户设置对齐的方式，值有l，r，c方便代表左对齐，右对齐和居中如果不设置，默认居中对齐。

控制边框样式

在PrettyTable中，边框由三个部分组成，横边框，竖边框，和边框连接符（横竖交叉的链接符号）

如下示例：

#!/usr/bin/python
#**coding:utf-8**
import sys
from prettytable import PrettyTable

reload(sys)
sys.setdefaultencoding('utf8')

table = PrettyTable(['编号','云编号','名称','IP地址'])
table.add_row(['1','server01','服务器01','172.16.0.1'])
table.add_row(['3','server03','服务器03','172.16.0.3'])
table.add_row(['2','server02','服务器02','172.16.0.2'])
table.add_row(['9','server09','服务器09','172.16.0.9'])
table.add_row(['4','server04','服务器04','172.16.0.4'])
table.add_row(['5','server05','服务器05','172.16.0.5'])
table.add_row(['6','server06','服务器06','172.16.0.6'])
table.add_row(['8','server08','服务器08','172.16.0.8'])
table.add_row(['7','server07','服务器07','172.16.0.7'])
table.align[1] = 'l'

table.border = True
table.junction_char='$'
table.horizontal_char = '+'
table.vertical_char = '%'

print(table)
table.border`控制是否显示边框，默认是`True

table.junction_char控制边框连接符

table.horizontal_char控制横边框符号

table.vertical_char控制竖边框符号

上例运行如下：

$++++++$++++++++++$++++++++++$++++++++++++$
% 编号 %  云编号  %   名称   %   IP地址   %
$++++++$++++++++++$++++++++++$++++++++++++$
%  1   % server01 % 服务器01 % 172.16.0.1 %
%  3   % server03 % 服务器03 % 172.16.0.3 %
%  2   % server02 % 服务器02 % 172.16.0.2 %
%  9   % server09 % 服务器09 % 172.16.0.9 %
%  4   % server04 % 服务器04 % 172.16.0.4 %
%  5   % server05 % 服务器05 % 172.16.0.5 %
%  6   % server06 % 服务器06 % 172.16.0.6 %
%  8   % server08 % 服务器08 % 172.16.0.8 %
%  7   % server07 % 服务器07 % 172.16.0.7 %
$++++++$++++++++++$++++++++++$++++++++++++$

本次分享就到这了，如果对您有帮助的话，麻烦点个关注再走哦~

天给小伙伴们分享一款功能超强大的Vue表格组件VxeTable。

vxe-table 基于vue2.x构建的高效table表格组件，star高达2.5K+。支持行/列拖拽、排序筛选、虚拟滚动、懒加载、树形结构、xlsx导入导出、集成第三方库等功能。

功能特性

模块化表格、按需引入，减少项目大小；
虚拟滚动、懒加载，渲染性能大幅提升；
多种主题，多图标；
多种表格类型（基础表格、复杂表格、树形表格、编辑表格、高级表格、大数据表格）；
扩展插件库；

安装

$ npm i xe-utils vxe-table -S

引入组件

import Vue from 'vue';
import 'xe-utils';
import VxeTable from 'vxe-table';
import 'vxe-table/lib/index.css';

Vue.use(VxeTable);

// 给vue挂载全局窗口实例
Vue.prototype.$modal = VxeTable.modal;

快速使用

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
      <vxe-table-column field="name" title="姓名"></vxe-table-column>
      <vxe-table-column field="sex" title="性别"></vxe-table-column>
      <vxe-table-column field="address" title="地址"></vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        { id: 20001, name: 'Field1', role: 'Develop', sex: 'Man', address: 'Beijing' },
        { id: 20002, name: 'Field2', role: 'Test', sex: 'Woman', address: 'Guangzhou' },
        { id: 20003, name: 'Field3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  }
}
</script>

官网文档提供了详细的演示及API操作。

基础表格

单元格工具提示+溢出省略号...

表格表头分组

树形表格

弹窗编辑表格

全屏表格（表格最大化/还原）

集成第三方库（element-ui、iview、antd）

so good，非常实用的一款多功能表格解决方案，如果想要了解更多功能，可以自行去查阅文档。

最后附上文档及项目地址。

# 文档地址
https://xuliangzhan_admin.gitee.io/vxe-table/

# 仓库地址
https://github.com/x-extends/vxe-table

ok，就分享到这里。希望对大家有所帮助，欢迎一起交流分享技术知识！

在线咨询

上一篇：3行css实现循环动画，顺便说说浏览器兼容性
下一篇：JavaScript代码怎样引入到HTML中？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html开发笔记17-从网页中画表格

、表格介绍

二、网页上画表格的原理

三、表格位置说明

1. 前言

# 2. 安装

# 3. 示例

# 4. 添加数据

按行添加数据 table.add_row

按列添加数据 table.add_column()

从csv文件添加数据

从sql查询值添加

从HTML导入数据

# 5. 表格输出格式

print

输出HTML格式的表格

# 6. 选择性输出

输出指定的列

输出前两行

将表格切片

输出排序

# 7. 表格的样式

内置样式

自定义样式

设置对齐方式

控制边框样式

功能特性

安装

引入组件

快速使用

您的项目需求