Softonic

HTML Tablo Oluşturucu

Adım 1 / 4

Tırnak içindeki CSV alanları, elektronik tablo sekmeleri, noktalı virgülle ayrılmış satırlar ve Markdown ayırıcı satırları desteklenir. En fazla 50 satır, 20 sütun ve hücre başına 1.000 karakter.

Tablo verileri
Tablo verileri

On satırlık bir veri kümesi için <table>, <thead>, <tbody> ve <tr> etiketlerini elle yazmak oldukça zahmetlidir. Sekmeyle ayrılmış, CSV veya Markdown tablo verilerini yapıştırın; bu oluşturucu, semantik etiketler, isteğe bağlı <caption>, doğru scope öznitelikleri ve zebra deseni, kenarlık ya da Tailwind sınıfları arasından bir seçimle iyi yapılandırılmış HTML üretir, bir makaleye veya panele doğrudan yerleştirmeye hazır.

Bir HTML tablosu nasıl oluştururuz?

  1. 1

    Verilerinizi yapıştırın

    TSV (elektronik tablodan alınan kopya), CSV veya Markdown tablo sözdizimi tam olarak doğru şekilde analiz edilir.

  2. 2

    Tablo seçeneklerini belirleyin

    Başlık satırı, başlık metni (caption), zebra deseni, kompakt veya ferah satırlar.

  3. 3

    Stil modunu seçin

    Sade HTML, satır içi stiller, Bootstrap sınıfları veya Tailwind sınıfları.

  4. 4

    İşaretlemeyi kopyalayın

    Sonuç geçerli, semantik bir HTML'dir; tablo gibi görünen bir `<div>` ızgarası değildir.

Semantik tablo yapısı

Uygun etiketlerle oluşturulan tablolar erişilebilir, ekran okuyucularıyla uyumlu ve stillendirmesi kolaydır. Oluşturucu aşağıdaki yapıyı üretir:

<table>
  <caption>Q1 satış rakamları</caption>
  <thead>
    <tr>
      <th scope="col">Bölge</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">EU</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

Elementler ve rolleri

Element Amacı
<caption> Tablo özetidir; ekran okuyucuları tarafından ilk olarak okunur
<thead> Sütun başlıkları, gövdeden ayrı olarak renderlenir
<tbody> Veri satırları
<tfoot> Toplamlar ve alt notlar, kodun konumundan bağımsız olarak alt kısmına yerleştirilir
<th scope="col"> Sütun başlığı
<th scope="row"> Satır başlığı (örneğin her satırın ilk hücresi)
<td> Veri hücresi

Duyarlı desenler

  • Yatay kaydırma: tabloyu <div style="overflow-x:auto"> içine sararak dar görünüm alanlarında düzeni bozmadan kaydırılmasını sağlayın.
  • Mobilde yığma: başlıkları data-label öznitelikleri olarak yineleyin ve CSS ile satırları dikey kartlara dönüştürün, küçük veri kümeleri için uygundur.
  • Izgarayla yeniden akıtma: karmaşık tablolar CSS Grid ile yeniden oluşturulabilir, ancak yerleşik klavye gezinmesi kaybolur; yalnızca kontrol panelleri için uygundur.

Erişilebilirlik kontrol listesi

  • Her <th> bir scope özniteliğine sahiptir.
  • Karmaşık hücre birleştirmelerinde veri hücrelerini başlık tanımlayıcılarına bağlamak için headers="..." kullanın.
  • Başlık metni (caption), tablonun amacını özetler.
  • Görsel düzen için tablo kullanmayın; bunun yerine CSS Grid veya Flexbox kullanın.

Sık Sorulan Sorular

Evet. Elektronik tablonun pano verisi TSV (sekmeyle ayrılmış) biçimindedir ve oluşturucu bu biçimi doğrudan işler. Satırlar <tr>, sekmeyle ayrılmış hücreler ise <td> olur.

Kontrol ettiğiniz her şey için CSS sınıfları; e-postalar için satır içi stiller (dış stil sayfalarının çoğu zaman engellendiği yerlerde). Bootstrap ve Tailwind modları, bu çerçeveler için kullanıma hazır sınıf işaretlemesi üretir.

Otomatik olarak birleştirmez. İçe aktarılan her değer ayrı bir hücre olur. HTML kodunu kopyaladıktan sonra colspan veya rowspan değerlerini kendiniz ekleyin ve birleştirilmiş hücrelerde id ile headers öznitelikleri gerekebileceğinden başlık ilişkilerini gözden geçirin.

Evet, scope="col" ve scope="row" öznitelikleri eklenir ve bir başlık metni sağladığınızda <caption> oluşturulur. Karmaşık tablolar için ekran okuyucu veya axe DevTools eklentisi ile doğrulayın.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

CSS Fiyat Tablosu Oluşturucu

HTML + CSS ile tek bir fiyat kartı oluşturun: paket adı, fiyat ve marka vurgu rengi. Kodu açılış sayfanıza kopyalayın.

Araç diğer dillerde mevcuttur