Softonic

HTML Tablo Oluşturucu

Yapıştırdığınız veriler, hücre içerikleri ve oluşturulan HTML bu tarayıcıda kalır. Adımlar arasında bu sekmenin oturum depolaması kullanılır; değerler sunucularımız üzerinden gönderilmez veya URL'ye eklenmez.

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 sentaksi 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 sales figures</caption>
  <thead>
    <tr>
      <th scope="col">Region</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

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.

Renk Paleti Jeneratörü

Temel bir HEX renginden monokromatik, analog, tamamlayıcı, triadik veya tetradik paletler oluşturun ve kopyalamaya hazır CSS değişkenleri alın.

İkiliden Sekizliye Dönüştürücü

Bitleri üçer üçer gruplayarak ikiliyi sekizliye dönüştürün. Unix izinleri, eski sistemler ve kompakt sayısal gösterim için yararlıdır.

HEX Renk Seçici

HEX rengi seçin veya girin; RGB, HSL, yaklaşık CMYK, bağıl parlaklık ve beyaz-siyah kontrast oranlarını görün.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

JSON Biçimlendirici

JSON metnini 2 veya 4 boşlukla okunabilir hale getirmek, kompakt çıktıya küçültmek ya da sonucu kopyalamadan önce söz dizimini hızlıca kontrol etmek için yapıştırın.