如何將Excel表格放在網頁上
大家是否有需要將Excel表格放在網頁上的需求呢？雖然對於我這種高中時網際網路才開始普及的七年級生來說，第一個想法是用HTML畫表格（然後當場崩潰），但其實，直接在Excel中選取要呈現的表格，再貼到HTML編輯器就可以了。雖然如此，在實務工作上，這麼簡單的操作卻碰到不可思議的障礙，於是把我的經驗和解決方法分享給大家。
首先，你可能會問，網頁就該有網頁的呈現方式，為什麼要把Excel表格原封不動地放到網頁上呢？我任職的單位有大型會議需求，需要將會議日程以表格方式呈現，單用文字不是不行，只是難以呈現同時段在不同會議室召開平行會議等狀況。
Excel表格轉成圖片
最簡單的做法，是將表格轉成圖片，然後直接貼到網頁上，但缺點是無法搜尋內文。考量到與會者也許會想要直接搜尋人名或標題，圖片實在不適合。但轉成圖片的方法也意外簡單：在Excel中選取要轉成圖片的儲存格，再貼到小畫家存檔即可，可存成jpg、png等常見圖片格式，相當方便，不需要fancy的影像處理軟體。
Excel表格轉成PDF檔並嵌入網頁
另一個做法是將Excel檔轉成PDF檔，再嵌到網頁中。好處是既可以搜尋內文，PDF畫面也能按使用者需求放大縮小，更可以直接下載。轉成PDF檔時，使用Excel 檔案 > 匯出 > 建立Adobe PDF，在跳出對話框中設定需匯出的工作表、以及轉換選項即可（建議選擇「符合紙張寬度」，內容才會佔滿畫面，否則不是超出邊界、就是留下白邊）。
嵌入網頁時，則可使用HTML embed語法（「sample.pdf」需換成實際檔案路徑及檔名）：
<embed src="sample.pdf" type="application/pdf" width="100%" height="600px">
網頁上呈現效果如下：
我其實最喜歡這個呈現方式，使用者可以自行調整成習慣的閱讀方式，也可以直接下載或列印。但是同事看了覺得字很小（放大鍵表示：？？？）要求再改。
這時我腦中絕望的警鈴響起：看來只剩下照著Excel檔，重新用HTML編寫表格一條路了。不是辦不到，但用HTML寫表格本身就不是很直覺的作業，加上表格中多的是合併儲存格、不同背景色等狀況，怕麻煩的我當場就想下班了。
Excel檔轉成HTML
我的垂死掙扎是試圖將Excel表格直接轉成HTML碼。試了幾個線上轉換工具後才發現，其實最簡單的辦法是在Excel中另存新檔 > 存檔類型 > 網頁。要注意的是：
- 存檔類型要選「網頁」，不是「單一網頁檔案」。前者會輸出htm檔，後者是mht檔。
- 要先在編輯畫面選取要輸出的範圍，在另存成網頁檔時，選擇「選取區」再儲存（如下圖），輸出的網頁才會是只有選取範圍的畫面。如果選擇「整本活頁簿」，即使活頁簿僅有一個工作表，輸出的網頁下方也會出現該工作表的標題，這不是我們要的。
輸出後，就會成功得到完整保留原本Excel格式及排版的網頁檔案。下班！
等等。
把這個網頁內容複製貼到網站後台後，字體變大、可以搜尋文字、也可以列印的網頁獲得同事一致好評。
但是。用手機開啟網頁時，卻發現表格畫面超出螢幕邊界，而且無法移動、也無法縮小。
無法使用橫向捲軸
原來我任職單位的網站後台，有鎖住橫向捲軸的設定。這其實是現代網頁設計的趨勢，為了避免造成排版亂掉、使用者體驗不良，只容許縱向捲軸，其實是好的設計。問題是我們的表格內容就是那麼多，如果轉成圖片，配合畫面縮小了，內容根本看不到，內嵌PDF檔被否決，放Excel轉成的網頁又超出邊界，而且完全沒辦法看到溢出的部分。
解決方法是用overflow-x:auto讓表格出現橫向捲軸，或將儲存格寬度設定成配合頁面寬度縮放。前者的話，很遺憾地，網站後台不支援CSS，更沒辦法直接把鎖住橫向捲軸的設定關掉。後者的話，要不就是進去Excel輸出的網頁原始碼中慢慢改，要不自己重畫表格。但就算我願意用HTML慢慢畫表格，也加入reponsive的設定，因為內容文字過多（範例中的Title 1, 2, 3，都是動輒兩三行的演講標題），在手機上呈現的也很可能是每一欄都拉成長條的表格，完全不適合閱讀。
使用iframe嵌入網頁
講半天，其實我就是不想重畫表格而已。為了避免無意義的勞動，我突然想起二十年前自己架網站時使用過的iframe。如果可以用內嵌另一個網頁的方式繞過主網站的設定...？iframe是個古老技術了，現在常被認為是過時、妨礙網站流量的做法[1]。但為了繞過限制重重的網站後台，只好硬著頭皮嘗試。
先將Excel輸出的網頁檔上傳到後台（或其他雲端），得到網址或後台內的路徑後，再於需呈現表格的網頁原始碼中輸入以下語法（「test.htm」需取代為完整網址或路徑）：
<iframe height="3000" src="test.htm" style="border:none;" title="Agenda" width="100%"></iframe>
用以上語法，即可在網頁上嵌入另一個網頁，俄羅斯娃娃的概念。由於沒有設邊框（style="border:none"），網頁使用者不會發現看的其實是兩個網頁。重點是：成功繞過了網站後台鎖住橫向捲軸的限制！在較小的螢幕上，被擋住的內容可以用滑動的方式看到。
以上，是非前端專業行政人員面對一個看似簡單、實則因為網站後台系統限制而困難重重，再盡量考慮使用者便利性後的問題解決流程。雖然不是最佳解（過程中無數次想自己架站算了的me），但對於一般非專業網管、需要在系統內快速找到解方的人來說，已經是盡全力的解法啦。
自架網站、或使用較為現代化的網站建置系統的話，應該都不會碰到這些問題。但如果跟我一樣，受制於工作單位使用的是較為老舊、連CSS都不支援的系統的話，希望這篇紀錄對你有幫助。
為什麼會看到廣告
留言0
查看全部
你可能也想看
EXCEL如何輸入現在的日期與時間EXCEL要如何輸入日期跟時間呢?如果單純用NOW函數的話，那麼資料一編輯時間馬上就會更新，如果要記錄當下時間又不會動態更新呢?
其實只要配合下拉式選單，就能輕鬆解決囉~
覺得分享有幫助到你在工作上提升效率，可以訂閱我的方格子或請我喝杯咖啡，也可以訂閱EXCEL設計新思維，可以看到更多增加效率的好方
2023-06-29
如何將Icepak的結果輸出到Excel由於Icepak是版權軟體，同時也不是屬於大家常用的軟體
提升結果的外部可讀性是一個蠻常見的要求
其中一個就是EE想要看“PCB板溫分布"，
面對這種要求，一般來說我們可能只能給他們一張溫度分布圖，
如果想要數字，得要告訴我們位置在哪裡，我們再量給他們
我的老天鵝，你要量50個點我怎麼辦
2022-10-21
【投資新手】如何計算自己的財務目標：教你使用EXCEL試算退休金！｜小人物講股
明明是周末還要回應老闆訊息？
同事自己闖的禍卻要我背鍋？
想選擇自己喜歡的工作卻因為薪水不夠只好放棄？
工作好厭世，我好想放假……
如果你跟我一樣，想透過投資理財脫離工作的地獄，就一定不要錯過今天的影片喔
2021-06-25
2020-12-24
如何將老闆變成你的”人脈“？（上）最近瘋狂的準備我跟S姊一起創辦的女性線上學院，由於我們的學院，是真的想仿造一個學校的感覺。所以真的花了非常多心力、時間、耗費自己畢生所累積的資源，去找業界最厲害、最專業的成功女性洽談。說服他們來與我們合作，當學員的導師講授自己在擅長領域的成功經驗。
當然我們吃了不少閉門羹，被拒絕的原因真的有百
2020-08-27
如何將熱情轉為事業的30天創業計畫！Day5：一個不可抗拒的想法根據，美國經濟期刊《American Economic Review: Insights》所刊登的一篇研究報告，指出成功的新創公司創辦人通常是中年創業，顛覆了外界的想像。
▲找出問題，比解決問題還重要 (圖/Pexels)
依一份由MIT史隆管理學院、華頓商學院、美國全國經濟研究所與美國普查局在20
2020-02-16
如何將熱情轉為事業的30天創業計畫！Day4：一艘不會出航的船在創立公司時，多了一個合夥人，可能成為有助益的夥伴，也可能成為絆腳石，所以，選擇合夥人這項任務，就相當重要了，來看看，選擇合夥人要注意那些呢?
▲別和合夥人談戀愛，抱持理性看待-謮謮稱祺(圖/Pexels)
慎選合夥人，避免船隻沉沒
根據，《富比士》雜誌報導，10個中有8個合夥關係在3年內失敗。遠高
2020-02-15
如何將熱情轉為事業的30天創業計畫！Day3：個人的準備很多人都心懷抱著創業的夢想，想實現時間自主的目標，但為什麼總是許多人，在半路就放棄了呢?成為一個創業家，心態是很重要的，而成功的秘訣有二個：準備和汗水。但光有一個擁有心態是不足以支撐的，還必須事先做好規劃，才能按著排程完成工作。
▲ 工欲善其事，必先利其器(圖/Pexels)
紀律是創業之本
在創
2020-02-14
如何將熱情轉為事業的30天創業計畫Day2:風暴中的沉著
在這個競爭的時代，追求一份安穩而讓我們退休的工作變少了，裁員以及無薪假更是時有所聞。這個時候，如果你把夢想建立在別人上覺得容易嗎?事實上，是一件困難的事，因為，現實會讓你覺得是可有可無的。
圖片來源:Pexels
所以，別把你的夢想寄予厚望給無關繄要的人，反之,別人寄予痛苦在你身上，倒是挺容易的。追
2020-02-14
如何將熱情轉為事業的30天創業計畫Day1:充滿熱情整裝出發創業者必一定要知道的30個觀念；讓你做好充備準備的30個作業；30天讓夢想起航!
圖片來源：flickr
在現在商學中，帶著熬情工作是常見的，但，帶著熱情工作是第一世界的奢侈品。而現在西方將熱情浪漫化了，「熱情」passion來自於拉丁文passio，而意義代表的是「受難」，有沒有覺得很奇怪，熱情不
2020-02-13