iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
2
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 24

【Day 24】成為網頁設計師後,我再也不畫表格了! - Word to HTML 線上工具

  • 分享至 

  • xImage
  •  

不知道各位網頁設計師,在製作設計稿的時候,有沒有遇過需要設計的表格內容超級多!
類似部門人員介紹或人事績效考核的超長表格XD

人事行政主管绩效考核评分表
By 攝圖網 - 人事行政主管绩效考核评分表

大概類似以上圖片範例,要製圖的時候真的超級崩潰!(哭)
一般網頁設計公司的設計師,都需要做圖給工程師進行切版,筆者的公司因為沒有工程師可以配合,都是由設計師自己設計版面與切版。
對於表格的處理都是倒過來製作:先把客戶提供的表格轉為 HTML,再使用 css 進行表格樣式設計。

這樣的優點是比較省時,可以跳過設計稿直接進行切版,對於某些比較難以呈現的效果也可以直接套用(如:動畫背景、表格 hover 效果...等等)

本篇文章會分享,如何將客戶的 Word 轉換成 HTML Table 的方法!


Word to HTML

Word to HTML 的線上工具有很多選擇,這邊介紹三個筆者有使用過的:

  1. Convert Word DOC to HTML - 最常使用,本篇以此為範例
  2. WORDHTML
  3. Convert Word documents to Clean HTML

步驟一:將客戶提供的表格複製

打開客戶提供的 Word 表格,全部複製起來。

https://ithelp.ithome.com.tw/upload/images/20201010/20107810jAAQ4xXmSN.png
https://ithelp.ithome.com.tw/upload/images/20201010/20107810I9iK9UdGMG.png

Ctrl+C!

步驟二:將複製起來的表格貼到線上工具

本篇以 Convert Word DOC to HTML 為範例,請將剛剛複製起來的表格,Ctrl+V 貼到線上工具的框框內,並按下橘色的「Convert Word to HTML」。

https://ithelp.ithome.com.tw/upload/images/20201010/20107810NqYaTuG3Cg.png

登登!轉換成 HTML Table 了!

https://ithelp.ithome.com.tw/upload/images/20201010/20107810WXGcSdJIF0.png

步驟三:將程式碼貼到 VS Code 清掉多餘的 Code

表格轉出來的 HTML Table,會因為製作表格的軟體(如:Word、OpenOffice、Google 文件...等等)在程式碼上有些微的差距,有些程式碼會比較髒,就需要額外再清除掉多餘的 Code。

https://ithelp.ithome.com.tw/upload/images/20201010/20107810nAhmJ8zhSL.png

使用 VS Code 清掉多餘的 Code,並且格式化文件(排版)。

https://ithelp.ithome.com.tw/upload/images/20201010/20107810AciJl7N6ss.png

步驟四:將清乾淨的 HTML Table 貼到專案內 ➜ Codepen 連結

將程式碼清乾淨之後,就獲得了一個乾淨的 HTML Table
這時候就可以開始利用 html+css 為表格添加設計了!

https://ithelp.ithome.com.tw/upload/images/20201010/20107810zJCuZ8H2Mx.png

步驟五:為表格加上 css 樣式 ➜ Codepen 連結

利用 html 和 css 為表格添加設計,區分表頭與內容區塊:

https://ithelp.ithome.com.tw/upload/images/20201010/20107810HMReVhv2vJ.png

HTML 程式碼如下:

<div class="table-outbox">
  <table>
    <thead>
      <tr>
        <th>標題</th>
        <th>內容</th>
        <th>備註</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>title-1</td>
        <td>content-1</td>
        <td>remark-1</td>
      </tr>

      <tr>
        <td>title-2</td>
        <td>content-2</td>
        <td>remark-2</td>
      </tr>

      <tr>
        <td>title-3</td>
        <td>content-3</td>
        <td>remark-3</td>
      </tr>

    </tbody>
  </table>
</div>

CSS 程式碼如下:

/*  table-outbox
------------------------------------- */
.table-outbox {
  margin: 50px; /* 添加外距 */
  box-shadow: 0px 35px 50px rgba(27, 31, 49, 0.1); /* 添加表格陰影 */
}

/*  table
------------------------------------- */
table {
  border-collapse: collapse; /* 表格邊框合併 */
  width: 100%; /* 寬度 100% */
  background-color: white; /* 背景白色 */
}

table thead th {
  color: #ffffff; /* 表頭文字白色 */
  background: #2f4961; /* 表頭背景白色 */
}

table td,
table th {
  text-align: center; /* 文字置中顯示 */
  padding: 10px; /* 添加內距 */
}

table td {
  border-right: 1px solid #f1f1f1; /* 表格 td 右邊框顏色 */
}

table tr:nth-child(even) {
  background: #f8f8f8; /* 表格偶數 tr 灰色背景 */
}


關於表格的一些 css 美化設定可以看這篇文章:css美化表格和表單樣式


上一篇
【Day 23】網頁設計師 / 開發人員愛用的 JavaScript 圖表分享 - Chart.js
下一篇
【Day 25】HTML Table Responsive (RWD) 的幾種方法分享
系列文
從平面轉型成網頁設計的 UI/UX 設計師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言