html開發(fā)筆記17-從網(wǎng)頁中畫表格

、表格介紹

我們經(jīng)常從網(wǎng)頁上看見這種的表格，這個表格是如何畫出來的呢？

二、網(wǎng)頁上畫表格的原理

1、說明：表格是有行和列的，畫表格也不是一個標(biāo)簽，而是多個標(biāo)簽組合使用。

2、畫表格步驟：先看圖

代碼演示：

<body>
<!-- 1、使用 table 標(biāo)簽畫出表格的整體范圍-->
<!-- 5、在 table 的起始標(biāo)簽里添加 border 給表格畫線；"2" 代表表格外框的線粗細(xì)-->
<table border="2">
  <!--2、使用 tr 標(biāo)簽畫行-->
  <tr>
    <!-- 3、使用 td 標(biāo)簽畫單元格，就相當(dāng)于是 列-->
    <td>張三</td>
  </tr>
</table>
</body>

<body>
<table border="2">
  <tr>
    <td>張三</td>
  </tr>
  
  <tr> <!-- 如果需要多行，可以復(fù)制上面的 tr 包括 td 標(biāo)簽-->
    <td>張三</td>
    <td>李四</td>
    <td>王五</td>  <!--如果需要多個列，可以多復(fù)制幾個 td 標(biāo)簽-->
    <!-- 列的排序方式是：第一行的td標(biāo)簽為第1列，第二行的td為第2列，以此類推-->
  </tr>
</table>
</body>

三、表格位置說明

1. 前言

最近在用 Python 寫一個小工具，這個工具主要就是用來管理各種資源的信息，比如阿里云的 ECS 等信息，因?yàn)槲夜ぷ鞯碾娔X使用的是 LINUX，所以就想著用 python 寫一個命令行的管理工具，基本的功能就是同步阿里云的資源的信息到數(shù)據(jù)庫，然后可以使用命令行查詢。

因?yàn)樾畔⑹钦宫F(xiàn)在命令行中的，眾所周知，命令行展現(xiàn)復(fù)雜的文本看起來著實(shí)累人，于是就想著能像表格那樣展示，那看起來就舒服多了。

prettytable 庫就是這么一個工具，prettytable 可以打印出美觀的表格，并且對中文支持相當(dāng)好（如果有試圖自己實(shí)現(xiàn)打印表格，你就應(yīng)該知道處理中文是多么的麻煩）

# 2. 安裝

prettytable 并非 python 的內(nèi)置庫，通過 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','服務(wù)器01','172.16.0.1'])
table.add_row(['2','server02','服務(wù)器02','172.16.0.2'])
table.add_row(['3','server03','服務(wù)器03','172.16.0.3'])
table.add_row(['4','server04','服務(wù)器04','172.16.0.4'])
table.add_row(['5','server05','服務(wù)器05','172.16.0.5'])
table.add_row(['6','server06','服務(wù)器06','172.16.0.6'])
table.add_row(['7','server07','服務(wù)器07','172.16.0.7'])
table.add_row(['8','server08','服務(wù)器08','172.16.0.8'])
table.add_row(['9','server09','服務(wù)器09','172.16.0.9'])
print(table)

以上示例運(yùn)行結(jié)果如下：

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

在以上的示例中，我們通過form導(dǎo)入了表格庫。table實(shí)例化了一個表格庫，并且添加了['編號','云編號','名稱','IP地址']為表頭，如果沒有添加表頭，那么會以默認(rèn)的Field+編號顯示，例如：

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

所以為更直觀看出每一列的意義，還是要添加表頭的。

# 4. 添加數(shù)據(jù)

prettytable提供了多種的添加數(shù)據(jù)的方式，最常用的應(yīng)該就是按行按列添加數(shù)據(jù)了。

按行添加數(shù)據(jù) table.add_row

在上面簡單的示例中，我們就是按行添加數(shù)據(jù)的。

添加的數(shù)據(jù)必須要是列表的形式，而且數(shù)據(jù)的列表長度要和表頭的長度一樣。在實(shí)際的使用中，我們應(yīng)該要關(guān)注到添加的數(shù)據(jù)是否和表頭對應(yīng)，這一點(diǎn)很重要。

按列添加數(shù)據(jù) 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('項(xiàng)目', ['編號','云編號','名稱','IP地址'])
table.add_column('值', ['1','server01','服務(wù)器01','172.16.0.1'])
print(table)

運(yùn)行結(jié)果如下：

+-------+--------+------------+
| index | 項(xiàng)目 |    值     |
+-------+--------+------------+
|   1   |  編號  |     1      |
|   2   | 云編號 |  server01  |
|   3   |  名稱  |  服務(wù)器01   |
|   4   | IP地址 | 172.16.0.1 |
+-------+--------+------------+

以上示例中，我們通過add_column來按列添加數(shù)據(jù)，按列添加數(shù)據(jù)不需要在實(shí)例化表格的時候制定表頭，它的表頭是在添加列的時候指定的。

table.add_column('項(xiàng)目', ['編號','云編號','名稱','IP地址']) 這一行代碼為例，項(xiàng)目指定了這個列的表頭名為"項(xiàng)目"，['編號','云編號','名稱','IP地址']為列的值，同樣為列表。

從csv文件添加數(shù)據(jù)

PrettyTable不僅提供了手動按行按列添加數(shù)據(jù)，也支持直接從csv文件中讀取數(shù)據(jù)。

#!/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文件數(shù)據(jù)，必須要先導(dǎo)入from_csv，否則無法運(yùn)行。上面的示例運(yùn)行結(jié)果如下：

PS：csv 文件不能通過 xls 直接重命名得到，會報(bào)錯。如果是 xls 文件，請用另存為 csv 獲得 csv 文件

從sql查詢值添加

從數(shù)據(jù)庫查詢出來的數(shù)據(jù)可以直接導(dǎo)入到表格打印，下面的例子使用了sqlite3,如果使用的是mysql也是一樣的，只要能查詢到數(shù)據(jù)就能導(dǎo)入到表格中。

#!/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)

運(yùn)行結(jié)果如下：

+------+----------+----------+------------+
| 編號 |  云編號  |   名稱   |   IP地址   |
+------+----------+----------+------------+
|  1   | server01 | 服務(wù)器01 | 172.16.0.1 |
|  2   | server02 | 服務(wù)器02 | 172.16.0.2 |
|  3   | server03 | 服務(wù)器03 | 172.16.0.3 |
|  4   | server04 | 服務(wù)器04 | 172.16.0.4 |
|  5   | server05 | 服務(wù)器05 | 172.16.0.5 |
|  6   | server06 | 服務(wù)器06 | 172.16.0.6 |
|  7   | server07 | 服務(wù)器07 | 172.16.0.7 |
|  8   | server08 | 服務(wù)器08 | 172.16.0.8 |
|  9   | server09 | 服務(wù)器09 | 172.16.0.9 |
+------+----------+----------+------------+

從HTML導(dǎo)入數(shù)據(jù)

支持從html的表格中導(dǎo)入，請看下面這個例子：

#!/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>服務(wù)器01</td>
<td>172.16.0.1</td>
</tr>
<tr>
<td>2</td>
<td>server02</td>
<td>服務(wù)器02</td>
<td>172.16.0.2</td>
</tr>
</table>'''

table = from_html(html_string)

print(table[0])

運(yùn)行結(jié)果如下：

+------+----------+----------+------------+
| 編號 |  云編號  |   名稱   |   IP地址   |
+------+----------+----------+------------+
|  1   | server01 | 服務(wù)器01 | 172.16.0.1 |
|  2   | server02 | 服務(wù)器02 | 172.16.0.2 |
+------+----------+----------+------------+

如上示例中，我們可以導(dǎo)入html的表格，但是不一樣的地方是print語句，使用html表格導(dǎo)入數(shù)據(jù)的時候print的必須是列表中的第一個元素，否則有可能會報(bào)[<prettytable.PrettyTable object at 0x7fa87feba590>]這樣的錯誤。

這是因?yàn)?/span>table并不是PrettyTable對象，而是包含單個PrettyTable對象的列表，它通過解析html而來，所以無法直接打印table，而需要打印table[0]

# 5. 表格輸出格式

正如支持多種輸入一樣，表格的輸出也支持多種格式，我們在上面中的例子中已經(jīng)使用了print的方式輸出，這是一種常用的輸出方式。

print

直接通過print打印出表格。這種方式打印出的表格會帶邊框。

輸出HTML格式的表格

print(table.get_html_string())可以打印出html標(biāo)簽的表格。

在上面的例子中，使用print(table.get_html_string())會打印出如下結(jié)果：

<table>
    <tr>
        <th>編號</th>
        <th>云編號</th>
        <th>名稱</th>
        <th>IP地址</th>
    </tr>
    <tr>
        <td>1</td>
        <td>server01</td>
        <td>服務(wù)器01</td>
        <td>172.16.0.1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>server02</td>
        <td>服務(wù)器02</td>
        <td>172.16.0.2</td>
    </tr>
</table>

# 6. 選擇性輸出

prettytable在創(chuàng)建表格之后，你依然可以有選擇的輸出某些特定的行.

輸出指定的列

print table.get_string(fields=["編號", "IP地址"])可以輸出指定的列

輸出前兩行

通過print(table.get_string(start = 0, end = 2))的可以打印出指定的列，當(dāng)然start和end參數(shù)讓我可以自由控制顯示區(qū)間。當(dāng)然區(qū)間中包含start不包含end，是不是很熟悉這樣的用法？

根據(jù)輸出指定行列的功能，我們可以同時指定行和列來輸出，這里就不說明了。

將表格切片

從上面的輸出區(qū)間，我們做一個大膽的假設(shè)，既然區(qū)間包含start不包含end這種規(guī)則和切片的一樣，我們可以不可通過切片來生成一個新的表格然后將其打印。

事實(shí)上是可以的。

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

如上代碼段中，我們就可以打印出0到1行共2行的表格，python的切片功能異常強(qiáng)大，配合切片我們可以自由的輸入任意的行。

輸出排序

有時候我們需要對輸出的表格進(jìn)行排序，使用print table.get_string(sortby="編號", reversesort=True)就可以對表格進(jìn)行排序，其中reversesort指定了是否倒序排序,默認(rèn)為False，即默認(rèn)正序列排序。

sortby指定了排序的字段。

# 7. 表格的樣式

內(nèi)置樣式

通過set_style()可以設(shè)置表格樣式，prettytable內(nèi)置了多種的樣式個人覺得MSWORD_FRIENDLY，PLAIN_COLUMNS，DEFAULT 這三種樣式看起來比較清爽，在終端下顯示表格本來看起就很累，再加上一下花里胡哨的東西看起來就更累。

除了以上推薦的三種樣式以外，還有一種樣式不得不說，那就是RANDOM，這是一種隨機(jī)的樣式，每一次打印都會在內(nèi)置的樣式中隨機(jī)選擇一個，比較好玩。

具體內(nèi)置了幾種樣式，請各位參考官網(wǎng)完整自己嘗試輸出看看。

#!/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','服務(wù)器01','172.16.0.1'])
table.add_row(['3','server03','服務(wù)器03','172.16.0.3'])
table.add_row(['2','server02','服務(wù)器02','172.16.0.2'])
table.add_row(['9','server09','服務(wù)器09','172.16.0.9'])
table.add_row(['4','server04','服務(wù)器04','172.16.0.4'])
table.add_row(['5','server05','服務(wù)器05','172.16.0.5'])
table.add_row(['6','server06','服務(wù)器06','172.16.0.6'])
table.add_row(['8','server08','服務(wù)器08','172.16.0.8'])
table.add_row(['7','server07','服務(wù)器07','172.16.0.7'])
table.set_style(DEFAULT)

print(table)

自定義樣式

除了內(nèi)置的樣式以外，PrettyTable也提供了用戶自定義，例如對齊方式，數(shù)字輸出格式，邊框連接符等等

設(shè)置對齊方式

align提供了用戶設(shè)置對齊的方式，值有l，r，c方便代表左對齊，右對齊和居中如果不設(shè)置，默認(rèn)居中對齊。

控制邊框樣式

在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','服務(wù)器01','172.16.0.1'])
table.add_row(['3','server03','服務(wù)器03','172.16.0.3'])
table.add_row(['2','server02','服務(wù)器02','172.16.0.2'])
table.add_row(['9','server09','服務(wù)器09','172.16.0.9'])
table.add_row(['4','server04','服務(wù)器04','172.16.0.4'])
table.add_row(['5','server05','服務(wù)器05','172.16.0.5'])
table.add_row(['6','server06','服務(wù)器06','172.16.0.6'])
table.add_row(['8','server08','服務(wù)器08','172.16.0.8'])
table.add_row(['7','server07','服務(wù)器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`控制是否顯示邊框，默認(rèn)是`True

table.junction_char控制邊框連接符

table.horizontal_char控制橫邊框符號

table.vertical_char控制豎邊框符號

上例運(yùn)行如下：

$++++++$++++++++++$++++++++++$++++++++++++$
% 編號 %  云編號  %   名稱   %   IP地址   %
$++++++$++++++++++$++++++++++$++++++++++++$
%  1   % server01 % 服務(wù)器01 % 172.16.0.1 %
%  3   % server03 % 服務(wù)器03 % 172.16.0.3 %
%  2   % server02 % 服務(wù)器02 % 172.16.0.2 %
%  9   % server09 % 服務(wù)器09 % 172.16.0.9 %
%  4   % server04 % 服務(wù)器04 % 172.16.0.4 %
%  5   % server05 % 服務(wù)器05 % 172.16.0.5 %
%  6   % server06 % 服務(wù)器06 % 172.16.0.6 %
%  8   % server08 % 服務(wù)器08 % 172.16.0.8 %
%  7   % server07 % 服務(wù)器07 % 172.16.0.7 %
$++++++$++++++++++$++++++++++$++++++++++++$

本次分享就到這了，如果對您有幫助的話，麻煩點(diǎn)個關(guān)注再走哦~

天給小伙伴們分享一款功能超強(qiáng)大的Vue表格組件VxeTable。

vxe-table 基于vue2.x構(gòu)建的高效table表格組件，star高達(dá)2.5K+。支持行/列拖拽、排序篩選、虛擬滾動、懶加載、樹形結(jié)構(gòu)、xlsx導(dǎo)入導(dǎo)出、集成第三方庫等功能。

功能特性

模塊化表格、按需引入，減少項(xiàng)目大小；
虛擬滾動、懶加載，渲染性能大幅提升；
多種主題，多圖標(biāo)；
多種表格類型（基礎(chǔ)表格、復(fù)雜表格、樹形表格、編輯表格、高級表格、大數(shù)據(jù)表格）；
擴(kuò)展插件庫；

安裝

$ 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掛載全局窗口實(shí)例
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>

官網(wǎng)文檔提供了詳細(xì)的演示及API操作。

基礎(chǔ)表格

單元格工具提示+溢出省略號...

表格表頭分組

樹形表格

彈窗編輯表格

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

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

so good，非常實(shí)用的一款多功能表格解決方案，如果想要了解更多功能，可以自行去查閱文檔。

最后附上文檔及項(xiàng)目地址。

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

# 倉庫地址
https://github.com/x-extends/vxe-table

ok，就分享到這里。希望對大家有所幫助，歡迎一起交流分享技術(shù)知識！

在線咨詢

上一篇：3行css實(shí)現(xiàn)循環(huán)動畫，順便說說瀏覽器兼容性
下一篇：JavaScript代碼怎樣引入到HTML中？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html開發(fā)筆記17-從網(wǎng)頁中畫表格

、表格介紹

二、網(wǎng)頁上畫表格的原理

三、表格位置說明

1. 前言

# 2. 安裝

# 3. 示例

# 4. 添加數(shù)據(jù)

按行添加數(shù)據(jù) table.add_row

按列添加數(shù)據(jù) table.add_column()

從csv文件添加數(shù)據(jù)

從sql查詢值添加

從HTML導(dǎo)入數(shù)據(jù)

# 5. 表格輸出格式

print

輸出HTML格式的表格

# 6. 選擇性輸出

輸出指定的列

輸出前兩行

將表格切片

輸出排序

# 7. 表格的樣式

內(nèi)置樣式

自定義樣式

設(shè)置對齊方式

控制邊框樣式

功能特性

安裝

引入組件

快速使用

您的項(xiàng)目需求