Awesome Table在2016年大改版之後，提供了不少專業版型(What is a template for?)，讓我們更容易建立網頁上要呈現的各種類型資料表列，真的太好用了!
來吧，就開始跟著下列步驟，幾分鐘就能做出一個有專業水準的「師資列表介紹」。
首先，將TEMPLATE GALLERY展開:
準備套用People Directory這個版型:
點擊右上角的USE TEMPLATE按鈕，就會開始將該版型後端所需要的Google Sheet檔案建立到你自己的雲端硬碟裡面。
然後，我們就可以開始編輯自己的這個View，右上角標示了DATA SOURCE是你雲端硬碟裡的Google Sheet檔案(資料來自Data Sheet之範圍A1:M)，點擊之可開啟做編輯。
在還沒搞懂這個Data Sheet各欄各列意義前，先記得將其設定與他人共用可以檢視(Share your Google Sheet):
再回到Awesome Table編輯這個View的畫面，右邊的VIEW CONFIGURATION設定中的Layout預設是"Filters, chart"，這個意思是左邊看到的版面安排上面先呈現可以做篩選查詢的一些元件(稱為Filters)，下面才是呈現依據資料所顯示的列表內容(稱為Chart)。原則上，若要讓那些Filters放在下面，就在Layout改選成"Chart, filters"。而若是要讓整個Filters消失，要從Google Sheet裡面去做設定，這部份稍後再說明。
而這個人員列表介紹的Chart可看到有左右兩邊的設計，左半部是所有人員的列表(只列出照片及姓名)，而點選其中一筆就會在右半部呈現該人員的更多資料。這個設計其實都藏在Template Sheet裡面喔，先看下列框起來的Directory部分，對應的是Template Sheet的A2格裡面的HTML碼(Configuring the template sheet)。如果你對HTML不陌生，一看就大概能懂為什麼Directory部分每一筆都是呈現照片、名、姓這三個欄位內容。
再看下列框起來的About部分，對應的是Template Sheet的B2格裡面的HTML碼。
由於既有欄位還無法完全滿足我們要設計的「師資列表介紹」，所以我們在Data Sheet增加了Title(C欄)、Office(F欄)、Education(J欄)、Laboratory(K欄)、Teaching(M欄)。而這些新增欄的第二列(Second row : the data filters & parameters)都是設定為"Hidden" (Use the Hidden parameter to avoid displaying data from a column in your view)。另外，我們還將原本版面安排上面呈現篩選查詢的一些Filters，將對應的Last Name欄、Skills & Expertise欄的第二列也都改成設定為"Hidden"，讓整個篩選查詢的Filters都隱藏起來。
同時，我們也在Template Sheet調整了A2、B2格的HTML碼(Configuring the template sheet)，將新增的欄位也在指定的位置呈現出來。
注意，因為新增欄而讓原位於C欄的Directory後退到D欄、J欄的About後退到O欄，於是，我們再回到Awesome Table編輯這個View的畫面，右邊的ADVANCED PARAMETERS設定中的Query語法必須配合改為"Select D,O,A,B,C,E,F,G,J,K,L,M,N"才行，這裡
搞定上述步驟，以我們修改過的Google Sheet為後端資料來源所呈現的「師資列表介紹」就完成了，然後就將Awesome Table平台提供的Embed碼複製起來，嵌入自己網頁的HTML即可呈現(如此範例呈現於jsfiddle、jsbin)。注意，若你只是先嵌入自己電腦上的HTML檔而直接以Chrome開啟，將會因為新版Chrome對於安全控制而阻擋其程式的正確執行，但若使用Firefox開啟自己電腦上的HTML檔則能看到正確執行。
