Generator Tabel HTML

Buat tabel HTML dengan editor visual dan salin kode secara instan.

BarisKolom Baris header Batas Baris bergarisPadding

Output 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>

Tentang alat ini

Generator Tabel HTML memungkinkan Anda mengatur jumlah baris dan kolom, mengedit sel langsung, dan mendapatkan kode HTML tabel siap pakai. Anda dapat mengonfigurasi baris header, batas, baris bergaris, dan padding sel secara visual.

HTML yang dihasilkan mengikuti markup semantik dengan struktur thead dan tbody yang tepat, lebih baik untuk aksesibilitas dan pembaca layar. Kode diperbarui secara real-time saat Anda mengedit.

Cara penggunaan

Atur jumlah baris dan kolom.
Aktifkan/nonaktifkan baris header, batas, dan baris bergaris dengan kotak centang.
Sesuaikan nilai padding sel.
Klik sel mana saja untuk mengetikkan konten Anda langsung.
Salin kode di bawah "Output HTML" dan gunakan dalam proyek Anda.

Kasus penggunaan

Bagus untuk tabel perbandingan data, tabel harga, jadwal, tabel spesifikasi produk, dan informasi apa pun yang ditampilkan dalam format tabel di halaman web.

Pertanyaan umum

Bisakah saya memberi gaya pada tabel tanpa CSS? — Ya. HTML yang dihasilkan mencakup atribut border dan cellpadding, sehingga gaya dasar diterapkan tanpa CSS apa pun.
Bisakah saya menambahkan colspan atau rowspan? — Alat ini menghasilkan struktur tabel dasar. Edit kode yang dihasilkan langsung untuk menambahkan atribut colspan/rowspan.
Bagaimana cara membuat tabel responsif? — Bungkus tabel dalam div dengan overflow-x: auto, atau gunakan media query CSS untuk memungkinkan gulir horizontal pada layar kecil.