Softonic

Generator Tabel HTML

Data yang ditempel, isi sel, dan HTML hasil tetap berada di browser ini. Langkah corong memakai penyimpanan sesi pada tab ini; nilainya tidak dikirim melalui server kami atau dimasukkan ke URL.

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>Q1 sales figures</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

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.

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Pemformat JSON

Tempel JSON untuk dirapikan dengan indentasi 2 atau 4 spasi, dipadatkan menjadi output ringkas, atau diperiksa sintaksnya sebelum hasilnya disalin.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.

Penyederhana Aljabar Boolean

Sederhanakan ekspresi Boolean memakai Karnaugh map dan algoritma Quine-McCluskey. Menampilkan setiap langkah minimisation dan bentuk SOP/POS akhir.