網頁排版編輯

HTML Table:儲存格合併實戰

掌握 rowspancolspan,建構複雜且精緻的數據表格與課表排版。

九宮格表格結構

<tr> 代表橫向的 (Row)
<td> 代表格內的 (Column/Data)
border-collapse 將表格邊框合併為單一線條
1 2 3
4 5 6
7 8 9

合併儲存格

rowspan="2" 將儲存格向合併兩列
colspan="2" 將儲存格向合併兩欄
1
colspan="2"
3
4 5 6
rowspan="2"
7 8

SECHSKIES 偶像養成課表:合併邏輯拆解

colspan="5" 早自習與午休:橫跨週一至週五,佔據 5 欄
rowspan="2" 週一專業編舞訓練、週五詞曲深度創作:連續兩節課,佔據 2 列
rowspan="3" 週三大型舞台編舞練習、週四綜藝節奏開發:佔據下午三節課,跨越 3 列
節數 週一 週二 週三 週四 週五
早自習
0750~0830
開機中
第一節
0840~0920
專業編舞訓練
金在德
美聲與聲樂進階
姜成勳
詞曲創作專題
殷志源
第二節
0930~1010
日文語法
李宰鎮
理財管理
高志溶
綜藝節奏開發
殷志源
機器人演技基礎
張水院
第三節
1030~1110
詞曲創作
殷志源
爵士鼓實作
殷志源
舞台走位開發
金在德
跨界演技實務
張水院
詞曲深度創作
殷志源
第四節
1120~1200
商務英文會話
殷志源
吉他彈唱練習
金在德
電玩策略思考
殷志源
高階英文口說
殷志源
午休時間
1200~1320
人物問答:1、2、3,叮!午餐撤走。
第五節
1330~1410
商業市場分析
高志溶
職人繪畫實習
李宰鎮
大型舞台編舞練習 綜藝節奏開發
殷志源
高強度重訓
李宰鎮
第六節
1420~1500
體能核心訓練
李宰鎮
進階舞蹈細節
金在德
第七節
1520~1600
情緒控制與演技進階
張水院
日文深度對話
李宰鎮