HTML表格生成器

使用視覺化編輯器建立HTML表格並立即複製程式碼。

行列標題行邊框條紋行內邊距

HTML輸出

<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="padding: 8px; text-align: left;">Header 1</th>
      <th style="padding: 8px; text-align: left;">Header 2</th>
      <th style="padding: 8px; text-align: left;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">Cell 1,1</td>
      <td style="padding: 8px;">Cell 1,2</td>
      <td style="padding: 8px;">Cell 1,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 2,1</td>
      <td style="padding: 8px;">Cell 2,2</td>
      <td style="padding: 8px;">Cell 2,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 3,1</td>
      <td style="padding: 8px;">Cell 3,2</td>
      <td style="padding: 8px;">Cell 3,3</td>
    </tr>
  </tbody>
</table>

關於本工具

HTML表格生成器讓您設定行列數、直接編輯儲存格，並獲得可用的HTML表格程式碼。可以視覺化配置標題行、邊框、條紋行和儲存格內邊距。

生成的HTML遵循具有適當thead和tbody結構的語義標記，對可及性和螢幕閱讀器更友好。程式碼在編輯時即時更新。

使用方法

設定行數和列數。
使用核取方塊切換標題行、邊框和條紋行。
調整儲存格內邊距值。
點擊任意儲存格直接輸入內容。
複製「HTML輸出」下的程式碼並在專案中使用。

使用情境

非常適合資料對比表、定價表、行程表、產品規格表以及網頁上以表格形式顯示的任何資訊。

常見問題

不用CSS能設定表格樣式嗎？ — 可以。生成的HTML包含border屬性和cellpadding，因此無需CSS即可應用基本樣式。
可以添加colspan或rowspan嗎？ — 此工具生成基本表格結構。直接編輯生成的程式碼新增colspan/rowspan屬性。
如何使表格響應式？ — 將表格包裹在overflow-x: auto的div中，或使用CSS媒體查詢在小螢幕上允許水平捲動。