幾款開源的報(bào)表工具

. rdp報(bào)表

JavaWeb實(shí)現(xiàn)的報(bào)表工具，是唯一一款通過(guò)web頁(yè)面設(shè)計(jì)報(bào)表的工具，僅需簡(jiǎn)單拖拽式配置，即可制作出各種復(fù)雜、炫酷的報(bào)表，商用免費(fèi)的一款報(bào)表工具。

Web類Excel報(bào)表設(shè)計(jì)器，方便的B/S報(bào)表設(shè)計(jì)模式，具有強(qiáng)大的表達(dá)式和擴(kuò)展功能，可以輕松快捷、零編碼地實(shí)現(xiàn)各種復(fù)雜報(bào)表、

TML標(biāo)簽：

基本標(biāo)簽：

<html></html>雙標(biāo)簽開頭結(jié)尾 HTML標(biāo)簽為最大的標(biāo)簽稱為根標(biāo)簽

<head></head> 文檔頭部標(biāo)簽且必須設(shè)置title

<title></title> 頁(yè)面標(biāo)題

<body></body> 文檔的主體包含頁(yè)面的內(nèi)容

<h1>-<h6> HTML提供6個(gè)等級(jí)的頁(yè)面標(biāo)題有大到小

<p></p> p標(biāo)簽用于定義段落可以將頁(yè)面分為若干個(gè)段落根據(jù)窗口大小自動(dòng)換行

<br/>單標(biāo)簽換行標(biāo)簽（break打斷）

格式化標(biāo)簽：

加粗 <strong></strong>or<b></b>

斜線 <em></em>or<i></i>

刪除線 <del></del>or<s></s>

下劃線 <ins></ins>or<u></u>

div和span標(biāo)簽：

沒有語(yǔ)義屬于一種盒子來(lái)裝內(nèi)容

<div></div> 表示分割分區(qū) 用來(lái)布局一行一個(gè) 大盒子

<span></span>意為跨度，跨距一行可以哦有多個(gè) 小盒子

圖像標(biāo)簽：

<img src="圖像路徑(url)"/> 定義頁(yè)面中的圖像

圖像標(biāo)簽包含多個(gè)屬性

src 圖片路徑必須屬性

alt 文本替換文本圖像不能顯示的文字

title 文本鼠標(biāo)放到圖像上顯示文字

width 像素寬度

height 高度

border 邊框

相對(duì)路徑和絕對(duì)路徑

相對(duì)路徑：以引用文件所在位置為參考基礎(chǔ)，而建立出的目錄路徑

分類：下級(jí)路徑/ 上級(jí)路徑../

絕對(duì)路徑：是指目錄下的絕對(duì)位置，如硬盤中的路徑或網(wǎng)路地址

超鏈接標(biāo)簽：

<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>

href用于指定鏈接目標(biāo)的url地址(必須屬性)

target用于指定鏈接打卡方式 _self為默認(rèn)值 _blank為在新窗口打開方式

錨點(diǎn)鏈接：可以快速到頁(yè)面某個(gè)位置

在鏈接文本中的href屬性中，設(shè)置屬性值為#名字的形式，如<a href="#two">目標(biāo)</a>

找到目標(biāo)位置標(biāo)簽，里面添加一個(gè)id屬性 = 名字，如：<h3 id="two">目標(biāo)</h3>

注釋：

快捷鍵CTRL + /

特殊字符：

HTML 原代碼	顯示結(jié)果	描述
<	<	小于號(hào)或顯示標(biāo)記
>	>	大于號(hào)或顯示標(biāo)記
&	&	可用于顯示其它特殊字符
"	“	引號(hào)
?	?	已注冊(cè)
?	?	版權(quán)
?	?	商標(biāo)
		半個(gè)空白位
		一個(gè)空白位
		不斷行的空白

表格標(biāo)簽：

<table></table> 是用于定義表格的標(biāo)簽

<tr></tr> 標(biāo)簽用于定義表格中的行，必須嵌套在<table></table>標(biāo)簽中

<tb></tb> 用于定義表格的單元格，必須嵌套在<tr></tr>標(biāo)簽中

<td> 元素中的文本通常是普通的左對(duì)齊文本。字母td指表格數(shù)據(jù)(table data)，即數(shù)據(jù)單元格的內(nèi)容

表頭單元格標(biāo)簽：

<th>標(biāo)簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現(xiàn)為粗體并且居中。

表格屬性：

align left center right 規(guī)定表格相對(duì)于周圍元素的對(duì)齊方式
border 1or"" 規(guī)定表格單元是否擁有邊框默認(rèn)為"",表示沒有邊框

cellpadding 像素值規(guī)定單元邊沿與其內(nèi)容的空白，默認(rèn)1像素

cellspacing 像素值規(guī)定單元格直接的空白默認(rèn)2像素

with 像素值or百分比規(guī)定表格的寬度

合并單元表格方式：

跨行合并：rowspan="合并單元格的個(gè)數(shù)"

跨列合并：colspan="合并單元格的個(gè)數(shù)"

列表標(biāo)簽：

<ul>標(biāo)簽表示無(wú)序列表里面只能包含li

<ol>有序標(biāo)簽里面只能包含li

<li>相當(dāng)于一個(gè)容器定義列表項(xiàng) 與<ui>or<li>嵌套使用 li里面可以包含任何標(biāo)簽

<dl>標(biāo)簽用于定義描述列表(或自定義列表),該標(biāo)簽會(huì)與<dt>(定義項(xiàng)目和名字)和<dd>(描述每一個(gè)項(xiàng)目名字)一起使用

表單標(biāo)簽：

標(biāo)簽	描述
<form>	定義供用戶輸入的表單
<input>	定義輸入域
<textarea>	定義文本域 (一個(gè)多行的輸入控件)
<label>	定義了 <input> 元素的標(biāo)簽，一般為輸入標(biāo)題
<fieldset>	定義了一組相關(guān)的表單元素，并使用外框包含起來(lái)
<legend>	定義了 <fieldset> 元素的標(biāo)題
<select>	定義了下拉選項(xiàng)列表
<optgroup>	定義選項(xiàng)組
<option>	定義下拉列表中的選項(xiàng)
<button>	定義一個(gè)點(diǎn)擊按鈕
<datalist> New	指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表
<keygen> New	定義了表單的密鑰對(duì)生成器字段
<output> New	定義一個(gè)計(jì)算結(jié)果

<input>標(biāo)簽用于收集用戶信息包含一個(gè)type屬性可以有多種樣式

<input type="屬性值" />

屬性值：

button	定義可點(diǎn)擊按鈕（多數(shù)情況下，用于通過(guò) JavaScript 啟動(dòng)腳本）。
checkbox	定義復(fù)選框。
file	定義輸入字段和 "瀏覽"按鈕，供文件上傳。
hidden	定義隱藏的輸入字段。
image	定義圖像形式的提交按鈕。
password	定義密碼字段。該字段中的字符被掩碼。
radio	定義單選按鈕。
reset	定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)。
submit	定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。
text	定義單行的輸入字段，用戶可在其中輸入文本。默認(rèn)寬度為 20 個(gè)字符。

<label>標(biāo)簽

<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。 label是標(biāo)注的意思

label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過(guò)，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同

詳情可參考

https://www.runoob.com/ 菜鳥教程

https://www.w3school.com.cn/ w3c

眾號(hào)排版可以采用135編輯器、SVG代碼、或HTML代碼。今天的分享將介紹如何使用GPT進(jìn)行公眾號(hào)HTML代碼排版。

HTML是一種用于制作網(wǎng)頁(yè)的代碼，就像搭積木一樣，有顯示標(biāo)題、圖片、文字等不同的積木塊。我們把這些積木拼在一起，就形成了一個(gè)完整的網(wǎng)頁(yè)。

但僅有積木還不夠美觀，我們需要用CSS來(lái)裝飾。CSS像造型師，可以改變標(biāo)題的大小和顏色，讓圖片旋轉(zhuǎn)和平移，給文字加下劃線和邊框等。

簡(jiǎn)單來(lái)說(shuō)，HTML負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu)，CSS負(fù)責(zé)網(wǎng)頁(yè)的外觀。HTML是磚瓦木料，CSS是油漆壁紙，兩者配合才能構(gòu)建出漂亮實(shí)用的網(wǎng)頁(yè)。

編輯器里的HTML

以135編輯器為例，編輯器菜單欄有專門的HTML圖標(biāo)。

https://www.135editor.com/beautify_editor.html

在編輯器中，你可以選中不同樣式，切換HTML圖標(biāo)，即可看到不同樣式對(duì)應(yīng)的HTML代碼的差異。

設(shè)計(jì)案例

參考企業(yè)設(shè)計(jì)元素，設(shè)計(jì)公眾號(hào)排版樣式。

下圖是谷歌I/O大會(huì)的PPT截圖：

將截圖發(fā)給GPT，提示詞很簡(jiǎn)單：“參考圖片，幫我用HTML、CSS寫出來(lái)，我要用于公眾號(hào)排版。”（下文提問(wèn)也類似）

GPT很快就能幫你寫出HTML代碼，放到135編輯器里即可看到渲染效果。

下圖是GPT根據(jù)谷歌官方樣式設(shè)計(jì)的效果：

可以讓GPT多寫幾個(gè)卡片樣式，字體，顏色，大小都可以任意發(fā)揮，不過(guò)需要注意的是，微信公眾號(hào)里不能接受所有的CSS語(yǔ)言，比如我讓它設(shè)計(jì)了彩色漸變下劃線和分隔符，復(fù)制到微信公眾號(hào)編輯器里，就看不到效果了。

你可以參考所在企業(yè)的LOGO里的元素，設(shè)計(jì)專屬的樣式。

看到下圖，你是不是覺得很眼熟？是的，你的感覺沒錯(cuò)，我是截了蘋果的宣傳圖讓GPT生成的類似樣式。

GPT設(shè)計(jì)

蘋果官方

通過(guò)F12就可以檢查選中元素的設(shè)置了。

接著，我請(qǐng)GPT仿造蘋果官網(wǎng)產(chǎn)品卡片圖，幫我設(shè)計(jì)HTML。

蘋果官方

GPT設(shè)計(jì)

經(jīng)過(guò)進(jìn)一步調(diào)整，做出了如下效果：

批量生成樣式

下圖的的標(biāo)題是直接用的135編輯器里的樣式。

有讀者可能會(huì)疑問(wèn)，既然可以直接復(fù)制現(xiàn)成的樣式，為何還要讓GPT寫HTML？這是因?yàn)榭梢宰孏PT批量制作。例如，可以給GPT批量文案，讓它一一生成，而不需要手動(dòng)一個(gè)元素一個(gè)元素調(diào)整。我嘗試了GPTs，讓GPT批量生成，但目前GPT模型遵循指令還不是很完美，有時(shí)一一對(duì)話更好。

下圖放在小里是不是也可以？可以讓GPT批量生成不同顏色的或不同內(nèi)容。

PPT轉(zhuǎn)公眾號(hào)HTML

下圖很特別，我讓GPT先隨機(jī)生成一個(gè)PPT，然后將PPT轉(zhuǎn)公眾號(hào)HTML，里面的表格樣式也正確保留了下來(lái)，當(dāng)然PPT本身也可以轉(zhuǎn)成圖片，就是清晰度不高，文字無(wú)法復(fù)制。

下圖我讓GPT隨機(jī)調(diào)用了unsplash里的圖片，GPT很聰明，會(huì)根據(jù)主題不同調(diào)用不同的圖片。

如果你也想將PPT轉(zhuǎn)成公眾號(hào)文章，強(qiáng)烈推薦你試試讓GPT幫你排版，速度飛快。

MD、CSV轉(zhuǎn)公眾號(hào)HTML

我還試了將今天的行情總結(jié)成Markdown格式讓GPT設(shè)計(jì)排版。

做這些結(jié)構(gòu)固定的內(nèi)容，也可以讓GPT寫一個(gè)樣式模板，從資訊系統(tǒng)導(dǎo)出對(duì)應(yīng)表頭的CSV，將CSV轉(zhuǎn)成HTML，然后推送給用戶。

代碼分享

表格內(nèi)容和下面的代碼都可以按需更改。

這個(gè)代碼生成的樣式還比較簡(jiǎn)單，期待你自己探索。

分享一個(gè)小Tip，選擇135編輯器里的多種類型樣式，切換HTML，把HTML代碼復(fù)制給GPT，讓它幫你調(diào)整優(yōu)化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Article</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            color: #333;
            margin: 0;
            padding: 0;
            background-color: #eef2f5;
        }
        .container {
            max-width: 700px;
            margin: 20px auto;
            padding: 20px;
            background: linear-gradient(135deg, #d0e2ed 0%, #f0f3f4 100%);
            color: #333;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        .header {
            text-align: center;
            padding: 20px 0;
            background-color: #0070c9;
            color: #fff;
            border-radius: 10px 10px 0 0;
        }
        .header h1 {
            font-size: 2.5em;
            margin: 0;
        }
        h2, h3, h4 {
            color: #005bb5;
            margin-top: 20px;
        }
        p {
            font-size: 1.1em;
            line-height: 1.6;
            margin: 15px 0;
        }
        .highlight {
            color: #0070c9;
            font-weight: bold;
        }
        .image {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container" id="content">
        <div class="header">
            <h1>人工智能的未來(lái) </h1>
        </div>
    </div>
    <!-- 確保marked.js在其他腳本之前加載 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
    <script>
        async function fetchCsv() {
            const response = await fetch('ai_article_example.csv');
            const data = await response.text();
            return data;
        }

        function csvToJson(csv) {
            const lines = csv.split('\n');
            const result = [];
            const headers = lines[0].split(',');

            for (let i = 1; i < lines.length; i++) {
                const obj = {};
                const currentline = lines[i].split(',');

                for (let j = 0; j < headers.length; j++) {
                    obj[headers[j].trim()] = currentline[j] ? currentline[j].trim() : '';
                }
                result.push(obj);
            }
            return result;
        }

        function generateContent(data) {
            const contentDiv = document.getElementById('content');
            data.forEach(item => {
                const section = document.createElement('div');

                const h2 = document.createElement('h2');
                h2.textContent = item['一級(jí)標(biāo)題'];
                section.appendChild(h2);

                const h3 = document.createElement('h3');
                h3.textContent = item['二級(jí)標(biāo)題'];
                section.appendChild(h3);

                const h4 = document.createElement('h4');
                h4.textContent = item['三級(jí)標(biāo)題'];
                section.appendChild(h4);

                const img = document.createElement('img');
                img.src = item['圖片'];
                img.alt = item['三級(jí)標(biāo)題'];
                img.className = 'image';
                section.appendChild(img);

                const p = document.createElement('p');
                p.innerHTML = marked.parse(item['正文內(nèi)容']);
                section.appendChild(p);

                contentDiv.appendChild(section);
            });
        }

        async function main() {
            const csvData = await fetchCsv();
            console.log(csvData); // 檢查CSV數(shù)據(jù)是否正確獲取
            const jsonData = csvToJson(csvData);
            console.log(jsonData); // 檢查JSON數(shù)據(jù)是否正確解析
            generateContent(jsonData);
        }

        main();
    </script>
</body>
</html>

希望這篇指南對(duì)你有所幫助！

通過(guò)GPT生成的HTML代碼，你可以更快速地完成公眾號(hào)的排版工作，提升工作效率。

也期待你來(lái)分享公眾號(hào)排版技巧。

在線咨詢

上一篇：分享一些工作中的小工具網(wǎng)站
下一篇：「Shopify模板」Shopify模板編輯&Shopify模板代碼更改教程

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商