繼續做動態周報三屏，因為同一個表格中的欄位寬度由上到下會自動相同，不方便排版，於是分割表格。午餐前上傳目前的進度。
餐廳：鱷魚吐司
我點了G鱷遊戲 $85，內容物有吐司、嫩煎雞胸肉、厚蛋、起司片、高麗菜絲、兩種美乃滋，還有套餐升級 $75，內容物有芋泥球、高山四季春茶去冰，合計 $160。
繼續做動態周報三屏。
終於想通用表格排版和用區塊排版的差異了。用 div 排版的話，margin, width, height, padding 都是由外往內，用 table 則是由內往外。有夠麻煩。
導師傳來訊息＂先幫我切這一個客戶的急件＂，給我新的任務。他提供 figma 設計稿的連結、開發中網頁的連結、可參考的網頁的連結，並且說因為可參考的網頁上的表格上方和左邊都有額外的欄位，所以他是用 ul, li 做成。
客戶的網站上有一個介紹聽損基因的表格，目前是圖片，客戶說想要替換成真正的表格，就是用 HTML 和 CSS 寫成的表格。我的任務是做好表格之後給他接手修改，他的期限是星期一下班前。
他有說圖片或表格可以設定最大寬度，加上 CSS 設定 overflow: auto 就可以在螢幕寬度縮小時讓圖片或表格可以用左右滑動的方式檢視。
完成動態周報三屏，上傳、傳訊息通知導師。
我一開始也是用 ul, li，後來覺得表格還是應該用 table 製作，於是調整 HTML 結構。
CSS 部分，思考選取器該用類別還是偽類，因為：
最後選擇在整個表格上寫一個類別，在這個類別中寫一堆偽類。
合計大概花了一小時在複製色碼、收集文字設定、檢查尺寸和間距、新增變數。
在 Figma 設計稿中發現表格第一列的文字周圍有深色的部分，放大到 800% 發現有這種文字陰影：
1linktext-shadow: 2px 1px dark-red;
合計大概花了兩小時修改變數、偽類用好用滿。下班前大致完成。
給導師檢查進度，他說看起來滿不錯的，並要我把存放網頁和樣式表的資料夾整個壓縮傳給他。傳送檔案後收到他的訊息＂感謝救援＂，我回答＂希望能幫上忙，不過左下角的兩個格子還沒垂直置中＂，他回傳＂我再看調的結果如何，禮拜四給你feedback＂，我回覆收到。
離開公司走向捷運站的路上想起，左下角的兩個格子的 HTML 長這樣：
1link<td><p>文字</p></td>
用了這個 CSS 設定：
1linkvertical-align: center;
2link
3link/* 後來發現寫錯了改成 */
4linkvertical-align: middle;
還是無法讓文字完全置中。可以把 HTML 結構改成：
1link<td><p><span>文字</span></p></td>
用有支援 Emmet 的程式碼編輯器，用 CSS 選取 p { }，在大括號中依序按下這些按鍵：（↵ 就是 Enter 鍵）
df↵↵jcc↵↵aic↵
就能使用絕對置中魔法：
1linkp {
2link display: flex;
3link justify-content: center;
4link align-items: center;
5link}
在捷運上想起表格右上方還有一個長條標示，因時間有限沒有製作。還想起忘記用框線合併的設定：
1linktable { border-collapse: collapse; }
以及統一字重，我目前設定在 body，其實應該放在表格的類別中：
1link.table { font-weight: 400; }
最後想到 CSS 選取器與屬性的排列順序，依照 HTML 元素順序排列，或者 CSS 屬性種類排列，我兩種都寫過，目前看起來各有各的好處。
希望我做的基因表格給導師接手會是幫上忙而非幫倒忙。