Tablo özniteliklerini öğrenerek HTML tablolarından en iyi şekilde yararlanın
HTML tablosu özellikleri, HTML tabloları üzerinde size ç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 pek çok özellik vardır.
HTML TABLO Eleman Öznitelikleri
HTML5'te, öğe global öznitelikleri ve bir başka özniteliği kullanır:. Ve sadece 1 veya boş değere (yani border = "") değişti. Kenarlığın genişliğini değiştirmek isterseniz, kenarlık genişliği 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 kullanılmayan HTML 4.01 spesifikasyonunun bir parçası olan çeşitli özellikler de vardır:
- Tablodaki TD ve TH öğelerindeki CSS dolgu özelliğini kullanın.
- Tablodaki CSS özelliği sınır boşluklarını kullanın.
- - CSS stilleri sınır rengini kullan: siyah; ve masanın üzerinde sınır stili.
- - CSS stilleri sınır rengini kullan: siyah; ve tablonun uygun elemanları üzerinde sınır stili.
- -Yatay tablonun yapısını bir CAPTION'da tarif etmeli ya da tüm tabloyu bir ŞEKİLDE göstermeli ve bir ŞEKİLDE tarif etmelisiniz. Alternatif olarak, tablonun yapısını basitleştirebilir, böylece herhangi bir açıklama gerekmez.
- CSS genişliği özelliğini kullanın.
HTML 4.01'de kullanımdan kaldırılan ve HTML5'te de geçersiz olan bir özellik.
HTML 4.01 TABLE Öznitelikleri hakkında daha fazla bilgi edinin.
- align - Bunun yerine CSS margin özelliğini kullanın.
Herhangi bir HTML spesifikasyonunun parçası olmayan çeşitli özellikler de vardır.
Desteklediğiniz tarayıcıların bunları işleyebileceğini ve geçerli HTML'yi önemsemediğinizi biliyorsanız bu özellikleri kullanın.
- Bunun yerine CSS özelliğini arka plan rengini kullanın.
- bordercolor - Bunun yerine CSS özelliği kenarlık rengini kullanın.
- bordercolorlight —CSS özelliği kenarlık rengini kullanın.
- bordercolordark —CSS özelliği kenarlık rengini kullanın.
- cols —Bu özelliğe alternatif yok.
- height - Bunun yerine CSS özellik yüksekliğini kullanın.
- Bunun yerine CSS özellik marjını kullanın.
- Bunun yerine CSS özellik marjını kullanın.
- Bunun yerine CSS özelliğini beyaz boşlukta kullanın.
- Bunun yerine CSS özelliğini dikey hizala kullanın.
Tarayıcıya Özel TABLE Öznitelikleri hakkında daha fazla bilgi edinin.
HTML5 TABLO Eleman Öznitelikleri
Yukarıda belirttiğimiz gibi, bir HTML5 TABLO elemanı: sınırında geçerli olan, global özniteliklerin ötesinde yalnızca bir özellik vardır.
Kenarlık özniteliği, tüm tablonun etrafındaki bir sınırı ve içindeki tüm hücreleri tanımlamak için kullanılır. HTML5 spesifikasyonuna dahil edilip edilmeyeceği ile ilgili bir soru vardı, ancak tablo yapısına dair bilgi sağladığından, sadece stil uygulamalarının ötesinde kalıyordu.
Kenarlık özniteliğini eklemek için, eğer varsa bir kenarlık ve boşsa (veya özniteliği kapalıysa) değeri 1 olarak ayarlayın. Çoğu tarayıcı sınırsız olarak 0'ı ve sınırın genişliğini piksel cinsinden bildirmek için başka bir tam sayı değerini (2, 3, 30, 500, vb.) Destekleyecektir, ancak bu HTML5'te geçersizdir. 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:
border = "1" >
Bu kenarlıklı bir tablo
HTML5'te kullanılmayan HTML 4.01 öznitelikleri var. HTML 4.01 belgelerini yazmayı planlıyorsanız, bunları öğrenebilirsiniz, aksi halde, bunları görmezden gelebilirsiniz. Bu özelliklerin çoğunun yukarıda açıklanan alternatifleri vardır.
HTML5'te (ve HTML 4.01) geçerli olan öğenin niteliklerini açıklarız. Bu, HTML 4.01'de geçerli olan, ancak HTML5'te geçersiz olan TABLO niteliklerini açıklar. Hala HTML 4.01 belgeleri yazıyorsanız, bu özellikleri kullanabilirsiniz, ancak çoğu HTML5'e geçtiğinizde sayfalarınızı daha geleceğe hazır hale getirecek alternatiflere sahiptir.
Geçerli HTML 4.01 Öznitelikleri
Yukarıda tarif ettiğimiz özellik.
HTML5'ten HTML5'teki tek fark, pikselin kenarlık genişliğini tanımlamak için tüm tamsayıları (0, 1, 2, 15, 20, 200, vb.) Belirtebilmenizdir.
5px kenarlıklı bir tablo oluşturmak için şunu yazın:
border = "5" >
Bu tabloda 5 piksellik bir kenarlık var.
Kenarlıklı iki tablo örneğine bakınız.
Öznitelik, hücre sınırları ve hücre içeriği arasındaki boşluk miktarını tanımlar. Varsayılan iki pikseldir. İçerikleri ve kenarlıklar arasında boşluk istemiyorsanız, hücre panelini 0 olarak ayarlayın.
Hücre yastığını 20'ye ayarlamak için şunu yazın:
cellpadding = "20" >
Bu tablonun 20 hücre paneli var.
Hücre sınırları 20 pikselle ayrılacaktır.
Bir tablonun bir örneğini cellpadding ile görüntüleyin
Öznitelik, tablo hücreleri ve hücre içeriği arasındaki boşluk miktarını tanımlar. Cep telefonu kaplaması gibi, varsayılan iki piksel olarak ayarlanmıştır, bu nedenle hiçbir hücre aralığı istemiyorsanız bunu 0 olarak ayarlamanız gerekir.
Bir masaya hücre aralığı eklemek için şunu yazın:
cellspacing = "20" >
Bu tabloda 20'lik bir hücre alanı var.
Hücreler 20 pikselle ayrılacaktır.
Hücre boşluğu olan bir tabloya bakın
Özellik, bir tablonun dışını çevreleyen sınırın hangi bölümlerinin görünür olacağını belirler. Masanızı dört tarafa, herhangi bir tarafa, üst ve alta, sola ve sağa veya hiçbiri üzerine çerçeveleyebilirsiniz.
İşte sadece sol kenar kenarına sahip bir tablo için HTML:
frame = "lhs" >
Bu tablo
sahip olacak
sadece
sol taraf çerçeveli.
Ve alt çerçeveye başka bir örnek:
çerçeve = "aşağıda" >
Bu tablonun alt kısmında bir çerçeve var.
Çerçeveli bazı tablolara göz atın
Öznitelik, frame özniteliğine benzer, yalnızca tablonun hücreleri etrafındaki sınırları etkiler. Tüm hücreler üzerinde, sütunlar arasında, TBODY ve TFOOT gibi gruplar arasında kurallar belirtebilmeniz veya bunların hiçbirini yapamazsınız.
Yalnızca satırlar arasında bir tablo oluşturmak için şunu yazın:
rules = "satır" >
Bu 4x4 tablosunda var
satırlar sütun değil
ile özetlendi
kural özniteliği.
Ve sütunlar arasındaki çizgilerle başka:
rules = "cols" >
Bu
bir masa
Burada
sütunlar
olan
vurgulanan
İşte kuralların olduğu bir tablo örneği
Özellik, ekran okuyucuları ve okuma tablolarında sorun yaşayabilecek diğer kullanıcı aracıları hakkında bilgi sağlar. Özet özniteliğini kullanmak için, tablonun kısa bir açıklamasını yazıp özniteliğin değeri olarak yazarsınız. Özet, web sayfasında çoğu standart web tarayıcısında görüntülenmez.
Özetle basit bir tablo nasıl yazılır:
summary = "Bu, doldurma bilgilerini içeren bir örnek tablodur. Bu tablonun amacı bir özet sunmaktır." >
sütun 1 satır 1
sütun 2 satır 1
sütun 1 satır 2
sütun 2 satır 2
Bir özeti olan bir tabloyu görüntüle
Özellik, tablonun genişliğini ya piksel cinsinden veya kapsayıcı öğenin yüzdesi olarak tanımlar. Genişlik ayarlanmamışsa, tablo, içeriği görüntülemek için gereken en fazla alanı, üst öğenin genişliğiyle aynı maksimum genişlikte alacaktır.
Piksel cinsinden belirli bir genişliğe sahip bir tablo oluşturmak için şunu yazın:
genişliği = "300" >
Bu tablo içinde bulunduğu kabın genişliğinin% 80’idir.
Ve ana öğenin yüzdesi olan bir genişliğe sahip bir tablo oluşturmak için şunu yazın:
genişliği = "% 80" >
Bu tablo içinde bulunduğu kabın genişliğinin% 80’idir.
Genişliğe sahip bir tablonun örneğini görün
Kullanımdan kaldırılmış HTML 4.01 TABLO Özniteliği
TABLE öğesinin HTML 4.01'de kullanımdan kaldırılmış ve HTML5'te geçersiz olan bir özelliği var: align . Bu özellik, tablonun yanında bulunan metne göre tablonun nerede konumlandırılacağını ayarlamanıza izin verir. Bu özellik, HTML 4.01'de kullanımdan kaldırılmıştır ve bunu kullanmaktan kaçınmalısınız. Bunun yerine, CSS özelliğini veya kenar boşluğunu kullanmalısınız: auto; ve kenar boşluğu: otomatik; stilleri. Kayan nokta, size sağlanan align niteliğine daha yakın bir sonuç verir, ancak sayfa içeriğinin geri kalanının görüntülenme şeklini etkileyebilir. Marj sağ: otomatik; ve kenar boşluğu: otomatik; W3C alternatif olarak ne önerir.
Align niteliğini kullanan onaylanmamış bir örnek:
align = "sağ" >
Bu tablo doğru şekilde hizalanmış
Metin etrafında sola doğru akar
Align niteliğini kullanarak onaylanmamış bir örneğe bakın.
Ve geçerli (kullanılmayan) HTML ile aynı etkiyi elde etmek için şunu yazın:
style = "yüzer: sağ;" >
Bu tablo doğru şekilde hizalanmış
Metin etrafında sola doğru akar
Aşağıdaki, herhangi bir HTML belirtiminin parçası olmayan TABLO niteliklerini açıklar.
Önceki bilgiler, HTML 4.01'de geçerli olan ancak HTML5'te geçersiz olan HTML öğesinin özelliklerini açıklar.
Aşağıdaki herhangi bir geçerli belirtimde geçerli olmayan TABLO niteliklerini açıklar. Sayfalarınızın doğrulanıp onaylanmadığını ve kullanıcılarınızın bu öğeleri destekleyen bir tarayıcı kullandığını düşünmüyorsanız, bu öğeleri kullanabilirsiniz. Ancak bunların çoğu ya modern tarayıcılarda desteklenmiyor ya da standartlara daha uygun alternatiflere sahip.
Bu özellikleri HTML tablolarınızda kullanmanızı önermiyoruz .
Özellik, CSS'nin yaygın olarak desteklenmesinden önce dahil edilen eski bir özelliktir. Tablonun arka plan rengini değiştirmenize izin verir. Bir renk adı veya onaltılık bir kod ayarlayabilirsiniz. Bu özellik, hala çok sayıda tarayıcıda çalışır, ancak geleceğe hazır HTML için, onu kullanmamalı ve bunun yerine CSS kullanmalısınız.
Bu özelliğe daha iyi bir alternatif stil özelliği.
Bir tablonun arka plan rengini değiştirmek için şunu yazın:
style = "arka plan rengi: #ccc;" >
Bu tabloda gri bir arka plan var
Bgcolor özniteliğine benzer şekilde bordercolor özniteliği, özniteliğin rengini değiştirmenize izin verir. Bu özellik sadece Internet Explorer tarafından desteklenir. Bunun yerine, kenarlık rengi stil özelliğini kullanmalısınız.
Tablo kenarlığınızın rengini değiştirmek için şunu yazın:
style = "border-color: red;" >
Bu tablonun kırmızı bir kenarlığı var.
Bordercolorlight ve bordercolordark öznitelikleri, masanızın etrafında bir 3B kenarlık oluşturmanıza izin vermek için Internet Explorer'a dahil edildi. Ancak, IE8 ve üstü itibariyle, bu sadece IE7 Standart Modunda ve Quirks Modunda desteklenir . Microsoft, bu özelliklerin artık desteklenmediğini bildirmektedir.
Kısa bir süre için, TABLE öğesindeki cols öznitelikleri, tarayıcıların bir tablonun kaç sütun içerdiğini bilmelerine yardımcı olacak şekilde önerildi. Bu öneri, bunun büyük tabloların oluşturulmasını hızlandırmaya yardımcı olmasıydı. Ancak, yalnızca Internet Explorer tarafından gerçekleştirildi ve IE8 ve üstü olarak, bu sadece IE7 Standart Modunda ve Quirks Mode'da destekleniyor.
Genişlik niteliği olduğu için (HTML5'te eski) birçok kişi, tablolar için bir yükseklik özelliği olduğunu varsayar. Ancak, tablolar içeriklerinin genişliğine veya CSS veya width özniteliğinde tanımlı genişliğe uyduklarından, yükseklik kısıtlanamaz. Bunun yerine tarayıcılar, yükseklik özelliğinin tablonun minimum yüksekliğini tanımlamasına izin verdi. Tablo, bu yükseklikten daha uzun olsaydı, daha uzun görünürdü. Ama mülkü kullanmalısın
CSS yüksekliği özelliği ile CSS özelliğini kullanırsanız, fazla içerikle ne olacağını tanımlamak için yüksekliği sınırlayabilirsiniz.
Tablodaki minimum yüksekliği ayarlamak için şunu yazın:
stili = "yükseklik: 30em;" >
Bu tablo en az 30 ems.
Tablonun sol / sağ tarafları (hspace) ve üst / alt (vspace) etrafındaki iki özellik ve ek alan. Bunun yerine stil özelliğini kullanmalısınız.
Dikey alanı 20 piksele ve yatay alanı 40 piksele ayarlamak için şunu yazın:
stili = "kenar boşluğu: 20 piksel 40 piksel"
Bu tabloda 20 piksel ve 40 piksellik bir hspace vardır.
Öznitelik, tablonun içeriğinin üst öğenin veya pencerenin kenarına sarılıp sarılmayacağını veya yatay kaydırmaya zorlayacağını tanımlayan bir boole özniteliğidir. Bunun yerine, CSS özelliğini kullanarak her bir tablo hücresinin sarma özelliklerini tanımlamanız gerekir.
Çok fazla metin içeren bir sütun oluşturmak için yazmayın:
style = "beyaz boşluk: nowrap;" > Bu bir ton içeriğe sahip bir sütun. Ancak kapsayıcıdan daha geniş olsa bile, metin bir sonraki satıra kaydırılmamalı, bunun yerine tarayıcı penceresini tüm içeriği görmek için yatay olarak kaydırmaya zorlamalıdır.
Son olarak, özellik her bir hücrenin içeriğinin hücre içinde dikey olarak hizalanması gerektiğini tanımlar. Bu geçersiz öznitelik yerine, hizalamayı değiştirmek istediğiniz her hücrede CSS özelliğini kullanmalısınız. Hücrenin içeriği diğer büyük hücreler tarafından oluşturulan kullanılabilir alandan daha az olmadıkça, bu stilin etkilerini fark etmeyeceksiniz.
Bir hücrenin dibe hizalanmasını zorlamak için (varsayılan olarak, ortadan ziyade), şunu yazın:
Bu hücre diğerlerinden daha uzun ve bu yüzden yüksekliği daha uzun olmaya zorlar. Böylece dikey olarak hizalanmış hücrenin dibe hizalandığını göreceksiniz.
style = "dikey hizalama: alt"; > İçindekiler.
İçindekiler orta.