HTML Tablo Oluşturucu: Excel'den HTML, Markdown ve WordPress Tablosu

HTML tablo nedir, ne zaman kullanılır?

HTML tablosu, verileri satır ve sütunlara dizen standart bir web öğesidir. Fiyat listeleri, karşılaştırma çizelgeleri, ders programları, teknik özellik tabloları ve sonuç listeleri gibi gerçekten tablo niteliği taşıyan her veri için doğru araçtır. Bir tabloyu elle yazmak ise sıkıcıdır: her hücre için açılış ve kapanış etiketi, her satır için bir tr, başlık için th, birleştirme için colspan ve rowspan. Tek bir yazım hatası bütün tabloyu bozabilir. Bu araç, tabloyu bir elektronik tablo gibi doldurmanızı, kodu sizin yerinize doğru ve düzenli biçimde üretmesini sağlar.

Tablo yalnızca görünüm için değil, anlam için de önemlidir. Ekran okuyucu kullanan bir ziyaretçi, başlık hücrelerini (th) doğru işaretlenmiş bir tabloda her veriyi başlığıyla birlikte duyar. Arama motorları da tablodaki yapılandırılmış veriyi daha iyi anlar. Bu yüzden araç başlık satırını thead içinde, başlık hücrelerini scope özniteliğiyle üretir ve isterseniz tabloya caption (tablo başlığı) ekler.

Nasıl kullanılır?

1. Excel ya da Google E-Tablolar'da hücreleri seçip kopyalayın, "Hücreleri buraya yapıştırın" kutusuna yapıştırın ve "Tabloya aktar" düğmesine basın. CSV metniniz varsa aynı şekilde yapıştırın; ayırıcı otomatik bulunur.
2. Yapıştırmadan başlamak istemezseniz satır ve sütun sayısını yazın, hücreleri doğrudan düzenleme tablosunda doldurun.
3. Başlık satırı, başlık sütunu, zebra desen, kenarlık, renk ve hizayı seçin. Önizleme her değişiklikte güncellenir.
4. Gerekirse bir hücreye tıklayıp "sağdakiyle" ya da "alttakiyle birleştir" düğmesini kullanın.
5. HTML, Markdown ya da WordPress blok sekmesinden çıktıyı kopyalayın veya dosya olarak indirin.

Excel ve CSV'den yapıştırma

Excel'de hücreleri kopyaladığınızda panoya sekmeyle ayrılmış metin gelir: sütunlar sekme karakteriyle, satırlar satır sonuyla ayrılır. Araç bunu tanır ve her değeri doğru hücreye yerleştirir. Türkiye'de kaydedilen CSV dosyaları çoğunlukla noktalı virgül kullanır, çünkü virgül ondalık ayırıcıdır; yabancı kaynaklı dosyalarda ise virgül yaygındır. "Otomatik bul" seçeneği önce sekmeye, sonra noktalı virgüle, virgüle ve dikey çizgiye bakar. Yanlış tahmin ederse ayırıcıyı kendiniz seçip yeniden aktarabilirsiniz.

Çift tırnak içindeki değerler tek hücre sayılır; yani "Ankara, Türkiye" gibi virgül içeren bir metin bölünmez. Hücre içindeki satır sonları tek satırlık metin kutularına sığması için boşluğa çevrilir. Tablo en fazla 100 satır ve 20 sütun olabilir; daha büyük veri yapıştırırsanız ilk bölümü alınır ve size söylenir. Bu sınır, tarayıcının akıcı çalışması içindir; çok büyük listeler için tabloyu parçalara bölmek hem sayfa hızına hem okunabilirliğe yardımcı olur.

Başlık, hizalama, kenarlık ve zebra desen

Başlık satırı açıkken ilk satır thead bölümüne taşınır ve başlık rengiyle boyanır; yazı rengi, arka plana göre otomatik olarak beyaz ya da koyu seçilir, böylece okunaklı kalır. Başlık sütunu ise ilk sütundaki hücreleri satır başlığı olarak işaretler; ürün adı, ay adı gibi her satırı tanımlayan sütunlar için uygundur. Hizalama sütun bazında yapılır: metin sütunlarını sola, sayıları sağa, kısa kodları ortaya yaslamak okumayı kolaylaştırır. Para tutarlarını ve oranları sağa hizalamak, rakamların alt alta okunmasını sağlar.

Kenarlık için yok, ince ve kalın seçenekleri vardır; renk ve iç boşluğu da seçebilirsiniz. Zebra desen, sırayla değişen satır renkleriyle uzun listelerde gözün satırı kaybetmesini önler. Renk seçerken kontrasta dikkat edin: çok açık bir başlık rengi seçerseniz yazı koyulaşır, çok koyu seçerseniz beyaz olur; iki durumda da metin okunur kalır. Tüm ayarlar HTML'de, siteniz ya da e-posta programı hangi ortamda olursa olsun çalışacak biçimde yazılır.

Hücre birleştirme: colspan ve rowspan

Bazen tek bir başlığın birden çok sütunu kapsaması gerekir; örneğin "2026" başlığı altında Ocak, Şubat ve Mart sütunları gibi. Bunun için hücrenin üzerine tıklayıp "Seçiliyi sağdakiyle birleştir" düğmesine basın; araç colspan özniteliğini yazar. Aşağıdaki hücreyle birleştirmek için rowspan kullanılır. Birleşik hücrenin içeriği olarak yalnızca sol-üst hücrenin metni kullanılır; gizlenen hücrelerin metni silinmez, birleştirmeyi çözdüğünüzde geri gelir.

Birleştirmenin sınırları vardır. Başlık satırındaki bir hücre thead sınırını geçemeyeceği için aşağı birleştirilemez. Başka bir birleşik hücrenin içine taşan birleştirme de yapılmaz; araç bu durumda hangi hücrenin engel olduğunu Türkçe olarak açıklar. Markdown tablolar birleştirmeyi hiç desteklemez, WordPress'in çekirdek tablo bloğu da güvenilir biçimde desteklemez; bu yüzden birleşik hücre varsa WordPress çıktısı "Özel HTML" bloğu olarak üretilir.

Satır içi stil mi, class mı?

Satır içi stil, her hücrenin biçimini doğrudan style özniteliğine yazar. Kodu bir e-postaya, bir blog yazısı editörüne ya da stil dosyasına erişemediğiniz bir panele yapıştırıyorsanız en güvenli yoldur; çünkü tablo nereye giderse biçimi de onunla gider. Dezavantajı kodun uzun olmasıdır. Class seçeneği ise kodu kısa tutar ve biçimleri ayrı bir CSS bloğuna toplar; aynı biçimi siteniz boyunca birçok tabloda kullanacaksanız stil dosyanıza bir kez eklemeniz yeter. Sınıf adını istediğiniz gibi değiştirebilirsiniz; araç yalnızca harf, rakam, tire ve alt çizgi içeren geçerli adları kabul eder. Önizleme CSS'i yalnızca önizleme alanıyla sınırlıdır ve sayfanın kendi tasarımını etkilemez.

Markdown tablo biçimi

Markdown tabloları dikey çizgilerle yazılır: ilk satır başlıklar, ikinci satır ayırıcı, sonraki satırlar veridir. Ayırıcı satırdaki iki nokta üst üste işaretleri hizayı belirler: :--- sola, :---: ortaya, ---: sağa. GitHub, GitLab, birçok wiki ve not uygulaması bu söz dizimini destekler. Araç sütunları aynı genişliğe getirerek ham metnin okunabilir kalmasını sağlar, hücre içindeki dikey çizgileri kaçırır ve satır sonlarını <br> yapar. Başlık satırı kapalıysa Markdown, tabloyu başlıksız tanımadığı için boş bir başlık satırı yazılır.

WordPress blok tablo (wp:table) kullanımı

WordPress'in blok düzenleyicisi tabloları wp:table bloğu olarak saklar. Üretilen kod bu biçimdedir: bir blok yorumu, wp-block-table sınıflı bir figure ve içinde tablo. Kullanmak için yazı ya da sayfa düzenleyicisinde sağ üstteki üç nokta menüsünden "Kod düzenleyici" moduna geçin, kodu istediğiniz yere yapıştırın ve görsel düzenleyiciye dönün; tablo normal bir blok olarak görünür ve oradan düzenlenebilir. Menü adları WordPress sürümüne göre değişebilir. Zebra desen seçiliyse çıktı WordPress'in "Çizgili" tablo stilini kullanır; renkler ve kenarlıklar ise temanızdan gelir. Birleşik hücre varsa kod "Özel HTML" bloğuna yazılır; bu durumda tabloyu görsel olarak değil, HTML olarak düzenlersiniz.

Mobilde taşan tablolar

Çok sütunlu tablolar telefon ekranına sığmaz. "Dar ekranda yatay kaydırma kutusu ekle" seçeneği tabloyu overflow-x:auto özellikli bir kutuya sarar; böylece tablo sayfayı genişletmez, ziyaretçi tabloyu parmağıyla yana kaydırır. Sütun sayısı fazlaysa başlıkları kısa tutmak ve gereksiz sütunları çıkarmak da mobil deneyimi iyileştirir.

Neden Bilişim Ajans aracı?

• Veri gönderilmez. Yapıştırdığınız tablo yalnızca tarayıcınızda işlenir; hiçbir sunucuya yazılmaz.
• Üç çıktı tek yerde. HTML, Markdown ve WordPress blok kodu aynı tablodan üretilir.
• Güvenli kod. Hücre metinleri kaçırılır; hücreye yazılan etiketler sayfayı bozamaz, betik çalıştıramaz.
• Çevrimdışı çalışır. Sayfa yüklendikten sonra internetsiz de kullanılabilir.
• Gerçekten ücretsiz. Kayıt, sınır ve "premium" tuzağı yok.

Sık sorulan sorular

İlgili araçlar

• CSV - Excel Dönüştürücü
• Markdown - HTML Dönüştürücü
• HTML - Markdown Dönüştürücü
• CSV - JSON Dönüştürücü

Web sitenizin tasarım ve içerik çalışmaları için Bilişim Ajans ekibinden destek alabilirsiniz.