Softonic

Generator Tabel HTML

Langkah 1 / 4

Mendukung kolom CSV bertanda kutip, tab dari lembar kerja, baris berpemisah titik koma, dan baris pemisah Markdown. Maksimum: 50 baris, 20 kolom, dan 1.000 karakter per sel.

Data tabel
Data tabel

Menulis kode <table>, <thead>, <tbody>, dan <tr> secara manual untuk kumpulan data sepuluh baris sangat merepotkan. Cukup tempelkan data tabel dalam format CSV atau Markdown yang dipisahkan oleh tab; generator ini akan menghasilkan kode HTML yang terstruktur dengan baik, dilengkapi tag semantik, opsi <caption>, atribut skop yang tepat, serta pilihan pola garis zebra, batas, atau kelas Tailwind, sedia langsung digunakan dalam artikel maupun dashboard.

Cara membuat tabel HTML

  1. 1

    Pasang data Anda

    TSV (salinan dari spreadsheet), format CSV, maupun sintaks tabel Markdown semuanya dapat diproses dengan benar.

  2. 2

    Pilih opsi tabel

    Baris header, keterangan, pola garis zebra, baris kompak atau luas.

  3. 3

    Pilih mode gaya

    HTML biasa, gaya inline, kelas Bootstrap, atau kelas Tailwind.

  4. 4

    Salin penandaan

    Hasilnya merupakan HTML yang valid dan semantik, bukan grid `<div>` yang berpura-pura menjadi tabel.

Struktur tabel semantik

Tabel yang dibuat dengan tag yang tepat dapat diakses dengan mudah, kompatibel dengan alat pembaca layar (screen reader), dan mudah disesuaikan tampilannya. Generator ini menghasilkan struktur berikut:

<table>
  <caption>Angka penjualan Q1</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">EU</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

Element dan Perannya

Element Tujuan
<caption> Ringkasan tabel, dibaca terlebih dahulu oleh alat pembaca layar
<thead> Judul kolom, ditampilkan terpisah dari isi utama
<tbody> Baris data
<tfoot> Jumlah total dan catatan kaki ditempatkan di bagian bawah, terlepas dari posisi kode
<th scope="col"> Judul kolom
<th scope="row"> Judul baris (misalnya sel pertama dari setiap baris)
<td> Sel data

Pola responsif

  • Gulir horizontal: bungkus tabel dalam <div style="overflow-x:auto"> agar area tampilan yang sempit dapat digulir tanpa merusak tata letak.
  • Bertumpuk pada perangkat seluler: ulangi header sebagai atribut data-label dan ubah baris menjadi kartu vertikal menggunakan CSS, cocok untuk kumpulan data yang kecil.
  • Penataan ulang dengan grid: tabel kompleks dapat dibangun ulang menggunakan CSS Grid, namun kehilangan navigasi keyboard bawaan; hanya layak untuk dasbor.

Daftar Periksa Aksesibilitas

  • Setiap <th> memiliki atribut scope.
  • Untuk penggabungan sel yang kompleks, gunakan headers="..." untuk menghubungkan sel data dengan ID header.
  • Keterangan merangkum tujuan tabel.
  • Jangan gunakan tabel untuk tata letak visual, gunakan CSS Grid atau Flexbox.

Pertanyaan yang Sering Diajukan

Ya. Data clipboard spreadsheet berformat TSV (dipisahkan oleh tab), yang dapat diproses secara natif oleh generator. Baris-baris akan diubah menjadi <tr>, sedangkan sel-sel yang dipisahkan oleh tab akan diubah menjadi <td>.

Kelas CSS untuk semua elemen yang Anda kendalikan; gaya inline untuk email (di mana lembar gaya eksternal sering diblokir). Mode Bootstrap dan Tailwind menghasilkan kode kelas siap pakai untuk framework tersebut.

Tidak secara otomatis. Setiap nilai yang diimpor menjadi satu sel. Setelah menyalin HTML, tambahkan sendiri colspan atau rowspan dan periksa kaitan header karena sel gabungan mungkin memerlukan atribut id dan headers.

Ya, atribut scope="col" dan scope="row" telah ditambahkan, dan <caption> akan dihasilkan jika Anda menyediakannya. Verifikasi menggunakan alat pembaca layar atau ekstensi axe DevTools untuk tabel yang kompleks.

Alat Terkait

Generator Konfigurasi Webpack

Buat webpack.config.js untuk webpack 5 bagi JavaScript biasa, React, atau Vue: TypeScript, Babel, CSS atau Sass, gambar, HtmlWebpackPlugin, server pengembangan, dan baris npm install.

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Validator OpenAPI

Tempel dokumen OpenAPI atau Swagger dalam JSON atau YAML dan periksa struktur intinya: bidang versi, objek info, dan paths, dengan galat dan peringatan yang jelas.

Pemformat PHP

Tambahkan baris baru dan indentasi 2 atau 4 spasi ke cuplikan PHP sederhana. Periksa hasilnya: alat ini bukan parser PHP dan tidak menerapkan PSR-12.

Generator Loader CSS

Buat spinner lingkaran CSS murni: atur diameter, ketebalan border, warna dan kecepatan rotasi, lihat pratinjau langsung, lalu salin CSS siap pakai. Tanpa SVG, tanpa JavaScript.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Alat ini tersedia dalam bahasa lain