Skip to content

HTML TABLE Öğe Niteliklerini Kullanma

30 de Mayıs de 2021

HTML tablosu özellikleri size HTML tabloları üzerinde çok daha fazla kontrol sağlar. Tabloları daha ilginç hale getirmek ve sayfanızın görünümünü değiştirmek için birçok özellik mevcuttur.

HTML TABLE Öğe Nitelikleri

HTML5’te öğe, global öznitelikleri ve bir başka özniteliği kullanır ve yalnızca 1 değerine veya boşa (yani border = “”) sahip olacak şekilde değiştirilmiştir. Eğer kenarlığın genişliğini değiştirmek istiyorsanız border-width CSS özelliğini kullanmalısınız. Geçerli HTML5 tablo öznitelikleri hakkında bilgi edinmek için aşağıya bakın. HTML5’te geçersiz hale gelen HTML 4.01 belirtiminin parçası olan birkaç öznitelik de vardır:

  • —Tablonun TD ve TH öğelerinde CSS dolgu özelliğini kullanın.
  • —Tabloda kenar boşluğu CSS özelliğini kullanın.
  • —Sınır rengi CSS stillerini kullanın: siyah; ve masanın üzerinde sınır tarzı.
  • – CSS stillerini kullanın border-color: siyah; ve tablonun uygun elemanları üzerinde kenarlık stili.
  • —Bunun yerine, tablonun yapısını bir BAŞLIK içinde tarif etmeli veya tüm tabloyu bir ŞEKİL’e koymalı ve bir ŞEKİLDE tanımlamalısınız. Alternatif olarak, tablonun yapısını açıklamaya gerek kalmayacak şekilde basitleştirebilirsiniz.
  • —CSS genişlik özelliğini kullanın.

Ve HTML 4.01’de kullanımdan kaldırılan ve HTML5’te de kullanılmayan bir özellik.

  • align—Bunun yerine CSS kenar boşluğu özelliğini kullanın.

Ayrıca, herhangi bir HTML spesifikasyonunun parçası olmayan birkaç nitelik de vardır. Desteklediğiniz tarayıcıların bunları işleyebileceğini biliyorsanız ve geçerli HTML ile ilgilenmiyorsanız bu öznitelikleri kullanın.

  • —Bunun yerine arka plan rengi CSS özelliğini kullanın.
  • bordercolor—Bunun yerine border-color CSS özelliğini kullanın.
  • bordercolorlight – Bunun yerine, border-color CSS özelliğini kullanın.
  • bordercolordark—Bunun yerine border-color CSS özelliğini kullanın.
  • cols—Bu özelliğin alternatifi yoktur.
  • yükseklik—Bunun yerine CSS özelliği yüksekliği kullanın.
  • —Bunun yerine CSS özellik marjını kullanın.
  • —Bunun yerine CSS özelliği boşluk özelliğini kullanın.
  • —Bunun yerine dikey hizalama CSS özelliğini kullanın.

HTML5 TABLE Öğe Özellikleri

Yukarıda bahsettiğimiz gibi, bir HTML5 TABLE öğesinde geçerli olan global özniteliklerin ötesinde yalnızca bir öznitelik vardır: border. border niteliği, tüm tablonun ve içindeki tüm hücrelerin etrafında bir sınır tanımlamak için kullanılır. HTML5 spesifikasyonuna dahil edilip edilmeyeceğine dair bazı sorular vardı, ancak stil çıkarımlarının ötesinde tablo yapısı hakkında bilgi sağladığı için kaldı. Border niteliğini eklemek için, kenarlık varsa değeri 1, yoksa boş (veya özelliğin dışında) olarak ayarlarsınız. Çoğu tarayıcı, kenarlık olmaması için 0’ı ve kenarlığın genişliğini piksel olarak bildirmek için başka bir tam sayı değerini (2, 3, 30, 500, vb.) Destekler, ancak bu HTML5’te artık kullanılmamaktadır. Bunun yerine, kenarlık genişliğini ve diğer stilleri tanımlamak için CSS kenarlık stili özelliklerini kullanmalısınız. Kenarlıklı bir tablo oluşturmak için şunu yazın:

kenarlık=”1″>

Bu kenarlıklı bir tablo

type=”code”> Bu, HTML 4.01’de geçerli olan ancak HTML5’te kullanılmayan TABLE özniteliklerini açıklar. Hâlâ HTML 4.01 belgeleri yazıyorsanız, bu öznitelikleri kullanabilirsiniz, ancak çoğu, HTML5’e geçtiğinizde sayfalarınızı geleceğe daha dayanıklı hale getirecek alternatiflere sahiptir.

Geçerli HTML 4.01 Nitelikleri

Yukarıda tanımladığımız özellik. HTML 4.01’in HTML5’ten tek farkı, sınırın genişliğini piksel olarak tanımlamak için herhangi bir tamsayı (0, 1, 2, 15, 20, 200, vb.) belirtebilmenizdir. 5 piksel kenarlıklı bir tablo oluşturmak için şunu yazın: border=”5″>

Bu tablonun 5px sınırı vardır.

type = “code”> Özellik, hücre kenarlıkları ile hücrenin içeriği arasındaki boşluk miktarını tanımlar. Varsayılan, iki pikseldir. İçerik ve kenarlıklar arasında boşluk olmasını istemiyorsanız, hücre dolgusunu 0 olarak ayarlayın. Hücre dolgusunu 20’ye ayarlamak için şunu yazın: cellpadding=”20″>

Bu tablonun hücre dolgusu 20’dir.

Hücre sınırları 20 piksel ile ayrılacaktır.

type=”code”> Hücre dolgulu bir tablo örneğini görüntüleyin Nitelik, tablo hücreleri ile hücre içeriği arasındaki boşluk miktarını tanımlar. Hücre doldurma gibi, varsayılan değer iki piksele ayarlanmıştır, bu nedenle hücre aralığı istemiyorsanız bunu 0’a ayarlamanız gerekir. Bir tabloya hücre aralığı eklemek için şunu yazın: cellpacing=”20″>

Bu tablonun hücre aralığı 20’dir.

Hücreler 20 piksel ile ayrılacaktır.

type = “code”> Özellik, bir tablonun dışını çevreleyen sınırın hangi bölümlerinin görünür olacağını tanımlar. Masanızı dört taraftan, herhangi bir taraftan, yukarıdan ve aşağıdan, soldan ve sağdan veya hiçbirinden çerçeveleyebilirsiniz. Yalnızca sol kenar sınırına sahip bir tablonun HTML’si:

çerçeve = “lhs”>

Bu masa

sahip olacak

sadece

sol taraf çerçeveli.

type=”code”> Ve alt çerçeveye sahip başka bir örnek:

çerçeve=”aşağıda”>

Bu masanın altında bir çerçeve var.

type = “code”> Çerçeveli bazı tablolara göz atın Öznitelik, çerçeve niteliğine benzer, yalnızca tablonun hücrelerinin etrafındaki kenarlıkları etkiler. Tüm hücrelerde, sütunlar arasında, TBODY ve TFOOT gibi gruplar arasında veya hiçbirinde kurallar belirleyebilirsiniz. Yalnızca satırlar arasında çizgiler içeren bir tablo oluşturmak için şunu yazın:

kurallar=”satırlar”>

Bu 4×4 masada

sütunlar değil satırlar

ile özetlenen

kurallar özniteliği.

type = “code”> Ve sütunlar arasında satırlar olan bir tane daha:

kurallar=”kollar”>

Bu

bir masa

nerede

sütunlar

vardır

vurgulanmış

type=”code”> Öznitelik, ekran okuyucular ve tabloları okumada sorun yaşayabilecek diğer kullanıcı aracıları için tablo hakkında bilgi sağlar. Özet niteliğini kullanmak için tablonun kısa bir açıklamasını yazar ve bunu niteliğin değeri olarak koyarsınız. Özet, çoğu standart web tarayıcısında web sayfasında görüntülenmez. Özetle basit bir tablo nasıl yazılır: özet=”Bu, dolgu bilgilerini içeren örnek bir tablodur. Bu tablonun amacı bir özeti göstermektir.”>

sütun 1 satır 1

sütun 2 satır 1

1. sütun 2. satır

2. sütun 2. satır

type=”code”> Nitelik, tablonun genişliğini piksel veya kapsayıcı öğesinin yüzdesi olarak tanımlar. Genişlik ayarlanmazsa, tablo yalnızca içeriği görüntülemek için ihtiyaç duyduğu kadar yer kaplar ve maksimum genişlik üst öğenin genişliğiyle aynıdır. Piksel cinsinden belirli bir genişliğe sahip bir tablo oluşturmak için şunu yazın: width=”300″>

Bu tablo, içinde bulunduğu kabın genişliğinin %80’i kadardır.

type=”code”> Ve üst öğenin yüzdesi olan genişlikte bir tablo oluşturmak için şunu yazın: width=”80%”>

Bu tablo, içinde bulunduğu kabın genişliğinin% 80’i kadardır.

type=”kod”>

Kullanımdan Kaldırılan HTML 4.01 TABLE Özelliği

TABLE öğesinin HTML 4.01’de kullanımdan kaldırılan ve HTML5’te kullanılmayan bir özelliği vardır: align. Bu öznitelik, tablonun yanındaki metne göre sayfada nerede bulunması gerektiğini belirlemenizi sağlar. Bu özellik HTML 4.01’de kullanımdan kaldırılmıştır ve onu kullanmaktan kaçınmalısınız. Bunun yerine, CSS özelliğini veya margin-left: auto; ve sağ kenar boşluğu: otomatik; stilleri. Float özelliği, sağlanan align özniteliğine daha yakın bir sonuç verir, ancak sayfa içeriğinin geri kalanının görüntülenme şeklini etkileyebilir. Sağ kenar boşluğu: otomatik; ve sol kenar boşluğu: otomatik; W3C’nin alternatif olarak önerdiği şeylerdir. Aşağıda, align niteliğini kullanan kullanımdan kaldırılmış bir örnek verilmiştir: align=”right”>

Bu tablo sağa hizalanmış

Metin etrafında sola doğru akar

type=”code”> Ve geçerli (kullanımdan kaldırılmamış) HTML ile aynı etkiyi elde etmek için şunu yazın: float:right;”>

Bu tablo sağa hizalanmış

Metnin etrafında sola doğru akar

type=”kod”>

Eski TABLE Nitelikleri

Önceki bilgiler, HTML 4.01’de geçerli olan ancak HTML5’te kullanılmayan HTML öğesinin niteliklerini açıklar. Aşağıda, herhangi bir mevcut belirtimde geçerli olmayan TABLE öznitelikleri açıklanmaktadır. Sayfalarınızın doğrulanıp doğrulanmadığını umursamıyorsanız ve kullanıcılarınız bu öğeleri destekleyen bir tarayıcı kullanıyorsa, bu öğeleri kullanabilirsiniz. Ancak bunların çoğu ya modern tarayıcılarda desteklenmiyor ya da daha standartlarla uyumlu alternatiflere sahip.

Bu özellikleri kullanmanızı önermiyoruz HTML tablolarınızda. Öznitelik, CSS’nin yaygın olarak desteklenmesinden önce eklenen eski bir özniteliktir. Tablonun arka plan rengini değiştirmenizi sağlar. Bir renk adı veya onaltılık bir kod ayarlayabilirsiniz. Bu özellik hala birçok tarayıcıda çalışmaktadır, ancak geleceğe dönük HTML için onu kullanmamalı ve bunun yerine CSS kullanmalısınız. Bu özniteliğe daha iyi bir alternatif, stil özelliğidir. Bir tablonun arka plan rengini değiştirmek için şunu yazın: background-color: #ccc;”>

Bu tablonun gri bir arka planı var

type=”code”> bgcolor niteliğine benzer şekilde bordercolor niteliği, niteliğin rengini değiştirmenize olanak tanır. Bu öznitelik yalnızca Internet Explorer tarafından desteklenir. Bunun yerine border-color style özelliğini kullanmalısınız. Tablonuzun kenarlığının rengini değiştirmek için şunu yazın:

kenarlık rengi: kırmızı;”>

Bu tablonun kırmızı bir sınırı vardır.

type=”code”> bordercolorlight ve bordercolordark öznitelikleri, tablonuzun etrafında bir 3B kenarlık oluşturmanıza olanak sağlamak için Internet Explorer’a eklenmiştir. Ancak, IE8 ve sonraki sürümlerden itibaren, bu yalnızca IE7 Standartlar Modu ve Tuhaflıklar Modunda desteklenir. Microsoft, bu özelliklerin artık desteklenmediğini belirtir. Kısa bir süre için, tarayıcıların bir tablonun kaç sütuna sahip olduğunu bilmelerine yardımcı olmak için TABLE öğesindeki cols özniteliği önerildi. Buradaki öncül, bunun büyük tabloların oluşturulmasını hızlandırmaya yardımcı olacağıydı. Ancak yalnızca Internet Explorer tarafından uygulanmıştır ve IE8 ve sonraki sürümlerde bu yalnızca IE7 Standartları Modu ve Tuhaflık Modu’nda desteklenmektedir. Genişlik özelliği olduğundan (HTML5’te artık kullanılmamaktadır) birçok kişi tablolar için de bir yükseklik özelliği olduğunu varsaymıştır. Ancak tablolar, içeriklerinin genişliğine veya CSS veya genişlik özelliğinde tanımlanan genişliğe uyduğundan, yükseklik sınırlandırılamaz. Bunun yerine tarayıcılar, yükseklik özelliğinin tablonun minimum yüksekliğini tanımlamasına izin verdi. Masa bu yükseklikten daha uzun olsaydı, daha uzun görünürdü. Ancak, bu özelliği kullanmalısınız. CSS height özelliğiyle, fazla içerikle ne olacağını tanımlamak için CSS özelliğini de kullanırsanız yüksekliği sınırlayabilirsiniz. Bir tablodaki minimum yüksekliği ayarlamak için şunu yazın: height: 30em;”>

Bu tablo en az 30 ems yüksekliğindedir.

type = “code”> İki özellik ve tablonun sol / sağ tarafları (hspace) ve üst / alt (vspace) etrafına eklenen boşluk. Bunun yerine style özelliğini kullanmalısınız. Dikey boşluğu 20 piksele ve yatay boşluğu 40 piksele ayarlamak için şunu yazın: margin: 20px 40px;”

Bu tablonun 20 piksellik bir v boşluğu ve 40 piksellik bir h boşluğu vardır.

type = “code”> Öznitelik, tablonun içeriğinin ana öğenin veya pencerenin kenarında mı kaydırılacağını yoksa yatay kaydırmaya mı zorlanacağını tanımlayan bir boole özniteliğidir. Bunun yerine, CSS özelliğini kullanarak her tablo hücresinin sarma özelliklerini tanımlamanız gerekir. Çok fazla metin içeren bir sütunu kaydırmamak için şunu yazın:

white-space: nowrap;”>Bu, tonlarca içeriğe sahip bir sütundur. Ancak, kapsayıcıdan daha geniş olsa bile, metin bir sonraki satıra kaydırılmamalı, bunun yerine tarayıcı penceresini tüm öğeleri görmek için yatay olarak kaydırmaya zorlamalı. içerik.

type=”code”> Son olarak özellik, her hücrenin içeriğinin hücre içinde dikey olarak nasıl hizalanması gerektiğini tanımlar. Bu geçersiz öznitelik yerine, hizalamasını değiştirmek istediğiniz her hücrede CSS özelliğini kullanmalısınız. Hücrenin içeriği, diğer daha büyük hücreler tarafından oluşturulan kullanılabilir alandan daha az olmadıkça, bu stilin etkilerini fark etmeyeceksiniz. Bir hücreyi alta (varsayılan olarak ortadan değil) hizalamaya zorlamak için şunu yazın:

Bu hücre diğerlerinden daha uzundur ve bu nedenle yüksekliği daha uzun olmaya zorlayacaktır. Böylece dikey olarak hizalanmış hücrenin alta hizalandığını göreceksiniz.

dikey hizalama: alt;”>İçerikler altta.

İçindekiler ortada.

type=”kod”>

Biçim mla apa chicago Alıntıınız

Kyrin, Jennifer. “HTML TABLO Öğesi Özniteliklerini Kullanma.” Düşünce Şirketi, Mayıs. 14, 2021, Thoughtco.com/using-html-table-element-attributes-3469857.
Kyrin, Jennifer. (2021, 14 Mayıs). HTML TABLE Öğe Niteliklerini Kullanma. https://www.thinktco.com/using-html-table-element-attributes-3469857 adresinden alındı.
Kyrnin, Jennifer. “HTML TABLO Öğesi Özniteliklerini Kullanma.” Düşünce Şirketi https://www.thinktco.com/using-html-table-element-attributes-3469857 (30 Mayıs 2021’de erişildi).