用于代码注释的 HTML 表格到“图形文本”

Posted 2023-02-21

【中文标题】用于代码注释的 HTML 表格到“图形文本”

【英文标题】：HTML table to “graphical text” for code comments

【发布时间】：2011-02-20 09:13:36

【问题描述】：

有没有一种工具（最好是基于命令行的）可以帮助将源代码转换为 html 表格为“图形文本”（对于 HTML 表格来说可能是 ASCII art），以便在代码 cmets 中使用，如下所示？

例如，给定下面的 HTML 表格源

<TABLE BORDER=1>
  <CAPTION>A test table with merged cells</CAPTION>
  <TR><TH ROWSPAN=2><TH COLSPAN=2>Average
  <TH ROWSPAN=2>other<BR>category<TH>Misc
  <TR><TH>height<TH>weight
  <TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003
  <TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002
</TABLE>

该工具将输出如下内容以嵌入代码 cmets（如 /*…*/）：

/*
          A test table with merged cells
+----------+-------------------+----------+--------+ 
|          |      Average      |  other   |  Misc  |
|          +---------+---------+ category +--------|
|          |  height |  weight |          |        |
|----------+---------+---------+----------+--------|
| males    |   1.9   |  0.003  |          |        |
|----------+---------+---------+----------+--------|
| females  |   1.7   |  0.002  |          |        |
+----------+---------+---------+----------+--------+
*/

背景：从 HTML 表中读取值的一段代码可以用 cmets 进行注释，该 cmets 描述了复杂 HTML 表布局的基于文本的图形表示。稍后维护代码的人会发现它更容易理解，例如，一段代码如何对 HTML 表进行切片和切块或在某些单元格位置提取值。

【参考方案1】：

我不知道你说的是哪种语言，但我使用这个函数 (php)：

function text_table($data)

    $keys = array_keys(end($data));
    $size = array_map('strlen', $keys);

    foreach(array_map('array_values', $data) as $e)
        $size = array_map('max', $size,
            array_map('strlen', $e));

    foreach($size as $n) 
        $form[] = "%-$ns";
        $line[] = str_repeat('-', $n);
    

    $form = '| ' . implode(' | ', $form) . " |\n";
    $line = '+-' . implode('-+-', $line) . "-+\n";
    $rows = array(vsprintf($form, $keys));

    foreach($data as $e)
        $rows[] = vsprintf($form, $e);
    return $line . implode($line, $rows) . $line;

用法：

    echo "<pre>\n";
    echo text_table($array);
    echo "</pre>\n";

【参考方案2】：

  elinks -dump 1 

http://elinks.or.cz/documentation/manpages/elinks.1.html

【讨论】：

这很接近并且很容易使用，只是单元格没有被描绘出来，所以仍然需要做一些工作才能使它们成为可用于代码 cmets 的格式。我仍然投票赞成接近。

【参考方案3】：

HTML::TreeBuilder 加上 Text::ASCIITable 看起来他们只需要一点胶水就可以完成这项工作。

【讨论】：

这很接近了，除了你说的，需要胶水和包装随时可用。

【参考方案4】：

有一个工具可以做到这一点，用 python 编写：

见：https://github.com/gustavklopp/DashTable

仪表板

HTML 表到 ASCII 表，允许 colspan 和 Rowspan！

【参考方案5】：

还有另一个工具（YATG，Yet Another Table Generator）可以做到这一点，用 python 编写：

见：https://github.com/10gic/yatg

输出示例（emacs 样式）：

+---------+-----------------+----------+
|         | Average         | Red eyes |
|         +--------+--------+          |
|         | height | weight |          |
+---------+--------+--------+----------+
| Males   | 1.9    | 0.003  | 40%      |
+---------+--------+--------+----------+
| Females | 1.7    | 0.002  | 43%      |
+---------+--------+--------+----------+

输出示例（orgmode 风格）：

| Header content 1 | Header content 2 |
|------------------+------------------|
| Body content 1   | Body content 2   |
| Body content 3   | Body content 4   |
| Body content 5   | Body content 6   |

输出示例（mysql风格）：

+------------------+------------------+
| Header content 1 | Header content 2 |
+------------------+------------------+
| Body content 1   | Body content 2   |
| Body content 3   | Body content 4   |
| Body content 5   | Body content 6   |
+------------------+------------------+

输出示例（markdown 样式）：

| Header content 1 | Header content 2 |
|------------------|------------------|
| Body content 1   | Body content 2   |
| Body content 3   | Body content 4   |
| Body content 5   | Body content 6   |

【讨论】：

无论如何要填充框的背景颜色？

【参考方案6】：

我找到了一个在线工具：https://tableconvert.com/

点击导入标签 选择HTML标签 粘贴您的 HTML 数据 点击导入数据

结果：

|         | Average | othercategory | Misc |
|---------|---------|---------------|------|
| height  | weight  |
| males   | 1.9     | 0.003         |
| females | 1.7     | 0.002         |

不完美，但它有效:)

【参考方案7】：

Ref: Tool to convert CSV data to *** friendly text only table

强烈推荐一款在线工具：Convert CSV to ASCII Table

这是我最喜欢的表格格式转换工具，它可以将csv转换成不同友好的纯文本表格：

ASCII 表（mysql 风格）

+─────────────+─────────+───────────────────+
| 2012-05-02  | palani  | My first comment  |
+─────────────+─────────+───────────────────+
| 2012-05-02  | raja    | My second comment |
+─────────────+─────────+───────────────────+
| 2012-05-02  | palani  | My third comment  |
+─────────────+─────────+───────────────────+
| 2012-05-03  | raja    | My fourth comment |
+─────────────+─────────+───────────────────+

reStructuredText 网格表

+-------------+---------+-------------------+
| 2012-05-02  | palani  | My first comment  |
+=============+=========+===================+
| 2012-05-02  | raja    | My second comment |
+-------------+---------+-------------------+
| 2012-05-02  | palani  | My third comment  |
+-------------+---------+-------------------+
| 2012-05-03  | raja    | My fourth comment |
+-------------+---------+-------------------+

Unicode 表（单行）

┌─────────────┬─────────┬───────────────────┐
| 2012-05-02  | palani  | My first comment  |
├─────────────┼─────────┼───────────────────┤
| 2012-05-02  | raja    | My second comment |
| 2012-05-02  | palani  | My third comment  |
| 2012-05-03  | raja    | My fourth comment |
└─────────────┴─────────┴───────────────────┘

Unicode 表

╔═════════════╦═════════╦═══════════════════╗
║ 2012-05-02  ║ palani  ║ My first comment  ║
╠═════════════╬═════════╬═══════════════════╣
║ 2012-05-02  ║ raja    ║ My second comment ║
║ 2012-05-02  ║ palani  ║ My third comment  ║
║ 2012-05-03  ║ raja    ║ My fourth comment ║
╚═════════════╩═════════╩═══════════════════╝

还有一些其他格式的纯文本ASCII表。您也可以输入“强制分隔行”来决定是否清楚地表达标题！

很遗憾，它还不支持跨行和跨列。不知道能不能满足你的需求。