CSV'den HTML Tabloya

Nasıl çalışır?

Tablonuzu Excel'de seçip kopyalayın (Ctrl+C) ya da .csv dosyasını Not Defteri ile açıp içeriğini alın ve sol panele yapıştırın; HTML tablo kodu sağ panelde hemen oluşur. Excel'den kopyalanan hücreler sekmeyle, Türkçe Excel'in kaydettiği CSV noktalı virgülle ayrılır; araç ayırıcıyı ilk satırlara bakarak kendisi bulur ve sonuç satırında yazar. Örnekteki dört satırlık ürün listesi bir <thead> içinde üç başlık hücresi ve bir <tbody> içinde üç veri satırı olur. Hücre değerleri olduğu gibi aktarılır: 1.250,00 fiyatı ve 0532 ile başlayan telefon numarası değişmez. Hücrede <, > ya da & varsa bunlar &lt;, &gt;, &amp; olarak yazılır; böylece "<b>" yazan bir hücre sayfada kalın yazıya dönüşmez, bir hücreye yapıştırılmış kod da çalışmaz. Kısa kalan satırlar boş hücreyle tamamlanır, tablo kaymaz. Kodu WordPress'te "Özel HTML" bloğuna, Blogger'da HTML görünümüne, e-posta şablonunda kaynak kod alanına yapıştırın. E-postaya koyacaksanız "Kenarlıklı ve şeritli" seçin: stil her hücrenin içine yazılır, çünkü e-posta programları ayrı stil dosyasını okumaz.

Bu araç excel tablosunu html yapma, csv to html, csv to html table aramalarıyla da biliniyor.

HTML tablo nedir?

HTML tablo, web sayfasında satır ve sütunları çizen <table> etiketidir. İçinde başlık bölümü <thead>, gövde <tbody>, her satır <tr>, başlık hücresi <th>, veri hücresi <td> etiketiyle yazılır. Tarayıcı sütun genişliğini içeriğe göre kendisi ayarlar; kenarlık, dolgu ve renk ise ayrı bir stil kuralıyla ya da hücrenin style özelliğiyle verilir. Başlık hücresi ekran okuyuculara hangi değerin hangi sütuna ait olduğunu söyler, bu yüzden erişilebilirlik için de önemlidir.

HTML kaçışı (escape) nedir?

HTML kaçışı, özel anlam taşıyan karakterlerin varlık adlarıyla yazılmasıdır: < yerine &lt;, > yerine &gt;, & yerine &amp;, tırnak yerine &quot;. Tarayıcı bu adları ekranda asıl karakter olarak gösterir ama etiket ya da kod olarak yorumlamaz. Kaçış yapılmadan sayfaya konan dış veri, sayfanın yapısını bozabilir ya da siteler arası betik (XSS) denen saldırıya kapı açar; bu yüzden tablo hücresine giren her değer kaçışlanmalıdır.

CSV ile HTML tablo arasındaki fark nedir?

CSV yalnız veridir: hücreler bir ayırıcıyla bölünür, görünüm bilgisi yoktur ve dosya Excel'de ya da bir programda açılmak içindir. HTML tablo ise veriyi etiketlerle sarar ve tarayıcıda gösterilmek içindir; hangi satırın başlık olduğunu, hücre kenarlığını, rengini taşıyabilir. CSV'yi bir web sayfasına doğrudan yapıştırmak tek satırlık düz metin verir; HTML tablo ise sütunları hizalı gösterir. Veriyi başka programa aktaracaksanız CSV, bir sayfada ya da e-postada göstereceksiniz HTML tablo kullanın.

Üç tuzak: kaçışlanmayan karakter, e-postada kaybolan stil, kayan sütun

Kaçış: HTML'de < ve > etiket, & varlık başlatır. "Fiyat < 100 & stokta" yazan bir hücre olduğu gibi sayfaya konursa tarayıcı bunu bozuk bir etiket sanar ve metnin bir kısmı kaybolur. Daha kötüsü, bir hücreye <script> yazılmışsa o kod ziyaretçinin tarayıcısında çalışabilir. Bu araç her hücreyi he kütüphanesiyle kaçışlar; hücrede ne yazıyorsa sayfada da o görünür.

E-posta stili: Gmail ve Outlook, HTML e-postadaki <style> bloğunu ve dış stil dosyalarını çoğu zaman atar. Kenarlık ve dolgu her <td> ve <th> içine style="…" olarak yazılmazsa tablo e-postada çizgisiz, sıkışık görünür. "Kenarlıklı ve şeritli" seçeneği bunu yapar ve satırları dönüşümlü açık renkle boyar.

Kayan sütun: Bir satırda başlıktan az hücre varsa tarayıcı eksik hücreyi çizmez, satır sola kayar ve değerler yanlış başlığın altına düşer. Araç kısa satırları boş hücreyle tamamlar ve kaç satırın tamamlandığını sonuç satırında yazar.

• "Fiyat < 100 & stokta" → Fiyat &lt; 100 &amp; stokta
• "Tabak; porselen" (tırnaklı) → tek hücre, sütunu bölmez
• Kısa satır → sonuna boş <td></td> eklenir

Hangi ayarı ne zaman seçmeli

Sitenizin ya da temanızın kendi tablo stili varsa "Sade HTML" bırakın; kod temiz kalır ve tema tabloyu kendi renkleriyle çizer. WordPress, Blogger ve çoğu hazır tema tablolara kendiliğinden kenarlık ve boşluk verir.

Tablo bir e-posta bültenine, bir teklif e-postasına ya da stil tanımayan bir yere gidiyorsa "Kenarlıklı ve şeritli" seçin. İlk satır başlık değilse, örneğin yalnız bir fiyat listesinin gövdesini aktarıyorsanız "Veri" seçin; o zaman <thead> yazılmaz ve bütün satırlar normal hücre olur. Başlıklı tablo ekran okuyucular için de daha anlaşılırdır, bu yüzden başlık satırınız varsa varsayılanı bırakın.

Sık sorulanlar

Excel tablosu HTML'e nasıl çevrilir?

Excel'de tabloyu seçip kopyalayın ve bu sayfadaki sol panele yapıştırın; HTML kodu sağ panelde anında oluşur. Excel hücreleri sekmeyle ayırdığı için araç bunu kendisi tanır. Sağ paneldeki kodu kopyalayıp sitenizin HTML düzenleyicisine yapıştırmanız yeterlidir.

HTML tablom e-postada neden çizgisiz görünüyor?

E-posta programlarının çoğu ayrı stil bloklarını siler, yalnız her etiketin içine yazılmış style özelliğini korur. "Görünüm" ayarından "Kenarlıklı ve şeritli" seçin; kenarlık ve dolgu her hücreye ayrı ayrı yazılır ve tablo Gmail, Outlook ve telefon e-posta uygulamalarında aynı görünür.

Hücrede < ya da & işareti varsa ne olur?

Bu işaretler HTML'de özel anlam taşıdığı için &lt; ve &amp; olarak yazılır. Sayfada yine < ve & görünür, ama tarayıcı onları etiket sanmaz. Böylece hücre içeriği ne olursa olsun tablo bozulmaz ve hücreye yazılmış kod çalışmaz.

Yapıştırdığım veriler sunucuya gidiyor mu?

Hayır. Ayrıştırma ve HTML üretimi tamamen tarayıcınızda yapılır; müşteri listesi ya da fiyat tablosu yapıştırsanız bile veri bu sayfadan çıkmaz ve kaydedilmez.