Erişilebilir HTML Tablo Oluşturucu: Başlıklı CSV'den HTML'e | We.Inc
CSV yapıştırın veya bir fiyat listesi ya da çalışma saatleri hazır ayarından başlayın. Başlığı, başlık hücreleri ve scope'u olan, güvenle kaçışlanmış gerçek bir HTML tablosu, artı kopyalanacak küçük bir duyarlı CSS bloğu alın.
Bir e-tablodan veya CSV'den satırlar yapıştırın, ya da bir hizmet fiyat listesi veya çalışma saatleri hazır ayarından başlayın. Ekran okuyucuların kullandığı bir başlık, başlık hücreleri ve scope öznitelikleri olan uygun bir HTML tablosu, artı onu telefonlarda okunabilir tutan kısa bir CSS bloğu alırsınız. Her değer kaçışlanır, bu yüzden yapıştırılan metin sayfanızı bozamaz. Her şey tarayıcınızda çalışır. Yazdığınız hiçbir şey We.Inc'e ya da başka birine gönderilmez ve sekmeyi kapattığınızda kaybolur.
Bir hazır ayar seçin veya kendi satırlarınızı yapıştırın. Virgüller, sekmeler (bir e-tablodan) ve noktalı virgüllerin hepsi çalışır, içinde virgül olan tırnaklı değerler bir arada tutulur.
İlk satırın sütun başlıklarını tutup tutmayacağını ve ilk sütunun her satırı etiketleyip etiketlemeyeceğini seçin. Bunlar scope öznitelikli th hücreleri olur.
Bir başlık yazın. Tabloyu ekran okuyucu kullanıcıları için adlandırır ve herkes için üstünde görünür.
Bir stil seçin ve masaüstü ve telefon genişliklerinde önizleyin. Geniş tablolar, küçük ekranlarda sıkışmak yerine kendi kutuları içinde yana kayar.
HTML'i ve CSS'i kopyalayın, ya da ikisini de tek bir dosya olarak indirin.
Bir tabloyu yalnızca fiyatlar veya saatler gibi satır ve sütunlu veriler için kullanın. Sayfa düzeni için bunun yerine CSS kullanın.
Başlıkları kısa tutun. Her ekran okuyucu duyurusunda tekrarlanırlar.
Birimleri her hücreye değil, başlığa (Fiyat, TL) koyun.
Zorunlu olmadıkça hücreleri birleştirmeyin. Birleştirilmiş hücreleri bir ekran okuyucuyla takip etmek zordur.
Tablonuzu telefon genişliğinde kontrol edin. Birden fazla yana kaydırma gerektiriyorsa, bölmeyi düşünün.
Sıkça sorulan sorular
Bir HTML tablosunu ne erişilebilir yapar?
Onu adlandıran bir başlık, sütun ve satır başlıkları için th hücreleri, ve bir başlığın bir sütuna mı yoksa bir satıra mı ait olduğunu söyleyen scope öznitelikleri. Ekran okuyucular bunları her değerin hangi başlığa ait olduğunu duyurmak için kullanır. Bu oluşturucu üçünü de ekler.
Tabloyu neden div'lerden kurmuyoruz?
Bir div ızgarası bir tablo gibi görünebilir, ama yardımcı teknoloji hangi hücrenin hangi başlığa ait olduğunu söyleyemez. Gerçek bir table öğesi bu anlamı bedavaya taşır.
Duyarlı bir tablo nasıl işlenir?
Tablo, dar ekranlarda yana kayan bir kutunun içinde durur. Kutu odaklanabilirdir ve başlıkla etiketlenir, bu yüzden klavye kullanıcıları da kaydırabilir.
Verilerim kaçışlanıyor mu?
Evet. Hücrelerinizdeki ve işaretleri, açılı ayraçlar ve tırnaklar HTML varlıklarına dönüştürülür, bu yüzden <script> içeren bir hücre çalışmak yerine metin olarak görünür.
Doğrudan Excel veya Google E-Tablolar'dan yapıştırabilir miyim?
Evet. Kopyalanan hücreler sekmelerle ayrılmış olarak gelir, araç bunu otomatik olarak algılar.
Bu ücretsiz mi?
Evet, kayıt olmadan. Tarayıcınızda çalışır.
Fiyat listeleri ve çalışma saatleri tablodur
Çoğu küçük işletme sitesinde en az iki tablo vardır: şeylerin maliyeti ve açık olduğunuz saatler. İkisi de gerçek tablo verisidir, bu yüzden her fiyat hizmetine, her saat gününe bağlanacak şekilde tablo olarak işaretlenmelidir.
Buradaki hazır ayarlar sizi bu iki şekille başlatır. Yayınlamadan önce örnek satırları kendinizinkiyle değiştirin; onlar yer tutuculardır, gerçek fiyatlar değil.