Tailwind 表格產生器
建立語意化響應式表格，支援標題、條紋、邊框、緊密列與固定表頭。
tailwind-table-generator本機處理
正在啟用本機工具…
Tailwind v4 工作台
預覽使用原生 CSS，不載入 Tailwind runtime。修改即在本機更新結果；文字與設定僅留於頁面記憶體。
上限：每文字區 16,000 UTF-8 bytes、1,000 classes、24 個版面項目、8 張卡片／陰影層、20 × 12 表格儲存格。不執行輸入 HTML、程式、URL 或命令。
轉換器採常見且明示的規則。保留 arbitrary 值與 modifier 字元；未知 tokens 標示未支援。實際 cascade、自訂主題及外掛須用 Tailwind 建置核對。
預覽與輸出
結果已在本機更新。套用至專案前請核對。
| 欄 1 | 欄 2 | 欄 3 |
|---|---|---|
| 1.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.3 |
| 3.1 | 3.2 | 3.3 |
| 4.1 | 4.2 | 4.3 |
| 5.1 | 5.2 | 5.3 |
Classes
預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。
w-full border-collapse text-sm
展開可選取的完整文字
w-full border-collapse text-sm
HTML
預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。
<div class="overflow-x-auto" tabindex="0" role="region" aria-label="範例資料表"><table class="w-full border-collapse text-sm"><caption class="p-3 text-left font-semibold">範例資料表</caption><thead class="bg-slate-100"><tr><th class="px-4 py-3 text-left border border-slate-300" scope="col">欄 1</th><th class="px-4 py-3 text-left border border-slate-300" scope="col">欄 2</th><th class="px-4 py-3 text-left border border-slate-300" scope="col">欄 3</th></tr></thead><tbody><tr class="even:bg-slate-50"><th class="px-4 py-3 text-left border border-slate-300" scope="row">1.1</th><td class="px-4 py-3 text-left border border-slate-300">1.2</td><td class="px-4 py-3 text-left border border-slate-300">1.3</td></tr><tr class="even:bg-slate-50"><th class="px-4 py-3 text-left border border-slate-300" scope="row">2.1</th><td class="px-4 py-3 text-left border border-slate-300">2.2</td><td class="px-4 py-3 text-left border border-slate-300">2.3</td></tr><tr class="even:bg-slate-50"><th class="px-4 py-3 text-left border border-slate-300" scope="row">3.1</th><td class="px-4 py-3 text-left border border-slate-300">3.2</td><td class="px-4 py-3 text-left border border-slate-300">3.3</td></tr><tr class="even:bg-slate-50"><th class="px-4 py-3 text-left border border-slate-300" scope="row">4.1</th><td class="px-4 py-3 text-left border border-slate-300">4.2</td><td class="px-4 py-3 text-left border border-slate-300">4.3</td></tr><tr class="even:bg-slate-50"><th class="px-4 py-3 text-left border border-slate-300" scope="row">5.1</th><td class="px-4 py-3 text-left border border-slate-300">5.2</td><td class="px-4 py-3 text-left border border-slate-300">5.3</td></tr></tbody></table></div>
展開可選取的完整文字
<div class="overflow-x-auto" tabindex="0" role="region" aria-label="範例資料表"><table class="w-full border-collapse text-sm"><caption class="p-3 text-left font-semibold">範例資料表</caption><thead class="bg-slate-100"><tr><th class="px-4 py-3 text-left border border-slate-300" scope="col">欄 1</th><th class="px-4 py-3 text-left border border-slate-300" scope="col">欄 2</th><th class="px-4 py-3 text-left border border-slate-300" scope="col">欄 3</th></tr></thead><tbody><tr class="even:bg-slate-50"><th class="px-4 py-3 text-left border border-slate-300" scope="row">1.1</th><td class="px-4 py-3 text-left border border-slate-300">1.2</td><td class="px-4 py-3 text-left border border-slate-300">1.3</td></tr><tr class="even:bg-slate-50"><th class="px-4 py-3 text-left border border-slate-300" scope="row">2.1</th><td class="px-4 py-3 text-left border border-slate-300">2.2</td><td class="px-4 py-3 text-left border border-slate-300">2.3</td></tr><tr class="even:bg-slate-50"><th class="px-4 py-3 text-left border border-slate-300" scope="row">3.1</th><td class="px-4 py-3 text-left border border-slate-300">3.2</td><td class="px-4 py-3 text-left border border-slate-300">3.3</td></tr><tr class="even:bg-slate-50"><th class="px-4 py-3 text-left border border-slate-300" scope="row">4.1</th><td class="px-4 py-3 text-left border border-slate-300">4.2</td><td class="px-4 py-3 text-left border border-slate-300">4.3</td></tr><tr class="even:bg-slate-50"><th class="px-4 py-3 text-left border border-slate-300" scope="row">5.1</th><td class="px-4 py-3 text-left border border-slate-300">5.2</td><td class="px-4 py-3 text-left border border-slate-300">5.3</td></tr></tbody></table></div>
如何使用這個工具
調整有標籤的控制項，即時更新原生 CSS 預覽，並複製或下載 Tailwind v4 輸出。範例與重設僅存於頁面記憶體。
不適合用在什麼情況
不載入 Tailwind runtime，也不是完整編譯器。轉換器支援明示常見子集，未知 utility 會列出。衝突與暗色建議須在實際建置專案核對。輸入上限 16,000 UTF-8 bytes、1,000 classes；不執行程式或輸入 HTML。