Utilia
Kategori ▾
Bahasa: id ▾

Generator Tabel HTML

Buat kode tabel HTML dari grid yang bisa diedit atau CSV yang ditempel, dengan caption, sel header, th scope, class CSS atau gaya inline, dan pratinjau.

Tekan Enter untuk turun satu baris. Tempel sel yang disalin dari spreadsheet ke sel mana pun untuk mengisi grid mulai dari sel itu.

Gaya

Pratinjau

Impor data CSV atau spreadsheet

Cara membuat tabel HTML

  1. Isi grid-nya. Gunakan Tambah baris, Tambah kolom, Hapus baris terakhir, dan Hapus kolom terakhir, atau tombol × di samping setiap baris dan kolom. Tabel kosong baru memulai lagi dari grid kosong 3 × 3.
  2. Untuk memakai data yang sudah ada, tempel CSV atau sel yang disalin dari Excel, LibreOffice, atau Google Sheets ke Impor data CSV atau spreadsheet, periksa Pemisah, lalu klik Impor. Anda juga bisa menempel blok sel spreadsheet langsung ke sel grid mana pun.
  3. Tambahkan Keterangan (caption) dan pilih apakah Baris pertama adalah baris header dan Kolom pertama adalah kolom header.
  4. Di bagian Gaya, pilih Tanpa gaya, Class CSS, atau Gaya inline, lalu sesuaikan Warna border, Latar header, dan Baris belang (striped) jika Anda mau.
  5. Periksa Pratinjau, lalu klik Salin HTML atau unduh kodenya sebagai file .html.

Markup tabel yang aksesibel

Tabel hanya aksesibel jika pembaca layar (screen reader) bisa mengetahui sel mana yang menjadi header dan apa yang dijelaskannya. Alat ini menulis struktur yang direkomendasikan standar HTML dan teknik WCAG:

  • <caption> memberi nama pada tabel. Pembaca layar mengumumkannya saat masuk ke tabel, dan caption membantu setiap pembaca memahami apa yang sedang dilihat. Buat singkat dan deskriptif.
  • <thead> dan <tbody> memisahkan baris header dari baris data. Browser bisa mengulang <thead> di setiap halaman cetak.
  • <th scope="col"> menandai setiap header kolom, dan dengan Kolom pertama adalah kolom header, <th scope="row"> menandai sel pertama setiap baris. Saat pengguna pembaca layar berpindah ke sel data, header yang sesuai bisa dibacakan, misalnya “Pro, Harga” lalu nilai harganya.

Gunakan tabel hanya untuk data tabular, jangan pernah untuk tata letak halaman. Hindari sel gabungan sebisa mungkin: grid sederhana dengan satu baris header dan, jika perlu, satu kolom header paling mudah dibaca dengan teknologi bantu.

Opsi gaya

  • Tanpa gaya menulis markup polos yang mewarisi gaya tabel situs Anda. Ini pilihan terbaik untuk CMS atau situs dengan design system.
  • Class CSS menambahkan class="…" ke <table> dan menampilkan blok CSS yang sesuai untuk ditempel ke stylesheet Anda. Nama class dibersihkan menjadi huruf, angka, tanda hubung, dan garis bawah agar selalu menjadi selector yang valid.
  • Gaya inline menaruh atribut style di setiap elemen. Memang bertele-tele, tetapi inilah yang dibutuhkan email HTML, karena banyak klien email mengabaikan blok <style>. Tombol Unduh menambahkan CSS dalam elemen <style> jika Anda memakai class.

Hanya warna heksadesimal asli dari pemilih warna yang ditulis ke CSS, sehingga tidak ada hal tak terduga yang bisa masuk ke gaya Anda.

Escaping dan keamanan

Setiap sel di-escape: <, >, dan & menjadi &lt;, &gt;, dan &amp;, sehingga teks seperti <b> atau a < b tampil persis seperti yang diketik, bukan diinterpretasikan sebagai markup. Baris baru di dalam sel yang diimpor menjadi <br>. Pratinjau dibangun hanya dari markup yang sudah di-escape ini dan melewati sanitizer yang hanya menyisakan elemen tabel, sehingga skrip yang ditempel tidak akan pernah bisa berjalan.

Pertanyaan yang sering diajukan

Bisakah saya menaruh tautan atau teks tebal di dalam sel?

Tidak dari grid: isi sel selalu di-escape, yang menjaga kode tetap valid dan aman. Tambahkan tautan atau format ke kode yang dihasilkan setelahnya jika Anda membutuhkannya.

Mengapa memakai caption, bukan judul di atas tabel?

<caption> terikat ke tabel di accessibility tree, sehingga pembaca layar mengumumkannya bersama tabel. Judul di atas tabel tidak terhubung dengan tabel.

Apakah alat ini mendukung sel gabungan (colspan dan rowspan)?

Tidak. Grid menghasilkan satu sel per posisi. Sel gabungan membuat tabel lebih sulit dibaca oleh teknologi bantu, jadi gunakan hanya bila benar-benar diperlukan dan tambahkan secara manual.

Apakah data saya diunggah?

Tidak. Grid, impor, kode, dan pratinjau semuanya dibuat di browser Anda. Tidak ada yang Anda tempel yang dikirim ke server.

Seberapa besar tabel yang bisa dibuat?

Grid menampung hingga 500 baris dan 30 kolom. Untuk dataset yang lebih besar, data grid yang bisa diurutkan atau file CSV yang bisa diunduh biasanya lebih berguna daripada tabel HTML statis.

Alat terkait