建築工具 工具。dev 意味著我在文件、給使用者的電子郵件、偶爾的普通登陸頁面中編寫了許多 HTML 表格。表格是沒有人喜歡用手寫的一點 HTML。十行五列是五十多個單元格標籤,所有這些標籤都必須以正確的順序打開和關閉,並且缺少一個 </td> 悄悄地打破整個佈局。我在電子表格中有一堆資料並想要標記,所以我在該網站中建立了一個生成器。這是它的指南。
TL;DR: 工具 HTML 表產生器 採用逗號或製表符分隔的資料並編寫完整、可存取的資料
<table>與<thead>,<tbody>,以及適當的頭單元格。第一行可以變成<th scope="col">還有第一欄<th scope="row">,所以螢幕閱讀器宣布正確的標題。新增標題、條紋行和邊框,並選擇基於類別的 CSS、電子郵件內聯樣式或純語意 HTML。每個單元格都會被轉義。它完全運行客戶端:不上傳、不註冊、離線工作。
什麼是 HTML 表產生器?
HTML 表產生器將資料行轉換為 HTML 標記,將它們呈現為瀏覽器中的表。您貼上逗號分隔或製表符分隔的值,選擇表的外觀,然後工具寫入完整的值 <table> 元素與 <thead>, <tbody>,以及其中的行和單元格。而不是手動輸入每個 <tr>, <th>, 和 <td> 數單元格以保持列對齊,您將資料貼上一次,然後複製備份標記,準備將其放入頁面、電子郵件範本或允許原始 HTML 的 Markdown 檔案中。
生成器獲得其位置的原因是表 HTML 冗長且重複,而重複是錯誤隱藏的地方。每個單元格都需要一個開啟和一個關閉標籤,標頭單元格與資料單元格不同,整個單元格必須保持矩形,否則瀏覽器會變得一團糟。對於小表之外的任何內容,手動執行此操作速度緩慢且容易出錯。該工具可以確定地執行此操作:您為其提供值,它會產生有效的、轉義的、正確嵌套的標記。
手寫表格經常跳過原始標記之上有一個輔助功能層,這是我最關心的部分。正確建構的表格使用 <th> 對於帶有 a 的標頭單元格 scope 屬性使得輔助技術可以宣布給定資料單元屬於哪個標頭,並且可以攜帶a <caption> 描述表中包含的內容。 WHATWG HTML Living Standard'表格資料部分闡明了這些元素,生成器為您應用它們,而不是留給您 <div> 網格看起來像一張桌子,但對螢幕閱讀器來說卻像噪音一樣。
為什麼不直接手寫表格呢?
對於二乘二的表格,手寫它比打開工具更快,你應該這樣做。生成器可以保留在實際上很痛苦的表格上:那些具有真實數據、多行和標題的表格。在這些方面,手寫有三種反覆出現的故障模式。
第一個是損壞的結構。錯過 50 個結束標籤和瀏覽器'錯誤恢復會做一些不可預測的事情,並且您會損失幾分鐘尋找啟動它的單元格。第二個是不一致的列。如果一行有四個單元格,其餘有五個單元格,則表格會變為彎曲,並且在標籤牆中發現短行確實很難。第三個是轉義:貼上包含 a 的資料 <,一個 &,或者是流浪漢 " 直接進入牢房,你要么打破了標記,要么打開了一個小注射孔。
生成器刪除了所有三個。它填充短行,因此每一行都有相同數量的單元格,並且表格保持矩形。它總是關閉它打開的內容。它 HTML 逃逸每個單元格值,因此 a < 成為 < 並以文字形式顯示,而不是以標籤形式讀取。你貼上的是你得到的,安全渲染的。
這是一張表中的決定。
| 情況 | 使用 | 為什麼 |
|---|---|---|
| 一張兩兩的小桌子 | 手寫 | 比打開任何東西都快 |
| 具有多行和標頭的真實資料 | HTML 表產生器 | 逃跑、築巢和對齊是牌桌破裂的地方 |
| 您想要一張 Markdown 表 | 降價表產生器 | 同樣的想法,GitHub 風格的 Markdown 輸出 |
| 您只想查看或檢查 CSV | CSV 檢視器 | 讀取資料而不產生標記 |
如何讓桌子變得無障礙?
這個問題將一個看起來恰到好處的表格與一個適合每個人的表格分開,因此它有自己的部分。有兩件事很重要:標題單元格和標題。
首先是標題單元格。在真實表中,標記行或列的單元格應該是 <th>,不 <td>,以及每一個 <th> 應該攜帶一個 scope 屬性表示它是否位於列首((scope="col") 或一行 (scope="row").螢幕閱讀器使用 scope 要在每個資料單元之前宣布相關標頭,因此聽眾會聽到並引用;角色:工程師並引用;而不是裸&引用;工程師&引用;沒有上下文。生成器's 第一行標頭選項發出 <th scope="col"> 對於頂行,第一個列標題選項發出 <th scope="row"> 對於每個正文行的前導單元格。 W3C'表上的 WAI 教學對於簡單的資料表正是推薦了這種模式。
標題是第二塊。 A <caption> 元素直接位於表格內部,為表格提供了一個標題,輔助技術可以讀出該標題,視力正常的用戶可以在網格上方看到該標題。無論如何,它相當於您在表格上方寫的句子。當您填寫標題欄位時,生成器會添加一個,並且它會像任何其他文字一樣逃脫它。在標題和範圍標題之間,輸出是螢幕閱讀器可以導航的表格,而不是它偶然發現的形狀。
造型模式有什麼不同?
該工具提供了三種提供樣式的方法,因為桌子的位置會改變工作原理。
類別模式將類別名稱新增至表中,並輸出 CSS 的匹配區塊,您可以將其放入樣式表中。這是網站的正確選擇:標記保持乾淨,樣式駐留在一個地方,並使用斑馬條紋等功能 tbody tr:nth-child(even),它只能從樣式表工作。相反,內聯模式將樣式直接寫入每個元素 style 屬性。這是更醜陋的標記,但這正是大多數客戶端剝離 HTML 電子郵件所需的 <style> 區塊和外部 CSS,因此每個元素都必須遵循樣式。無模式輸出簡單的語義 HTML,沒有類別,根本沒有樣式,這就是您想要的,當您擁有自己的設計系統並且只需要正確、可訪問的結構來掛起它時。
預設情況下,我使用類別模式,僅在貼上到電子郵件時才使用內聯模式,當我將表格放入已在全域樣式的網站時,我使用無模式。該工具可讓您在它們之間切換,而無需重新輸入數據,因此只需點擊幾下即可嘗試所有三個查看適合哪些內容。
如何使用產生器?
流程分為四個步驟。將逗號分隔或選項卡分隔的行貼到輸入框中;自動偵測分隔符,如果資料不明確,您可以覆蓋它。決定第一行是列標題,每行的第一列是行標題。新增標題,開啟條紋行、邊框或緊湊佈局,然後選擇基於類別的 CSS、內聯樣式或純 HTML。然後按一下產生並複製 HTML,以及類別模式下的匹配 CSS。
解析遵循 RFC 4180(CSV 的非正式標準),因此雙引號包覆的欄位可以包含分隔符,並且引用欄位內的雙引號將成為單引號。這意味著像這樣的單元格 "Doe, Jane" 留一個單元格而不是以逗號分割。由於所有內容都在瀏覽器中運行,因此您可以貼上包含客戶姓名、內部資料或伺服器上不需要的任何其他內容的數據,並且它永遠不會離開您的電腦。該客戶端模型與網站其他部分後面的模型相同,如中所述 資料隱私線上工具 指南。
這與其他工具有何契合?
HTML 表產生器位於一小組工具中,這些工具都取得結構化資料並交回清理標記。它最近的鄰居是 降價表產生器,它執行相同的工作,但輸出 GitHub 風格的自述文件和問題標記,而不是網頁的 HTML。當您產生的表格和#39;s 標記想要整理時,或者您有一堆手寫的表格 HTML 需要重新縮排 HTML 格式化程式 美化它。當您在 HTML 和 Markdown 文件之間移動時, HTML 到 Markdown 轉換器 處理往返,包括桌子。
連接的想法是,資料以一種形式存在,而您需要另一種形式,而確定性工具比人工編輯標籤更好地進行翻譯。如果您為網路構建,則 web 開發人員工具包 綜述顯示了它們如何組合在一起,以及 開發人員生產力工具 指南涵蓋了更廣泛的小型實用程序,每個實用程式每天多次節省幾分鐘。
編寫文檔的一個有效範例
讓我具體說一下。網站周圍的許多文件都是一組功能比較和參考表:哪個工具可以做什麼,哪個限制適用於哪裡,給定選項的含義。大多數資料都是在電子表格中開始的,因為電子表格很容易編輯和排序。將其發送到用於匯出到 Markdown(我的某些頁面不會渲染)或手動鍵入 HTML 表(對於二十行引用來說,這確實是一個痛苦的十分鐘)的頁面。
現在我直接從電子表格中複製這些列,它將選項卡分隔的值放在剪貼簿上,將它們貼到生成器中,然後讓它自動檢測選項卡分隔符號。我將第一行保留為標題,添加描述表格的標題,以類別模式開啟條紋行和邊框,然後複製 HTML 和 CSS。標記進入頁面,CSS 進入樣式表一次,之後每個表都會重複使用,整個過程只需不到一分鐘。標題單元格顯示為 <th scope="col">(,所以無需我考慮即可訪問該表,並且每個值都逃逸,因此包含 a 的行 < 在程式碼中,引用不會炸毀頁面。
我使用生成器而不是手寫這些表的原因並不是 HTML 很難,而是 HTML 很無聊,無聊的部分是我引入錯誤的地方。卸載標籤類型、轉義和工具的可訪問性屬性意味著表格在第一個貼上時是正確的,我將注意力集中在表格的內容上,而不是管道上。對於電子郵件,我會在內聯模式下重新產生相同的數據,因為時事通訊工具會刪除 <style> 塊和內聯版本在旅行中完好無損地倖存下來。
值得了解的限制是什麼?
一些誠實的邊緣。首先是該工具建構的 數據 表,具有標頭和值行的類型。它不是佈局工具,也不執行 colspan 或 rowspan,即您有時在複雜表中看到的合併單元格技巧。合併的單元格使表格更難讓螢幕閱讀器導航,對於絕大多數表格資料來說,您不需要它們。如果您確實需要跨越多個列的合併標頭,則需要對產生的標記進行手動編輯 HTML 格式化程式 之後會保持整潔。
第二個是生成器將您的資料讀取為文本,並且不試圖巧妙地了解類型。每個單元格中都會以文字形式發出一列數字,這完全適合顯示;它不會正確對齊數字或添加數千個分隔符,因為這些是屬於您的樣式和格式化決策。它保證的是您貼上的值是儲存格中的值,轉義且未更改。
第三個是分隔符號歧義。自動偵測的工作原理是找到在行中提供最一致的列計數的分隔符,並且對於乾淨的 CSV 和 TSV 是可靠的。如果您的資料確實不明確,例如某些行中包含未引用逗號的值,則偵測可能會猜錯,這就是為什麼分隔符號是手動覆蓋而不是固定決策。明確設定它並且解析是確定性的。
最後,在類別模式下產生的 CSS 是一個明智、中立的起點:淺色標題背景、薄邊框、舒適的填充。它應該被編輯。更改顏色以匹配您的品牌,調整填充,刪除條紋;它是普通的CSS,具有清晰的類別名稱,以及工具和#39;其工作是保存初稿,而不是決定最終的外觀。
常見問題
什麼是 HTML 表產生器? HTML 表產生器將資料行轉換為 HTML 標記,將它們呈現為表格。您貼上 CSV 或選項卡分隔的值,它會寫入完整的值 元素與 , ,還有單元格,因此您不必手動鍵入每個標籤。
如何將 CSV 轉換為 HTML 表? 將 CSV 貼到輸入框中,如果包含列名,則保留第一行作為標題,選擇樣式,然後按一下「產生」。該工具偵測分隔符號,建立表格,並為您提供 HTML,您可以直接複製到頁面中。
如何讓桌子變得無障礙? 使用標題單元格和標題。開啟第一行標題,使列標題變為 ,啟用行標籤的第一列標題,並新增描述表格的標題。然後螢幕閱讀器宣布每個單元格的正確標題。造型模式有什麼不同? 類別模式新增了類別名稱和一個單獨的 CSS 區塊,這最適合網站。內聯模式直接在每個元素上寫入樣式,這些元素會被貼上到電子郵件中。無模式輸出純語意 HTML,因此您可以套用自己的樣式表。
我的資料中的特殊字元是否被逃脫? 是的。每個單元格值都是 HTML 轉義的,因此像 < 這樣的字元;,>,&,和"被寫成實體並以文字顯示,而不是被解釋為標記。當資料包含尖括號或&符號時,這可以防止表格中斷。
它可以處理單元格內的逗號嗎? 是的。解析器遵循 RFC 4180,因此雙引號包住的欄位可以包含分隔符,並且引用欄位內的雙引號將成為單引號。引用的逗號保留為儲存格的一部分,而不是開始新的列。
我的數據是否上傳到任何地方？ 不。轉換完全在您的瀏覽器中使用裝置上的 JavaScript 進行。您的資料永遠不會上傳、記錄或存儲,並且一旦頁面加載,工具就會繼續工作,網路就會斷開連接。
HTML 表產生器免費嗎? 是的。它是完全免費的,沒有註冊,沒有浮水印,也沒有使用上限。根據個人或商業專案的需要產生盡可能多的 HTML 表格。
