如果這個工具幫到了你，可以請作者喝杯咖啡 ☕
視覺化拖拽產生HTML表格程式碼，支援合併單元格和樣式設定，一鍵複製程式碼。
支援 {row} 和 {col} 佔位符。
支援 1 到 20 行/列，超出範圍會自動修正。
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 |
|---|---|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 | Row 1 Cell 4 | Row 1 Cell 5 |
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 | Row 2 Cell 4 | Row 2 Cell 5 |
| Row 3 Cell 1 | Row 3 Cell 2 | Row 3 Cell 3 | Row 3 Cell 4 | Row 3 Cell 5 |
| Row 4 Cell 1 | Row 4 Cell 2 | Row 4 Cell 3 | Row 4 Cell 4 | Row 4 Cell 5 |
| Row 5 Cell 1 | Row 5 Cell 2 | Row 5 Cell 3 | Row 5 Cell 4 | Row 5 Cell 5 |
| Row 6 Cell 1 | Row 6 Cell 2 | Row 6 Cell 3 | Row 6 Cell 4 | Row 6 Cell 5 |
我們這個工具解決的是“想用表格展示內容，但不想寫HTML程式碼”的問題。下面幾個場景裡，它特別順手：
如果你開啟我們的HTML表格產生器，會看到左側是畫布，右側是程式碼預覽區。整個操作圍繞“行列—內容—樣式—程式碼”四步走：
如果你不小心改了行列，工具欄裡還有“撤銷”按鈕，“清空表格”可以一鍵重置。
我們一起來做個最常見的小任務：產生一張星期課程表，放在個人網頁裡。假設課程表是5行6列，第一行為星期標題，第一列為時間段。
操作步驟：
時間/星期
8:00-9:30
高等數學
大學英語
體育
計算機基礎
自習
...(後續行類似)
點選“複製程式碼”，這段程式碼就可以直接貼上到你的HTML檔案中，瀏覽器開啟就能看到一張帶背景色的課程表。
程式碼預覽區產生的HTML程式碼符合標準規範，可以直接在任何現代瀏覽器中顯示。你可以關注幾個關鍵點來判斷表格是否達到了預期：
border="1"或style="border:1px solid ..."，說明表格會有邊框；如果沒有邊框，檢查一下你是不是忘了在工具欄裡設定邊框粗細。colspan="數字"或rowspan="數字"，數字越大表示合併的列數或行數越多。如果發現合併後的單元格錯位，多半是合併時選錯了行列，可以回到畫布裡重新合併。<table>片段，不包含<html>、<body>等標籤。你需要把它放到一個已有的HTML頁面的<body>內部，否則瀏覽器無法渲染。width:100%），可以自適應父容器寬度，但如果你固定了表格的畫素寬度，複製到不同寬度的頁面時可能會撐破布局，需要手動調整。<td>或<th>手動新增width屬性。Q：怎麼新增或刪除行/列？
在工具欄的“行數”“列數”輸入框裡修改數字，然後點選“產生表格”，會重新產生表格，但已有內容會丟失。如果想保留部分內容，建議先複製程式碼，再在新表格裡貼上資料。
Q：合併後的單元格怎麼拆開？
選中已合併的單元格，點選“拆分單元格”按鈕（如果工具欄有）即可恢復。如果沒有拆分按鈕，可以清空表格重新產生，或者複製程式碼後手動刪除colspan/rowspan屬性。
Q：產生的程式碼能直接用到Word裡嗎？
Word支援貼上HTML格式，但樣式可能會丟失。建議用線上表格產生器產生程式碼後，貼上到網頁中檢視，再截圖或匯出為PDF用於Word文件，或者直接複製畫布裡的表格視覺效果截圖。
Q：表格在手機上看會變形嗎？
產生的表格預設寬度100%，會跟隨螢幕寬度縮放，但如果列數太多、內容太長，在小屏上可能需要橫向滾動。你可以給表格外層新增一個overflow-x:auto的容器，程式碼裡沒有自帶，需要手動包裹。
現在你可以在上方的表格產生器裡動手試試，拖拽出自己需要的行列，填入資料，一鍵複製程式碼，就能把漂亮的表格放進任何網頁裡。