HTML Tabel Generator

Buat tabel HTML secara visual dan salin kodenya.

Tidak ada data yang meninggalkan perangkat Anda

Cara menggunakan

  1. Tentukan jumlah baris dan kolom, lalu klik Terapkan.
  2. Masukkan data langsung ke sel yang dapat diedit.
  3. Aktifkan opsi seperti baris header, bergaris, border, dan hover.
  4. Klik Salin HTML untuk menyalin kode yang dihasilkan.

Pertanyaan umum

Apakah kode yang dihasilkan menyertakan CSS?

Ya. Saat Anda mengaktifkan opsi seperti bergaris, border, atau hover, alat menghasilkan gaya CSS inline dalam HTML sehingga tabel berfungsi di mana saja.

Apa ukuran tabel maksimum?

Hingga 50 baris dan 20 kolom. Untuk dataset yang lebih besar, pertimbangkan untuk menggunakan alat spreadsheet dan mengekspor ke HTML.

Cara kerjanya

  1. Tentukan dimensi tabel: masukkan jumlah baris dan kolom untuk menghasilkan kisi awal.
  2. Isi data: klik sel untuk memasukkan konten, tambahkan baris header, dan aktifkan border serta garis-garis.
  3. Stilisasi tabel: pilih gaya border, warna latar belakang header, baris bergaris, dan padding sel.
  4. Salin HTML: markup tabel yang dihasilkan menyertakan <thead> dengan header <th> dan struktur semantik yang benar.

Mengapa menggunakan generator tabel HTML?

Menulis markup tabel HTML secara manual itu membosankan dan berulang, terutama untuk tabel dengan banyak baris atau header yang kompleks. Mendapatkan penyusunan <table>, <thead>, <tbody>, <tr>, <th>, dan <td> yang tepat setiap kali rentan terhadap kesalahan. Generator ini menghasilkan tabel HTML yang benar secara semantik dan dapat diakses dengan atribut scope pada sel header untuk kompatibilitas pembaca layar, dukungan caption yang tepat, dan CSS yang bersih untuk border dan status hover. Gunakan untuk tabel harga, tabel perbandingan, tabel data, dan dokumentasi.

Fitur tabel

Apa itu generator tabel HTML?

Generator tabel HTML memberi Anda kisi visual yang dapat Anda isi seperti spreadsheet, kemudian memancarkan markup

yang setara dengan semua elemen semantik yang tepat. Daripada mengetik
, , , , terpisah untuk baris header, dan CSS inline untuk opsi visual yang Anda centang. Output siap salin-tempel untuk posting blog, dokumentasi, template email, dan konteks apa pun yang menerima HTML. Kisi visual berjalan sepenuhnya di browser Anda jadi tidak ada data yang meninggalkan perangkat Anda.

Apa yang ada di dalam generator

Baris kontrol atas berisi dua input angka (baris dan kolom), tombol Terapkan, dan empat kotak centang opsi (baris header, baris bergaris, berbatas, efek hover). Sesuaikan dimensi terlebih dahulu, klik Terapkan, lalu centang opsi yang cocok dengan desain Anda. Kisi yang dapat diedit di bawah diperbarui secara instan, dan HTML yang dihasilkan di textarea mencerminkan setiap perubahan yang Anda buat.

Kisi yang dapat diedit adalah tabel HTML nyata dengan input di setiap sel, sehingga Anda dapat tab antar sel, menempelkan kolom nilai, atau menggunakan navigasi keyboard. Baris header (ketika dicentang) dirender dengan latar belakang berwarna sehingga Anda dapat mengatakan secara sekilas baris mana yang akan menjadi

dan dengan tangan dan menghitung tag pembuka dan penutup, Anda mengatur dimensi, mengetik data, dan menyalin hasilnya. Outputnya adalah HTML yang valid dan terbaca dengan benar oleh pembaca layar.

Elemen tabel semantik telah ada di HTML sejak draft 1993 dan diformalkan di HTML 2.0 (1995). Mereka ada karena satu alasan: data tabular. Tabel harga, matriks perbandingan, kisi data yang dapat diurutkan, tabel periodik unsur, koleksi fakta persegi panjang apa pun di mana baris dan kolom memiliki makna. Tabel dibaca dengan benar oleh teknologi bantu ketika digunakan untuk data tabular dan menciptakan mimpi buruk aksesibilitas ketika digunakan untuk tata letak halaman (era

dan Flexbox mengakhiri penyalahgunaan itu).

Generator ini menghasilkan markup yang dapat diakses dengan atribut scope pada sel header,

di output. Kotak output di bawah menampilkan HTML yang dihasilkan dalam monospace, siap untuk disalin.

Tiga tombol aksi berada di bawah: Copy HTML menulis markup ke clipboard Anda melalui Clipboard API, Toggle Preview menunjukkan versi yang dirender di bawah sehingga Anda dapat mengonfirmasi gaya, dan Clear Cells mengosongkan data tanpa mengatur ulang dimensi. Pratinjau menggunakan CSS yang sama dengan output, jadi apa yang Anda lihat adalah apa yang akan ditampilkan blog atau dokumen Anda.

Sejarah dan latar belakang

Tim Berners-Lee mengusulkan tabel (1993)

Draft HTML pertama yang menyertakan

adalah proposal HTML 3.0 Dave Raggett pada akhir 1993. Elemen ini dimodelkan pada lingkungan tabular LaTeX dan model tabel CALS yang digunakan untuk dokumentasi teknis. Mosaic dan Netscape awal merender tabel segera setelah markup diusulkan, bahkan sebelum standardisasi, itulah sebabnya tabel adalah salah satu primitif visual paling awal di web.

RFC 1942 menstandardisasi model tabel (1996)

RFC 1942 Dave Raggett (Mei 1996) memberikan tabel HTML spesifikasi formal pertama mereka, termasuk thead, tbody, tfoot, colgroup dan atribut scope untuk aksesibilitas. Pada tahun yang sama, rekomendasi W3C HTML 3.2 mengadopsi model tabel secara harfiah. Strukturnya sebagian besar tidak berubah selama tiga dekade.

Zaman kegelapan tabel tata letak (1996 hingga 2005)

Sebelum CSS didukung secara luas, desainer menggunakan tabel untuk memposisikan elemen halaman: tabel empat sel menahan header, navigasi kiri, konten, dan footer. Teknik tersebut berfungsi tetapi menghasilkan markup yang tidak dapat dibaca, merusak pembaca layar, dan membuat desain ulang menyakitkan. Penginjilan CSS Eric Meyer (2000-2005) dan Designing With Web Standards Jeffrey Zeldman (2003) mengakhiri era, mengembalikan tabel ke tujuan semantik mereka: data tabular.

Nilai display table-* CSS (2004 dan seterusnya)

CSS 2.1 menambahkan display: table, table-row dan table-cell, sehingga Anda bisa mendapatkan perilaku tata letak seperti tabel pada elemen non-tabel. Ini berguna untuk periode singkat ketika Flexbox dan Grid belum didukung (sekitar 2010 hingga 2015). Hari ini, display: grid dan display: flex telah menggantikan nilai-nilai tabel CSS ini untuk tata letak, dan tabel nyata dicadangkan untuk data.

Peran grid ARIA dan aksesibilitas (2014)

WAI-ARIA 1.0 (2014) memperkenalkan role=grid untuk tabel interaktif dan mengklarifikasi bagaimana pembaca layar harus mengumumkan header tabel melalui atribut scope dan pola headers/id. Pembaca layar modern (NVDA, JAWS, VoiceOver) dengan benar membaca

yang ditandai dengan baik dengan konteks kolom dan baris, yang tidak mungkin direplikasi dengan kisi berbasis
.

Pola tabel responsif (2011 hingga sekarang)

Ketika iPhone membuat layar kecil dominan, desainer harus mencari tahu cara menampilkan tabel lebar di viewport sempit. Artikel tabel responsif Filament Group 2011 memulai gelombang pola: gulir horizontal, baris yang ditumpuk di seluler, kolom yang runtuh berdasarkan prioritas. CSS Working Group telah bekerja pada container queries dan subgrid untuk membuat pola ini lebih mudah; untuk saat ini, pendekatan standar adalah membungkus tabel dalam overflow-x: auto.

Alur kerja praktis

Tabel harga untuk halaman arahan SaaS

Tiga kolom (Gratis, Pro, Enterprise) dengan sepuluh atau lebih baris fitur. Centang baris header untuk membuat nama paket menjadi sel

, centang berbatas untuk pemisahan yang jelas, biarkan bergaris mati jika desain Anda memiliki latar belakang baris sendiri. Salin HTML, tempel ke CMS atau situs statis Anda, dan tambahkan kelas pembungkus tipis untuk tema.

Matriks perbandingan untuk ulasan blog

Ketika meninjau lima alat di delapan kriteria, tabel dengan baris bergaris dan sel berbatas terbaca lebih jelas daripada daftar bullet. Centang bergaris, berbatas dan baris header; ketik atau tempel data; salin. Markup semantik membuat perbandingan dapat dibaca di pembaca feed, layanan arsip dan pembaca layar.

Tabel referensi dalam dokumentasi API

Dokumen API sering menampilkan nama parameter, jenis, default, dan deskripsi dalam bentuk tabular. Generator memberi Anda empat kolom dengan baris header, Anda mengisi parameter, salin HTML dan tempel ke Markdown yang mendukung HTML mentah, atau ke framework dokumen Anda (Docusaurus, MkDocs, Hugo). Atribut scope membuat kolom dapat dinavigasi di pembaca layar.

Buletin email (dengan peringatan)

Klien email (Outlook 2007-2019 terutama) memiliki dukungan CSS yang sangat tidak konsisten, sehingga HTML buletin masih menggunakan tabel untuk tata letak (pengecualian aturan tanpa tabel tata letak). Untuk tabel data di dalam buletin, output bergaya inline dari generator berfungsi di sebagian besar klien. Uji di Litmus atau Email on Acid sebelum mengirim ke daftar besar.

Mockup cepat dasbor internal

Saat membuat prototipe dasbor admin internal, tabel HTML statis dengan baris bergaris terlihat lebih dekat dengan produk akhir daripada teks placeholder. Hasilkan struktur, tempel ke komponen React atau Vue, dan ganti data statis dengan loop terikat data nanti.

Pembuatan PDF dari HTML

Saat menghasilkan PDF dari HTML dengan alat seperti Puppeteer, wkhtmltopdf, atau cetak-ke-PDF Chrome, tabel dirender dengan andal di semua mesin. Gunakan generator untuk membangun tabel, tempel ke template Anda, dan jalankan pipeline PDF. Opsi berbatas memberikan garis cetak yang tajam tanpa CSS tambahan.

Jebakan umum

Menggunakan tabel untuk tata letak halaman

Tabel adalah untuk data tabular, bukan struktur halaman.

dengan satu baris dan tiga kolom untuk memposisikan header, konten dan sidebar membuat halaman terbaca sebagai tabel data ke pembaca layar, yang membingungkan. Gunakan Flexbox atau CSS Grid untuk tata letak sebagai gantinya. Satu-satunya pengecualian adalah email HTML, di mana tabel tata letak masih diperlukan untuk rendering lintas-klien.

Atribut scope hilang pada sel header

Setiap

kosong terbaca sebagai kosong ke pembaca layar, yang terdengar aneh ketika mendaftar 50 entri. Jika sel secara sah tidak memiliki data, tulis atau . Perhatikan bahwa entitas garis hubung memperkenalkan em-dash, yang dihindari situs ini; gunakan tanda hubung, "N/A", atau "Tidak tersedia" sebagai gantinya.

Pengurutan dan penyaringan tanpa peningkatan progresif

Tabel HTML statis tidak dapat diurutkan atau difilter oleh pengguna. Jika audiens Anda membutuhkan interaktivitas, lapisi DataTables, AG Grid, atau Tanstack Table. Generator menghasilkan tabel semantik yang mendasari, yang menjadi fondasi untuk pustaka-pustaka ini. Navigasi keyboard dan peran ARIA datang dengan pustaka.

Privasi dan penanganan data

Semuanya berjalan di browser Anda. Kisi visual, output HTML, dan pratinjau semua hidup dalam JavaScript sisi klien. Kami tidak mengirim data Anda ke mana pun, mencatat input, atau menyimpan apa pun dalam cookie atau localStorage. Muat ulang halaman dan tabel sebelumnya hilang.

Setelah halaman dimuat, alat berfungsi offline. Anda dapat memutuskan koneksi dari jaringan dan membangun tabel yang berisi data pelanggan, harga internal, atau konten rahasia lainnya tanpa menyentuh server pihak ketiga. Tombol Copy HTML menggunakan Clipboard API yang memerlukan gerakan pengguna dan tidak dapat diamati oleh pihak eksternal.

Kapan tidak menggunakan tabel HTML statis

Tata letak halaman (gunakan Flexbox atau Grid)

Jika Anda menginginkan sidebar di sebelah konten utama, kisi kartu, atau bilah navigasi, gunakan CSS Flexbox (display: flex) atau CSS Grid (display: grid). Tabel untuk tata letak menghasilkan output pembaca layar yang membingungkan dan HTML yang tidak fleksibel yang tidak beradaptasi dengan perubahan viewport seperti yang dilakukan primitif tata letak modern.

Dataset besar (di atas 1000 baris)

Tabel HTML statis 10.000 baris lambat untuk dirender dan mengonsumsi memori signifikan. Gunakan pustaka kisi virtualisasi (TanStack Virtual, React Window, AG Grid) yang hanya merender baris yang terlihat. HTML statis baik untuk di bawah beberapa ratus baris.

Manipulasi data interaktif (gunakan pustaka kisi)

Ketika pengguna perlu mengurutkan, memfilter, mengedit, mengelompokkan atau memberi nomor halaman, Anda memerlukan pustaka kisi yang nyata. AG Grid, TanStack Table, DataTables, dan Bootstrap Table semuanya menghasilkan markup

harus memiliki scope="col" atau scope="row" sehingga pembaca layar tahu header mana yang berlaku untuk sel data mana. Tanpa scope, pembaca harus menebak, sering menghasilkan konteks yang salah. Generator ini memancarkan scope secara otomatis untuk baris header. Jika Anda mengedit HTML secara manual, pertahankan atribut scope tetap di tempatnya.

Header kompleks (multi-level) tanpa headers/id

Tabel dengan header kolom yang dikelompokkan (Q1, Q2 masing-masing dibagi menjadi Jan, Feb, Mar) memerlukan atribut headers pada setiap sel data yang menunjuk ke id header yang relevan. Scope saja tidak cukup untuk header dua tingkat. Generator tidak menghasilkan header kompleks; untuk ini, edit HTML secara manual atau gunakan plugin CMS yang mendukung pola tersebut.

Tabel lebar di seluler

Tabel enam kolom tidak terbaca di layar telepon selebar 375 piksel. Pola ramah-seluler default adalah membungkus tabel dalam div dengan overflow-x: auto sehingga pengguna dapat menggulir secara horizontal. Untuk tabel berat kolom, pertimbangkan untuk menumpuk baris menjadi mini-kartu di layar kecil melalui @media (max-width). Output generator tidak dibungkus otomatis; tambahkan pembungkus di CSS Anda.

Sel kosong tanpa konten eksplisit

--
yang dapat diakses di balik layar sambil menambahkan interaktivitas. Output generator adalah titik awal, bukan akhir.

Bagan dan grafik (gunakan SVG atau canvas)

Bagan batang bukanlah tabel, itu adalah visualisasi. Gunakan Chart.js, D3, Recharts, atau pustaka bagan berbasis SVG apa pun. Jika Anda membutuhkan bagan dan tabel data pendukung untuk aksesibilitas, render bagan dan tempatkan

dengan data yang sama di dekatnya (atau disembunyikan dalam kelas yang disembunyikan secara visual) sehingga pengguna pembaca layar mendapatkan angka.

Pertanyaan lainnya

Haruskah saya selalu menggunakan thead dan tbody?

Untuk tabel dengan baris header, ya.

memisahkan baris header dari baris data, yang memungkinkan browser membekukan header pada tabel panjang dan memungkinkan pembaca layar mengumumkan header dengan benar. Generator menyertakan thead secara otomatis ketika opsi baris header dicentang. Untuk tabel tanpa header, Anda dapat menghilangkan keduanya, tetapi murah untuk menyertakan untuk kelengkapan.

Kapan saya menggunakan scope="col" vs scope="row"?

scope="col" berlaku pada sel

yang melabeli kolom (baris atas header). scope="row" berlaku pada sel yang melabeli baris (sel paling kiri ketika setiap baris memiliki nama). Sebagian besar tabel hanya memiliki header kolom, jadi scope="col" adalah kasus umum. Jika Anda memiliki keduanya, tandai masing-masing dengan scope yang sesuai.

Bagaimana saya membuat tabel yang dapat diurutkan?

Gunakan pustaka JavaScript yang menambahkan klik-untuk-mengurutkan ke markup

yang ada. Sortable.js, TanStack Table, dan DataTables semuanya melakukan ini. CSS murni tidak dapat mengurutkan. Output generator adalah fondasi statis; lapisi pustaka di atasnya dalam proyek akhir Anda. Untuk aksesibilitas, pustaka harus menambahkan aria-sort ke kolom aktif.

Apa pola responsif terbaik?

Yang paling sederhana dan paling mudah diakses adalah overflow-x: auto pada div pembungkus, yang mempertahankan semantik tabel sambil memungkinkan pengguna menggulir secara horizontal. Untuk tabel berat kolom, pola baris bertumpuk (display: block pada td pada lebar sempit, dengan label data melalui atribut data-label) membaca setiap baris sebagai daftar berlabel di seluler. Keduanya valid; pilih berdasarkan kasus penggunaan baca-vs-bandingkan tabel.

Bisakah saya menggunakan tabel HTML dalam Markdown?

Sebagian besar prosesor Markdown (GitHub Flavored Markdown, Pandoc, MDX, MkDocs, Hugo) menerima HTML mentah bersama sintaks Markdown, sehingga Anda dapat menempelkan output generator secara langsung. Sintaks tabel asli Markdown lebih sederhana tetapi tidak memiliki colspan, rowspan, scope, dan styling, jadi untuk apa pun di luar kisi sederhana, HTML lebih baik. Catatan: beberapa parser Markdown yang ketat (CommonMark tanpa ekstensi) mengabaikan HTML secara default.

Bagaimana saya menata warna baris bergantian tanpa CSS?

Centang opsi Baris Bergaris di generator. Output menyertakan atribut gaya inline pada setiap baris lain, sehingga garis bertahan bahkan dalam konteks di mana CSS dihapus (beberapa klien webmail). Jika lingkungan Anda mengizinkan CSS eksternal, lebih suka tr:nth-child(even) dalam stylesheet, yang lebih bersih daripada gaya inline dan lebih mudah diperbarui.

Alat terkait