介紹在校務報告貼入表格的多種方式,包括截圖、內建表格及 Word 貼上,並說明表格過寬時的 HTML 修正方法。
校務系統・校務報告・表格
校務報告需要呈現表格時, 可以依內容與使用需求選擇「截圖貼上」、 「使用編輯器內建表格」或「直接從 Word 貼上」。 若 Word 表格在放大畫面後超出寬度, 也可以透過原始碼進一步修正。
最快速
截圖後直接貼上。
最穩定
使用系統內建表格。
最方便
直接從 Word 複製表格。
1 方法一:截圖後貼上
如果表格主要是提供同仁查看, 不需要後續修改內容, 使用截圖通常是最簡單的方式。
1
開啟 Word,
先讓需要的表格在螢幕上完整呈現。
2
同時按下鍵盤
Windows 鍵 + Shift + S。
3
畫面會稍微變暗,
滑鼠游標會進入截圖選取狀態。
4
按住滑鼠左鍵,
框選要截取的表格範圍。
5
放開滑鼠後,
截圖會自動複製到剪貼簿。
6
回到校務系統的「報告內容」編輯畫面,
按下 Ctrl + V,
即可直接貼上圖片。
優點:
不容易跑版,放大或縮小畫面時, 表格外觀也比較穩定。
不容易跑版,放大或縮小畫面時, 表格外觀也比較穩定。
2 方法二:使用校務系統內建表格
3 方法三:直接從 Word 貼上
4 Word 表格放大後超出畫面怎麼辦?
5 進入「原始程式碼」修改表格
1
在校務報告編輯器中,
點選「原始程式碼」。
2
找到以
<table class
開頭的表格標籤。
原本可能會看到類似:
<table class="MsoTableGrid" ...............>
將整個表格開頭標籤改成下面這一行:
<table class="MsoTableGrid" style="border-collapse: collapse; width: 100% !important; max-width: 100% !important; table-layout: fixed !important; overflow-wrap: anywhere; word-break: break-all;" border="1" cellspacing="0" cellpadding="0">
其中最重要的是
width:100%、
max-width:100%、
table-layout:fixed
及強制換行設定,
讓表格盡量限制在畫面寬度內。
6 刪除 <td> 裡面的固定欄寬
Word 貼上的表格, 常常會在每一個 <td> 儲存格裡面保留固定寬度。
例如可能看到:
<td style="width: 257.55pt; ...">
請把其中的:
width: 257.55pt;
刪除即可。 不同欄位的數值可能不一樣, 例如 100pt、180pt、257.55pt, 原則上就是移除 width: xxxpt; 這一段固定寬度。
找到 <td>
→
找到 width: xxxpt;
→
刪除固定寬度
→
儲存
修改完成後,
表格會比較容易依照瀏覽器寬度自動調整,
在放大文字或不同螢幕上顯示時也會比較穩定。
7 三種方式怎麼選?
A
只要看,不需要修改:
建議使用「截圖後貼上」, 最不容易跑版。
建議使用「截圖後貼上」, 最不容易跑版。
B
表格不複雜,而且希望能直接修改:
建議使用校務系統內建表格。
建議使用校務系統內建表格。
C
Word 已經做好完整表格:
可以直接複製貼上; 如果表格太寬, 再依本文方式修改原始碼。
可以直接複製貼上; 如果表格太寬, 再依本文方式修改原始碼。
⭐ 最簡單的判斷方式
只需要展示
→
用截圖
|
需要修改
→
用表格
|
Word 已做好
→
直接貼上