工具一:TABLEIZER!

可以將 Word 與 excel 快速將資料表格化直接轉成 html table 格式

Set01-將表格區塊貼入 TABLEIZER! 轉換區
先去選取 Word 與 excel 要轉換與處理的表格區塊,在將表格區塊貼入 TABLEIZER! 轉換區,按下TABLEIZER! it 按鈕後就可以自行轉換。
TABLEIZER! 換換區

Set02-TABLEIZER!_轉換後的html碼
TABLEIZER!_轉換後的html碼

Set03-TABLEIZER!_轉換後預視
TABLEIZER!_轉換後預視


工具二:html-cleaner.com

可針對 html 中的元素標籤內的行內樣式重置成 HTML table 單純架構,對於例如像來源檔中是直接使用視覺化編輯器直接處理的行內樣式,如果說是每個元素標籤都寫一個行內樣式的話,或是將特定的標籤要移除和處理的話,這工具可就大大方便了許多,只要透過指定的過濾功能就可以快速的移除不需要的部份,對於習慣直接編窵 HTML 的人在清除完後在使用自定的 class 就可以快速的調整定位。

此外,工具站內的也有視覺化編輯工具可以預視調修的成果,比對 html 與 JS 的純文字編輯器直接比對,站內是使用自適應RWD的網頁框架,如果是行動裝置要編輯的話也不是太大的問題。

處理功能選擇
html-cleaner_處理功能選擇

html-cleaner 調整前原碼,配合好功能選擇按下 clean HTML
html-cleaner_調整前原碼

html-cleaner_調整後
html-cleaner_調整後

指定尋找與取代內容
指定尋找與取代內容


使用前的原 html table 碼

See the Pen html-cleaner清除Table內樣式-未清前 by Jimmy_Wu (@Jimmy_Wu) on CodePen.


js bin展示開新視窗

使用後 html table 碼

See the Pen html-cleaner清除Table內樣式-清後 by Jimmy_Wu (@Jimmy_Wu) on CodePen.


js bin展示開新視窗


資料來源:
html-cleaner.com
TABLEIZER!