Generator Tabel HTML yang Aksesibel: CSV ke HTML dengan Caption | We.Inc
Tempel CSV atau mulai dari preset daftar harga atau jam buka. Dapatkan tabel HTML asli dengan caption, sel header, dan scope, di-escape dengan aman, plus blok CSS responsif kecil untuk disalin.
Tempel baris dari spreadsheet atau CSV, atau mulai dari preset daftar harga layanan atau jam buka. Anda mendapat tabel HTML yang benar, dengan caption, sel header, dan atribut scope yang dipakai pembaca layar, plus blok CSS singkat yang menjaganya tetap terbaca di ponsel. Setiap nilai di-escape, jadi teks yang ditempel tidak bisa merusak halaman Anda. Semuanya berjalan di browser Anda. Tidak ada yang Anda ketik dikirim ke We.Inc atau pihak lain mana pun, dan hilang begitu Anda menutup tab.
Pilih preset atau tempel baris Anda sendiri. Koma, tab (dari spreadsheet), dan titik koma semuanya berfungsi, dan nilai yang dikutip dengan koma di dalamnya tetap bersatu.
Pilih apakah baris pertama berisi judul kolom dan apakah kolom pertama melabeli setiap baris. Itu menjadi sel th dengan atribut scope.
Tulis caption-nya. Ini menamai tabel untuk pengguna pembaca layar dan muncul di atasnya untuk semua orang.
Pilih gaya dan pratinjaukan di lebar desktop dan ponsel. Tabel lebar menggulir ke samping di dalam kotaknya sendiri di layar kecil, bukan terjepit.
Salin HTML dan CSS-nya, atau unduh keduanya sebagai satu file.
Gunakan tabel hanya untuk data dengan baris dan kolom, seperti harga atau jam. Untuk tata letak halaman, gunakan CSS.
Jaga judul tetap singkat. Judulnya diulang di setiap pengumuman pembaca layar.
Taruh satuan di judul (Harga, USD) alih-alih di setiap sel.
Jangan gabungkan sel kecuali harus. Sel gabungan sulit diikuti dengan pembaca layar.
Cek tabel Anda di lebar ponsel. Jika butuh lebih dari satu geseran ke samping, pertimbangkan memecahnya.
Pertanyaan yang sering diajukan
Apa yang membuat tabel HTML aksesibel?
Caption yang menamainya, sel header th untuk judul kolom dan baris, dan atribut scope yang menyatakan apakah header milik kolom atau baris. Pembaca layar memakai ini untuk mengumumkan judul mana yang dimiliki setiap nilai. Generator ini menambahkan ketiganya.
Mengapa tidak membangun tabel dari div?
Grid div bisa terlihat seperti tabel, tapi teknologi bantu tidak bisa tahu sel mana milik judul mana. Elemen tabel asli membawa makna itu secara gratis.
Bagaimana tabel responsif ditangani?
Tabelnya berada dalam kotak yang menggulir ke samping di layar sempit. Kotaknya bisa difokus dan dilabeli dengan caption-nya, jadi pengguna keyboard juga bisa menggulirnya.
Apakah data saya di-escape?
Ya. Tanda dan (&), kurung sudut, dan tanda kutip di sel Anda diubah menjadi entitas HTML, jadi sel yang berisi <script> tampil sebagai teks, bukan berjalan.
Bisakah saya menempel langsung dari Excel atau Google Sheets?
Bisa. Sel yang disalin datang dipisahkan tab, yang dideteksi alat ini secara otomatis.
Apakah ini gratis?
Ya, tanpa pendaftaran. Ini berjalan di browser Anda.
Daftar harga dan jam buka adalah tabel
Kebanyakan situs usaha kecil punya setidaknya dua tabel: berapa harga barang dan kapan Anda buka. Keduanya adalah data tabular sungguhan, jadi seharusnya ditandai sebagai tabel, dengan setiap harga terkait layanannya dan setiap waktu terkait harinya.
Preset di sini memulai Anda dengan dua bentuk itu. Ganti baris contohnya dengan milik Anda sendiri sebelum Anda publikasikan; itu hanya placeholder, bukan harga sungguhan.