什麼是 HTML 表產生器?
HTML 表產生器將資料行轉換為 HTML 標記,將它們呈現為瀏覽器中的表。您貼上逗號分隔或製表符分隔的值,選擇表的外觀,然後工具編寫一個完整的<table> 元素,其中包含<thead>、<tbody> 以及表行和儲存格。您無需手動鍵入每個<tr>、<th> 和<td> 並計數儲存格以保持列對齊,而是貼上資料一次並複製準備放入網頁、電子郵件範本中的備份標記,或文件檔。
它的存在是因為手動編寫表格 HTML 是重複且容易出錯的。十行五列的表格需要五十多個單元格標籤,全部正確打開和關閉,並且一個缺少的</td>打破了佈局。輔助功能增加了更多細節:標題單元格應該是帶有作用域屬性的<th>,以便螢幕閱讀器宣布它們,並且表通常需要描述其內容的<caption>。此產生器為您應用這些規則。第一行可以成為正確的標題,每行的第一列可以成為行標題,並且每個單元格值都是 HTML 轉義的,因此 < 和 & 等字元顯示為文字而不是破壞頁面。
轉換運行客戶端。您貼上資料在您自己的裝置上以 JavaScript 進行解析和轉換,因此行永遠不會上傳;按「產生日誌」僅攜帶樣式模式的使用記錄,一旦頁面載入,工具就會繼續使用斷開連接的網路。您可以選擇樣式交付方式:具有匹配 CSS 區塊的現代類別名稱、粘貼到電子郵件中後仍然存在的獨立內聯樣式,或根本沒有樣式的簡單語義 HTML。條紋行、邊框、緊湊佈局和縮排的選項可讓您將輸出與貼上到的項目進行匹配。
這是表格 HTML 產生器的工作範例。貼上三行,`Plan, Price, Seats`, `Free, $0,1` and `Pro, "$1,200", 10`, type Pricing as the caption and press Generate。輸出是一個<table> with <caption>Pricing</caption>,三個<th scope= "col"> 標頭和兩個正文行,引用的"$1,200"保留一個單元格而不是按逗號分割。用作 HTML 電子郵件的表格生成器,將樣式切換到內聯樣式,並且每個單元格都有自己的填充和邊框,因此不需要樣式表。
如何使用 HTML 表產生器?
貼上您的資料
將逗號分隔或製表符分隔的行貼到輸入框中。分隔符號會自動偵測,如果資料不明確,您可以手動設定。
選擇標頭選項
決定第一行是否為列標題以及每行的第一列是否為行標題,以便螢幕閱讀器宣布正確的儲存格。
造型表
新增標題、開啟條紋行或邊框、選擇緊湊的佈局,然後選擇基於類別的 CSS、內聯樣式或純語義 HTML。
生成並複製
按一下「產生」以建立表格,然後將 HTML 以及 CSS 類別模式下的匹配 CSS 複製到您的專案中。您的行保留在您的裝置上。
主要特點
CSV 和 TSV 輸入
貼上逗號、製表符、分號或管道分隔的資料。自動偵測分隔符,並正確解析嵌入分隔符號的引用欄位。
可存取的標頭單元格
第一行可以變成<th scope="col">,第一列<th scope="row">,因此輔助技術為每個資料單元宣布標頭。
三種造型模式
使用匹配的 CSS 區塊、電子郵件的獨立內聯樣式或沒有樣式的簡單語義 HTML 發出類別名稱,具體取決於表落地的位置。
條紋行、邊框和標題
新增斑馬條紋、單元格邊框、緊湊佈局和 <caption> 元素,所有這些都一致地應用於表格的每一行。
Frequently Asked Questions
Related Tools
HTML Formatter
Format, beautify, and minify HTML online. Re-indents messy or minified markup, keeps script, style, and pre content verbatim, and runs entirely in your browser.
HTML to Markdown
Convert HTML to clean Markdown instantly. Turns headings, lists, links, images, blockquotes, code blocks and tables into portable GitHub Flavored Markdown. Tolerant of messy CMS markup. Runs client-side.
Markdown Table Generator
Build Markdown tables in a spreadsheet-style editor - import CSV, Excel, or an existing table, set alignment, copy clean GFM
Markdown TOC Generator
Generate a linked table of contents from Markdown headings
Comments
0 comments
No comments yet. Be the first to share your thoughts!