HTML Tablo: Onlar hakkında bilinmesi gereken her şey
WPDatatables yaptığımız gerçeğinden yola çıkarak, artık masayı sevdiğimiz bir sır değil. Yeni başlayanlara yardımcı olmak için onlar hakkında uzun bir makale yazıyoruz ve HTML tabloları hakkında bilgi edinmek istiyoruz. HTML tablosu, elektronik tablo yazılımında makul verileri görüntülemek için kullanılır. Satırlardan ve sütunlardan oluşurlar ve genellikle sekmeli verileri etkin bir şekilde görüntülemek için web sitelerinde kullanılır. O zaman HTML’de bir masa nasıl yapılır? Ne zaman kullanmalı ve neden? İyi HTML tablolarının örnekleri nelerdir? Bugün, HTML tablosu hakkında bilinmesi gereken her şeyi anlamanıza yardımcı olmak için bu soruları ve daha fazlasını cevaplayacağız.
İçerik Listesi
Tablo Giriş
Masa Düzenlemesi
SSS HTML tablosu
Html masa yapıcısı
HTML tablosunun tanıtımı, verileri (metin, resimler, bağlantılar vb.) Tablo tasarımına ayarlamak için kullanılır – temel olarak satırlar ve sütunlar. HTML’de tabloyu ne zaman kullanacağınız, e -tabloda en iyi görünecek verileri ayarlamak istediğinizde mantıklıdır. HTML tablosu, finansal veriler, takvimler, fiyatlar, karşılaştırmalar, beslenme gerçekleri bilgi panelleri, bowling puanları ve diğer birçok tablo verisi gibi şeyleri görüntülemenin iyi bir yoludur. Masanın semantik olmadığını duymuş olmanız ihtimali var. Ancak, bu tamamen yanlıştı. Anlamsal tablo tablo verilerini gösterir ve bu tür verileri görüntülemek için en iyi seçimdir.
Bazı veriler masada iyi görünürken tablo kullanmayacağında, sadece mantıklı olmadığı için böyle düzenlenmemesi gereken şeyler vardır. Mümkünse önlenmesi gereken başka uygunsuz CSS tabloları da vardır. Örneğin, düzenler için bir tablo kullanmamalısınız. Sorun, semantik tablo öğelerinin tablo verilerini tanımlaması ve başka amaçlar için kullanmak, semantik görevlerin ihlalidir. Genel kural, web sitelerine erişilmesi gerektiğidir. Erişilebilirliğin bir kısmı, masayı yukarıdan aşağıya, soldan sağa okuyan ekran okuyucudur. HTML’deki tablo ile, saha sunumunun sırası, erişilebilirlik seçeneği değil, görsel bir seçim ile belirlenir. Bu gibi durumlarda, ekran okuyucuları her zaman istediğiniz gibi çalışmaz. Bu durumda, bir tablo tablonun kaynak sırasına göre öncelikli olduğunu belirleyecektir. Sadece erişilebilirlik için kötü değil, aynı zamanda SEO da acı çekecektir çünkü ana içerik gündemde olmayacaktır. Bazı problemler HTML tablo etiketindeki semantik etiketlerle çözülebilir, ancak bu da çift HTML kullanmak anlamına gelir. Yapılacak en iyi şey, düzen için bir tablo kullanmak değil, gerçekten ısrar ederseniz, bunu göstermek için masada aria = “sunum” rolünü kullanın.
HTML tablo öğesi genellikle amacının kısa bir açıklaması ile donatılmıştır. Bazen, Braille tabanlı kullanıcı -speech veya kullanıcı aracıları kullanan kişilerin yararına özet bir öznitelik yoluyla daha ayrıntılı bir açıklama verilir. Bkz. Codepen’deki Ahmad Awais (@AHMADAWAIS) tarafından bkz. Tablo çizgileri baş, bacaklar ve vücut parçaları olarak gruplandırılabilir (thead, tfoot ve tbody unsurları aracılığıyla). Kullanıcı aracısı, vücut parçalarının rulosunu baş ve bacaklardan bağımsız olarak desteklemek için kafa/gövde/ayak bölümünü kullanabilir. Uzun bir HTML tablosu yazdırdığımızda, tabloyu içeren her sayfada genellikle kafa ve ayak bilgileri görüntülenir. Daha fazla yapısal bilgi sağlamak istiyorsanız, sütunları da gruplandırabilirsiniz. Buna ek olarak, sütun özelliği, Colgroup ve Colloup öğeleri kullanılarak tablo tanımının başında bildirilebilir. Tablo hücreleri başlık ve/veya veri bilgileri içerir ve birkaç sütun ve satıra ulaşabilir. Her hücreyi HTML 4 tablo modu ile etiketlediğinizde, görsel olmayan kullanıcı ajanları kullanıcılara daha kolay bilgi iletebilir. Bu sadece engelli kullanıcılar için yararlı değildir, aynı zamanda kablosuz tarayıcı sermayesinin HTML tablolarını işlemek için sınırlı ekran özelliklerine sahip olmasına izin verir.
HTML tablosunun düzen için kullanılmaması gerektiğini belirttik. Bunun yerine, daha iyi sonuçlar ve daha iyi erişilebilirlik elde etmek için gerektiğinde bir stil sayfası kullanmalısınız. Kafa ve Vücut HTML tablo stilinin temel örneğini görelim: Codepen’deki Tommy Hodgins’in (@tomhodgins) temel tablo tarzı kalemine bakın. Bir kişiyi görmek için bir satır (yatay) ve onlar hakkında ilgili bilgiler gördüğünüzü düşünün. Sütuna (dikey) yukarı ve aşağı baktığınızda, çeşitlilik veya veri kalıpları hissedeceksiniz. İlk satır tablo başlığıdır ve veri içermez – yalnızca sütun başlığı. Anlamsal olarak, ilk
ile çakışır, tablonun altbilgisini gösteren satır tablosunu sarmak için vardır. gibi, semantik göstermek için en iyisi bir veri hattı değil, ek bilgidir. Yerleştirme HTML’de benzersiz çünkü ‘den sonra ve
‘ den önce görünür! Dolayısıyla, sonunda bulmak mantıklı görünse de, aslında böyle değil. Altbilgi tabloyu anlamak için gereken bilgileri içerdiğinden, altbilgi daha iyi erişilebilirlik için kaynaklar sırasına göre verilerin önüne yerleştirilir.
Altbilgi tablosu, örneğin başlığı tekrarlamak için uzun HTML tablosunda kullanılabilir. Ancak başka amaçlar için de kullanılabilir, örneğin, elemanın konumunun ihtiyaçlara bağlı olarak aşağıdan yukarıya atladığı bir düzen ile. Tablo öğeleri ve öznitelikleri
html etiketleri
elementler, tablo sütununun içeriğinin bir özetini içeren bir veya daha fazla öğeyi
ve
öğesi,
tag html özniteliği
düzeltmek
Valign
öğesi HTML tablosuna bilgi eklemek için kullanılır. HTML belgesinde, ebeveyninin ilk türevi olarak görünmelidir, ancak masanın altına CSS ile görsel olarak konumlandırılabilir. Colly öznitelik renkleri
düzeltmek
BG rengi
geniş
Genellikle
- öğesi, HTML tablosundaki sütunları hedeflemek için kullanılabilir. Colgroup Nitelikleri
düzeltmek
ulaşmak
geniş
- öğesi için bir üst kap olarak kullanılır. Temel Stil Codepen’de Alassetter (@Alassetter) tarafından kalem veri tablosuna bakınız. Masanın farklı renkleri ve çizgileri varsa farklı masa parçalarını ayırt etmek kolaydır. CSS tablo sınırı başka bir genel unsurdur. Varsayılan olarak, tüm tablo hücreleri 2 pikseldir. İlk sıra ve diğeri arasında,
ve
için uygulanan varsayılan sınır alanlarının neden olduğu biraz daha fazla boşluk göreceksiniz. Mesafeyi kontrol edebilirsiniz: Tablo {sınır aralığı: 0.5rem;} veya sadece alanı siliyorsunuz: Tablo {Border-Clapse: çöküş;} HTML tablo dolguları, html tablo başlıkları, sınırlar ve
Sol Flat, HTML tablonuzu düzenlemenin basit ama etkili bir yoludur. Stil kuralı CSS tablosu için önemlidir ve doğru kullanırsanız özellik düzgün çalışıyor. Ancak, hatırlanması gereken bazı detaylar var. Örneğin, tabloya belirli bir yazı tipi ailesini uygularsanız, ancak farklı hücreler kazanır çünkü içinde metinle gerçek bir unsurdur. Bu özellik, tablo öğeleri veya tablo öğelerindeki benzersiz davranışlar için benzersizdir. Dikey-Hangit Olası Değerler: Taban çizgisi, alt, süper, metin üstü, metin alt, orta, üst, alt, %, uzunlukla uyumlu içerik. Sadece bu bağlamda mantıklı olan üst/alt/orta kısım olsa da, masada çok iyi çalışın. Beyaz boşluk mümkündür: normal, ön, nowrap, önceden sarılmış, metnin hücrelere nasıl sarıldığını kontrol eder. Bazı verilerin mantıklı olması için her şeye bir satıra ihtiyacı olabilir. Olası değer sınırının çökmesi: limitin kendi içine çöküp çökmediğini belirlemek için tabloya ayrı olarak uygulanır (sadece iki yönde çökme marjı gibi). Ya çöken iki sınır çelişkili bir stile sahipse (renk gibi)? Bu tür bir öğeye uygulanan stil, “Güç” sırasına göre “kazanacak”
: Hücreler, sıralar, satır grupları, sütunlar, sütun grupları, tablolar. Olası Boşluk Alanları: Uzunluk Sınır-Colrapse ayrısa, hücrelere birbirinden ne kadar uzaklık verilmesi gerektiğini belirleyebilirsiniz. Modern Hücre Geçiş Nitelikleri. Ve bunun hakkında konuşurken, dolgu Cellpadding özelliklerinin modern bir versiyonudur. Olası genişlik: Genişlik uzunluğu, bir tür çatışma olmadıkça, sandığınız gibi masa hücrelerinde çalışır. Örneğin, masanın kendisine 400 piksel genişlik olduğunu söylerseniz, üç hücre sırasından 100 piksel genişliğe ilk hücre ve diğerlerini terk ederseniz, ilk hücre 100px genişliğinde ve diğer ikisi kalan alanı bölecektir. . Ancak, üçünü genişliğin 200px olacak şekilde söylerseniz, masa 400 piksel kalacak ve alanın sadece üçte bir üçte bir verecektir. Beyaz boşluk veya görüntüler gibi unsurların oynamadığı varsayılarak. Sınırlı olası değerler: Sınırın uzunluğu, tablonun bir unsurunda ve neredeyse beklediğiniz gibi çalışır. Sınırı yıktığınızda gariplik gelir. Bu durumda, tüm tablo hücrelerinin beklediğiniz ikisi (ilk hücrenin sınırları ve bir sonraki hücrenin sınırları) değil, aralarında sadece bir sınır genişliği olacaktır. Sınırı kanıtlanmış bir ortamda çıkarmak için, iki hücre onu silmek için “kabul etmeli” olmalıdır. TD gibi: nth-child (2) {sınır-sağ: 0; } Td: nth-child (3) {sınır-sol: 0;
} Değilse, kaynağın dizisi/özgüllüğü, hangi kenar üzerinde görüntülenen sınırların görüntülenir. Tablo değerinin olası düzeni: otomatik, otomatik olarak otomatik olarak varsayılandır. Tablo ve hücrelerin genişliği içindeki içeriğe bağlıdır. Sabit olarak değiştirirseniz, tablonun ve sütunun genişliği, tablo elemanlarının ve sütunların genişliği veya hücrenin ilk sıra genişliği ile düzenlenir. Bir sonraki satırdaki hücreler, oluşturmayı hızlandırabilen kolonun genişliğini etkilemez. Bir sonraki hücredeki içerik uygun değilse, taşma özelliği ne olduğunu belirler. Tablo sınırı bkz. COMAPEN’deki Jordy Van Raaij (@JordyVanraaij) tarafından Duyarlı Tablo Çözümü. CSS sınır tablosu tabloyu görüntülemeyi kolaylaştırır ve aynı zamanda sınırı görüntülemek için en iyi yöntemdir. HTML belgenizdeki tablo sınırını, TH ve TD öğesini görüntülemek için kafa öğesinde bulunan etiketine stil ekleyin. Hücreleri Bağlama Bağlı hücrelerin nasıl çalıştığını anlamak için, herhangi bir tablo hücre öğesinde kullanılabilecek iki niteliği açıklamamız gerekir: HTML rowspan ve HTML Colspan. TD’nin bir Colspan 2 varsa (yani
) hala tek bir hücre olmasına rağmen yatay olarak bir sırada iki hücre işgal edecektir. Aynı şey rowpan için de geçerlidir, ancak dikey olarak. Sütun hattan farklı bir şekilde gruplandırıldığı için rowspan’ın anlaşılması biraz daha zordur. Örneğin, Colspan ile, sadece hattaki her masa hücresi için değeri toplayarak nihai değeri elde edersiniz. Öte yandan, rowpan ile aşağıdaki çizgi tablonun hücre sayısına +1 alır ve hattı tamamlamak için daha az tablo hücresi gerektirir. Nestable Tablo Codepen’deki Theun (@tjoen) tarafından takılan iç içe masaya bir referansa bakın. “Gerekli tablo”, başka bir tabloya yapılabilecek bir tablo yerleştirmek anlamına gelir, ancak öğelerine sahip eksiksiz bir yapı eklemeniz gerekir. Ancak, kafa karıştırıcı işaretleme ve daha kötü erişilebilirlik nedeniyle en iyi fikir olmayabilir. Ancak, bunun kesinlikle gerekli olduğu durumlar vardır ve evet, yapılabilir. Örneğin, diğer kaynaklardan içerik içe aktarmanız gerekiyorsa, tabloyu içe aktarabilir ve masanıza koyabilirsiniz.
Zebra hat masası, Codepen’deki Mario Loncarek (@Rogrande) tarafından kalemle dolu geniş bir zebra masasına bakın. Renk, kullanıcıların masada aradıklarını kolayca bulmaları için çok yararlıdır. Arka plan rengini tablo hücre öğesine ayarlayabilir veya tablonun satırına ayarlayabilirsiniz. Bu en temel örnektir: tbody tr: nth-child (tek) {arka plan: #eee; } Arka plan: #eee; } TBody’yi kullanmak, üstbilgi ve altbilgi satırlarını silmek istemiyorsanız kullanışlıdır. Aşağıda olana izin vermek istemiyorsanız, eşit çizgiyi de ayarlayabilirsiniz. Anlamayan bir tarayıcıyı desteklemeniz gerekiyorsa: nth-child () (çok eski), bunu yapmak için jQuery kullanabilirsiniz. Sıraları ve sütunları vurgulamak, Codepen’deki Azamat Mukhiddinov (@Azamatms) tarafından veri verilebilir tarafından sıralanabilen kalemi görün. Çizgiyi vurgulamak oldukça kolaydır; Gereken tek şey satırlara sınıf adları eklemektir. Sütunu vurgulamak ise biraz daha fazla çaba gerektirir. Seçilen sütunda görünen hücreler için kuvveti ayarlamanızı sağlayan
- öğesini kullanabilirsiniz. Örneğin, her satırda 4 sütunlu tabloların 4 elemanı bulunmalıdır. HTML tabloları nasıl odaklanır HTML’de bir tablo nasıl odaklanır? Bu soru, ilk HTML tablolarını tasarlayan insanlar arasında oldukça yaygındır. Sorun metindir -Align: Center tabloya bir bütün olarak odaklanmaz – sadece metni hücreye odaklar. Tüm tabloyu odaklamak, sol ve sağ kenar boşluklarının otomatik olarak düzenlenmesini gerektirir ve üst ve alt kenar boşlukları ihtiyacınız olan değere ayarlanır. Masanızın üst ve alt kenarının boş bir çizgi (1em) olmasını istediğinizi varsayalım. Etikette CSS kodu Basitçe söylemek gerekirse:
| için yüzde değerini kullanabilir miyim? ?HTML 3.2 ve HTML 4.0 spesifikasyonları yalnızca TD elemanı genişliği özniteliği için tamsayı değerlerine (bir dizi piksel temsil eder) sağlar.Öte yandan DTD HTML 4.0, tamsayı olmayan değerlere (yüzde gibi) izin verir, böylece HTML doğrulayıcısı | hakkında şikayet etmez.Microsoft’un Netscape ve tarayıcının | için yüzde değerini farklı şekilde yorumladığını unutmayın.Öte yandan, ile birleştirildiğinde yorum (ve diğer masa-aawars tarayıcısının yorumlanması) uygundur.Bu gibi durumlarda, genel özellikler tarafından yasaklanmasına rağmen, yüzde değer güvenli bir şekilde kullanılabilir.Neden Tam tarayıcı genişliği kullanmıyor musunuz? İçerik ve ekran alanının kenarı arasındaki marj, grafik tarayıcısı ile oldukça dardır. Navigator her zaman sağdaki kaydırma çubuğu için yer bırakır. Ancak, belge piyasaya sürülecek kadar uzun olmadığında, kaydırma çubuğu görünmez ve bu da sağda silinemeyecek bir marja sahip olur. Masamdan önce veya sonra neden ekstra bir alan var? Geçersiz bir HTML sözdizimi, HTML tablosundan önce ve sonra ekstra alana neden olabilir. En yaygın neden tablodaki gevşek içeriktir (yani TD veya TH öğelerinde olmayan içerik). Gevşek içerik söz konusu olduğunda, bunu idare etmenin standart bir yolu yoktur. Bazı tarayıcılar tablodan önce veya sonra görüntüler. Serbest içerik yalnızca birkaç sıradan veya boş paragraf içerdiğinde, tüm bu boş alanlar tablonun kendisinden önce veya sonra görüntülenir. Çözüm, HTML sözdizimi hatalarını düzeltmektir. Tablodaki tüm içerikler TD veya TH öğelerinde olmalıdır. Düzen için bir tablo kullanmakta bir sorun var mı? Kısa cevap – evet. Tarayıcı tabloları görüntüleyebilir, özellikle yükseklik veya genişlik özniteliklerinin bilinmesi gerekir. Sorun şu ki, tüm tabloların oluşturulmadan önce bilinen boyutlarla indirilmesi gerektiğidir. Yukarıda belirtilen özellikler bilinmiyorsa, oluşturma işlemi ertelenebilir. Buna ek olarak, bir tablo içeriği kullanılabilir ekran alanı için çok genişse, tablo çok büyük içeriği görüntülemek için gerilmelidir. İçeriğin geri kalanı, mevcut ekran alanını ayarlamak yerine büyük tabloya uyacak şekilde ayarlanır. Sonuç olarak, kullanıcıların içeriği okuyabilmek için yatay olarak kaydırmaları gerekir. Yazdırma sürümü de kesilebilir. İçerik beklenenden daha dar bir ekranda görülürse, hareketsiz genişliğe sahip tablo, diğer büyük tablolarla aynı soruna neden olur. Ekran beklenenden daha genişse, ekranın çoğu çok geniş bir marjla boşa harcanacaktır. Okuyucunun daha büyük bir yazı tipine ihtiyacı varsa, içerik satır başına yalnızca birkaç kelime ile görüntülenir. Hatırlanması gereken en önemli şeylerden biri doğru sözdizimidir. Tarayıcı geçersiz sözdizimi ile iyi çalışmaz. Yuvalanmış tablo, Netscape Navigator sürümündeki doğru sözdizimi ile doğru görüntülenemez. Daha sonra tabloyu tamamen görmezden gelen bazı tarayıcılar da var, bu da HTML tablosu ile yapılan düzeni de göz ardı edecekleri anlamına geliyor. Ayrıca, arama motorları da görmezden gelir. Arama sonuçlarında genellikle gördüğünüz şey genellikle belgenin başındaki metindir.
…
altyazının amacı, tablo içeriğinin bir açıklamasını içermektir.Bu, okuyucuya, tablonun aradıkları içeriği içerip içermediğinin kısa bir resmini verir.Bununla birlikte, bu, tablonun ne olduğunu fark etmeden önce ekran okuyucuların çok fazla masa içeriği okumadan kaçınabilen kör kullanıcılar için çok kullanışlıdır.Başlık, etiketin hemen altına yerleştirilir.Not: Özet özniteliği, bir açıklama vermek için öğesinde de kullanılabilir – bu da ekran okuyucusu tarafından okunur. öğesini kullanmanızı öneririz Bunun yerine, özet artık HTML5 tablo özellikleri tarafından kullanılmadığı ve sayfada görünmediği için. En iyi HTML tablo üreticisi HTML tablo kodlarından oluşan bir koleksiyonla uğraşmak istemiyorsanız, iyi bir masa üreticisi kullanarak çok yararlı olabilir. Bunun gibi araçlarla HTML’de bir tablo oluşturmak dil gelişimi hakkında bilgi gerektirmez ve bu oldukça hızlı ve basittir. Buna ek olarak, bunun gibi en iyi araçların çoğu gerçekten ücretsizdir ve herkes bunu kullanabilir. Temel olarak, tek yapmanız gereken verileri içe aktarmak, tabloyu ayarlamaktır (örneğin, HTML tablo sınır kuvveti, HTML tablo formatı, CSS tablo genişliği, CSS tablo arka plan rengi, hücre yatakları, vb.) Bunu bitirdikten sonra , jeneratörler size web sitenize yeterince kopyalayıp yapıştırdığınız HTML tablo kodunu verecektir. Basit. Başlangıçtan itibaren bir masa tasarlayan HTML tablo üreticisini neden kullanmanız kolay bir iş değil. Mükemmel bir şekilde işlev görmesini ağır bir mücadele ve çok zaman ve çaba gerektirir – sonuçların genellikle mükemmelden daha az bittiğini belirtmemek. Not defterinizle satır ve kod satırları yazmak yerine, doğru HTML tablo üreticisiyle çok fazla zaman ve sorundan tasarruf edebilirsiniz. Sadece daha kolay değil, sonuçlar genellikle her şeyi kendiniz inşa etmeye çalıştığınızdan daha iyidir. Sizi ne kadar kurtaracağından bahsetmiyorum ve hepimiz zamanın para olduğunu biliyoruz. En iyi çevrimiçi HTML masa üreticisi HTML masa üreticisi çok kullanışlıdır.Kullanımı kolay ve en çok beğendiğiniz temayı seçmenize izin verir.Bunun hakkında daha fazla bilgi için resmi web sitesinde öğrenebilirsiniz.Basit ve kullanımı kolay Dukunalatalat.Truruken Truben, her türlü HTML tablosunun hızlı ve kolay bir şekilde yapmanızı sağlar.Html tablosu Çalışan pratik araçlar kelime işlemeye benzer.Bu, ücretsiz güzel bir masa oluşturmanızı sağlar.CSS masa üreticisi Görüntü kullanmadan şık tablolar yapmak için harika bir araç.Masa Stilisti CSS tablo öğesini kullanın ve bu çevrimiçi araçla güzel bir HTML tablosu oluşturun.Metin kırıcı En sevdiğiniz tablo stilini oluşturmak için basit bir araç.Katılım
En basit araçlardan biri;Biraz teknik bilgi ve/veya yavaş internet bağlantısı olan insanlar için mükemmeldir.Rapidtables
Bu araç, harika bir HTML tablosu yapmak ve yapmak için çeşitli seçeneklerle birlikte gelir.masa üreticisi
 |
