internet pencereler Android
Genişletmek

Tabloyu HTML'de nasıl bölünür.

Bölüm 4.

HTML'deki tablolar

HTML fonlarında en güçlü ve yaygın kullanılanlardan biri tablolardır. Sekmeli bir veri sunumunun kavramı ek açıklamaya ihtiyaç duymaz. HTML tabloları, yalnızca geleneksel olarak bir veri gösterimi yöntemi olarak değil, aynı zamanda web sayfalarını biçimlendirmenin bir yolu olarak kullanılır. Bir tablo görünümünün bir belge oluşturmanın uygun bir yolu olduğu aslında mevcut belgelerin örneklerini veriyoruz. İncirde. 4.1, satır ve sütunlar aracılığıyla kırılmış sayısal verileri temsil etmek için tabloların kullanılmasının tipik bir örneğini göstermektedir. İncirde. 4.2 Tabloyu kullanma Sadece bir belgeyi biçimlendirmenin nesnelerine hizmet eder, sayfa öğelerinin karşılıklı konumunu ayarlayın. Böyle bir belgeyi görüntülerken, hücrelerinin etrafındaki çerçeveler çizilmediğinden, bir tablonun onu oluşturmak için kullanıldığı hemen görülmez.

HTML dilinin ilk versiyonu, özellikle basit bir metin yazmak için tasarlanmış olarak, tabloları görüntülemek için özel araçlar sağlamadı. HTML belgelerinin kullanımının geliştirilmesiyle, bir dizi satır ve sütun varlığının tipik olduğu için veri gönderme acil bir görevi haline geldi. İlk başta sütunlarda hizalanan verileri içeren belgeleri oluşturma, istenen alanın tanıtımı ile gerekli hizalamanın, içindeki, gerekli hizalamanın sağlandığı taklit metni kullanılarak gerçekleştirildi. Etiket çifti içindeki metnin hatırlanması

VE
Monosin yazı tipi ile gösterilir ve tüm boşluklar ve sekmeler anlamlıdır. Bu tür metni eşitlemek için çalışmak manuel olarak yapıldı, bu da belgelerin oluşturulmasını önemli ölçüde yavaşlattı. Tablo bir tablo sunumu için destek, başlangıçta tüm önde gelen tarayıcılarda uygulandığından ve yalnızca HTML 3.2 şartnamesinde önemli bir süre giderildikten sonra, fiili standart hale geldi.

Bununla birlikte, tablolar oluşturmak için özel araçlar, simüle edilmiş metnin kullanımını iptal etmeyin. Tabloların kullanımı, satır ve sütunlardan oluşan verilerle sınırlı değildir. Uygulamalardan biri, basit metin, görüntü, diğer tablolar vb. Olabilecek sayfadaki çeşitli verilerin bulunduğu yerlerin organizasyonudur. Tablo oluşturma kuralları ve kullanım örnekleri bu bölüme ayrılmıştır.

incir . 4.1. HTML tablosunun tipik örneği


incir . 4.2. Çerçeveleri olmayan örnek tablo

En basit HTML tablolarını oluşturma

İlk önce minimum etiketleri ve parametrelerini ve basit tablolar oluşturmak için yeterli ve yeterli olduğunu düşünün ve ardından ayrıntılı açıklamalarına devam edin.

Tabloların açıklaması belge bölümünde bulunmalıdır . Belge, keyfi sayıda tablo içerebilir ve tabloların yuvalanması birbirlerine izin verilir. Her masa etiketle başlamalıdır

Ve etiketle bitmek
. Bu etiketlerin içinde, masanın içeriğinin bir açıklaması vardır. Herhangi bir tablo, her biri ayrı ayrı hücreler için veriler verilen bir veya daha fazla satırdan oluşur.

Her satır etikete başlar (Masa satırı) ve etiketle bitti. Dizedeki ayrı bir hücre bir çift etiketle çerçevelenmiştir. ve (Tablo verileri) veya ve (Tablo başlığı). Etiket Genellikle masa başlığı hücreleri için kullanılır ve - Veri hücreleri için. Kullanımdaki farklılıklar, hücrelerin içeriğini görüntülemek ve hücrenin içindeki verilerin konumunu görüntülemek için varsayılan olarak kullanılan yazı tipinin türündedir. Türün hücrelerinin içeriği BOLD (BOLD) bir yazı tipi görüntüler ve merkezde bulunur (Align \u003d Center, Valign \u003d Orta). Etiket hücreleri Varsayılan olarak, sola hizalanan veriler görüntülenir (align \u003d sol) ve dikey yönde ortada (Valign \u003d orta).

Etiketler ve Tablonun satırının açıklaması dışında görünemez . Bitirme kodları, ve Göz ardı edilebilir. Bu durumda, dize veya hücrenin açıklamasının sonu, bir sonraki satırın veya hücrenin başlangıcı veya tablonun sonudur. Terbiye tablo etiketi İhmal edilemez.

Tablodaki satır sayısı açılış etiketlerinin sayısı ile belirlenir. ve sütun sayısı - maksimum sayı veya Tüm çizgiler arasında. Hücrelerin bir kısmı herhangi bir veri içermeyebilir, bu tür hücreler aşağıdaki etiketlerden oluşan bir çift tarafından tanımlanır - , . Herhangi bir dizgenin sonunda bulunan bir veya daha fazla hücre veri içermezse, açıklamaları atlanabilir ve tarayıcı, gerekli miktarda boş hücreyi otomatik olarak ekleyecektir. Farklı vuruşlarda, aynı boyutta farklı bir sayıda sütun var olduğu tabloların yapımına izin verilmemektedir.

Tablo, birkaç etiket olan bir başlığa sahip olabilir. ve. Açıklama Tablo başlığı etiketlerin içine yerleştirilmelidir.

ve
Ancak, herhangi bir yerde, etiketlerin herhangi birinin açıklaması dışında , veya . HTML dil spesifikasyonuna göre, açıklamanın açıklaması daha kesinlikle başlıklardır: Etiketten hemen sonra yerleştirilmelidir. ve ilk önce . Bu kurala uymayı öneririz.

Varsayılan olarak, tablo başlığı metni yukarıda bulunur (Align \u003d Top) ve yatay bir yönde ortalanır.

Listelenen etiketlerin parametreleri, sayısını ve değerleri farklı olabilir. Bununla birlikte, en basit durumda, etiketler varsayılan değerleri kabul eden parametreler olmadan kullanılır.

Bu bilgi temel tablolar oluşturmak için oldukça yeterlidir. Ekran, Şekil 2'de gösterilen iki satırdan ve iki sütundan oluşan en basit tabloya bir örnek veriyoruz. 4.3.

En basit tabloya örnek

Hücre 1 Hat 1 Hücre 2 satırları 1
Hücre 1 Hat 2 Hücre 2 satır 2


İncir. 4.S. En basit tabloya örnek

Sayfadaki tabloyu görüntüle

Tabloları tanımlayan etiketlerde kullanılabilecek çeşitli parametrelerin atanmasını düşünün.

Masa başlığı

Tag başlık tablosu Tork değerlerini (tablonun üzerindeki başlık) veya alt (tablonun altındaki başlık) kabul eden tek bir izin verilen hizalama parametresi vardır. Hizalama parametresi, Align \u003d üst değerine karşılık gelen atlanabilir. Yatay yönde, tablonun başlığı her zaman merkezinde bulunur. Masanın bir başlığı olmayabilir. Tablonun bir başlığı olarak, çoğu durumda, HTML spesifikasyonu tarafından yönetilen, ancak etiketler arasındaki gerçekte basit metin kullanılır. ve Bölümde kullanılan HTML öğelerini kaydetmek için görünür . Tablonun başlık kaydına bir örnek verelim:

Başlık, delikanlı dibinde bulunan

Bu başlık açıklaması yukarıdaki örneğe eklenirse, tablo Şekil 2'de gösterildiği gibi gösterilecektir. 4.4.


İncir. 4.4.Başlıklı Tablo

Microsoft Internet Explorer tarayıcısı, başlık konumunu seçmek için ek özellikler sağlar. Hizalama parametresi, yukarıda açıklanan değerlerle birlikte yatay hizalama için sol, merkez ve doğru değerlere izin verir. Bunun, yaygın hizalama parametresi yatay hizalama için ve dikey için kullanılabileceği nadir durumlardan biri olduğuna dikkat edin. Örneğin, Kayıt Hizası \u003d sağ, sağ tarafa basıldığında ve tabloya yerleştirilen başlık düzenlemesini sağlayacaktır. Align \u003d alt yazarsanız, yukarıdaki örnekte olduğu gibi, başlık tablonun altında olacaktır. Bununla birlikte, hizalama parametresinin bir başlığında çift kullanım kabul edilemez. Bu nedenle, dikey hizalama için özel parametre ek olarak tork değerlerini veya altını alan VALIGN'dir. Örneğin, tablonun alt kısmında sola hizalanmış olarak atılan başlık için, açıklama aşağıdaki forma sahiptir:

Soldaki hizalamayla altta bulunan başlık

Microsoft Internet Explorer'da başlık açıklaması olan tablo aşağıdaki gibi gösterilecektir (Şekil 4.5). Bu örnek Netscape'de görüntüleniyorsa, başlık varsayılan olarak, yani tablonun üzerinde ve ortada yatay yönde yerleştirilir.


İncir. 4.5. Yatay Hizalama Masa Tablosu Tarayıcı Microsoft Internet Explorer

Yatay hizalama yetenekleri Tablo başlığı, Netscape Navigator tarayıcısı tarafından desteklenmeyen HTML spesifikasyon uzantısıdır ve bu nedenle sadece aşırı ihtiyaçta kullanılmaları gerekir.

Tag parametreleri

Tablo oluştururken uygulanan ana etiket etikettir.

. Her biri atlamaya izin verilen bir dizi parametre ile kullanılabilir. İzin verilen parametreler kümesi Tarayıcıya bağlıdır. Etiketdeki HTML spesifikasyonuna göre
Aşağıdaki parametreler kullanılabilir: Sınır, Cellpacing, Cellpadding, Genişlik, Hizala. Netscape IMICROSOFT Internet Explorer tarayıcıları, yüksekliği ve bgcolor parametrelerini kullanmak için aşağıdaki beş parametreye ek olarak izin verilir. Ayrı tarayıcılar ayrıca diğer parametreleri belirlemenize de izin verir. Yaygın olarak kullanılan etiket parametrelerinin atanmasını düşünün
.

Sınır parametresi

Sınır parametresi, çerçevenin görüntüsünü her hücre etrafındaki görüntüsünü yönetir, bu da aslında, hat ızgara çizgileri ve tüm tablonun etrafında. Varsayılan çerçeveler çizilmez ve ekranda, kullanıcı yalnızca tablo hücrelerinin tam olarak metnini görecektir. Çerçevesiz tabloların kullanıldığı birçok durum vardır, örneğin, Multiscount listeleri için tablolar kullanılarak uygulanan veya çizimlerin ve metnin tam karşılıklı konumunu ayarlamanın tam olarak haklı olduğu birçok durum vardır. Bununla birlikte, çoğu durumda, tablolarının geleneksel kullanımı için hücresi, ızgara hatlarını birbirinden ayırmak için kullanışlıdır, bu da tabloda yer alan bilgilerin algısını ve anlayışını kolaylaştırır.

Çerçeve tablosuna eklemek için, kodda etkinleştirmeniz gerekir.

Sayısal bir değere sahip olan sınır parametresi.

Örneğin,

veya
.

Parametrenin sayısal değeri, çerçevenin tüm tablonun etrafında çizilen piksellerde kalınlığını belirler, ancak her bir hücrenin etrafındaki karelerin kalınlığını etkilemez. Sayısal bir değer yokluğunda, genellikle minimum değere eşit alınır (1), farklı tarayıcılar için, çerçeve ekran stili farklı olabilir. Tüm tablonun etrafındaki çerçevenin ekranının bağımsız kontrol olasılığı ve hücrelerin etrafındaki kareler eksik.

Şekil 2'de 10 piksel bir kalınlığa sahip bir tablonun bir örneği, Şekil 2'de gösterilmiştir. 4.6.


İncir. 4.6.Çerçeve kalınlığı ile masa 10 piksel

HTML 3.0 spesifikasyonu sınır parametresi için bir değer içermemektedir. Bu sadece HTML 3.2'de yapılır. Bu nedenle, özellikle, Microsoft Internet Explorer'ın erken sürümleri, sayısal değerin ayarlarına izin vermedi.

Sınır parametresinin yokluğunda, çerçeveler çizilmez, ancak bunların altında kalır (bu sadece Netscape için geçerlidir). Sınır parametresinin yokluğunda masanın toplam boyutu veya varlığı değişmez (istisna, görev sınırı \u003d 0) durumudur. Böylece, bu durumlarda iki bitişik hücre arasındaki minimum mesafe, çerçevenin kalınlığını iki katına çıkarmak için eşit olacaktır, yani iki piksel. Hücreleri birbirine mümkün olduğunca yakın bir yere yerleştirin. Sınır \u003d 0 görev için mümkündür, bu da bir çerçevenin yokluğu anlamına gelir. Bazı tarayıcılar kenarlık parametresinin sayısal değerinin görevini desteklemeyebilir, daha sonra sıfıra eşit değer göz ardı edilecektir ve tablo çerçevelerle çizilecektir.

Birkaç örnek verelim:

Yukarıda belirtilen üç Netscape tarayıcısının tümü farklı şekilde gösterilecektir. Varsayılan değer hakkında konuşamadığınızda, burada oldukça benzersiz bir dava olduğunu unutmayın. Sınır parametresinin atıldığı üçüncü örnek, bu parametrenin bulunduğu herhangi bir örnekten farklıdır. Microsoft Internet Explorer için, ikinci ve üçüncü örnekler aynıdır, bu nedenle bu tarayıcı için kenarlık parametresinin varsayılan değeri sıfırdır.

Parametre Cellspacing

Parametre Kayıt Formu: CELLSPACING \u003d NUM, Num, piksellerin atılamayan, parametrenin sayısal değeri olduğu. Num değeri, bitişik hücreler (hücrelerin hücreleri arasında daha kesin olarak) arasındaki mesafeyi hem yatay hem de dikey olarak belirler. Varsayılan olarak, değer ikiye eşittir. Geleneksel olarak yayın sistemlerinde tabloların bitişik hücrelerinde ortak bir sınır olduğunu unutmayın. HTML tablolarında, varsayılan yer arasında açıkça görülebilen, yukarıdaki şekillerde açıkça görülebilir (Şekil 4.6). Cellspacing \u003d 0 bitişik hücrelerin kareleri belirlerken, tablonun üniforma tablosu oluşturulur ve oluşturulacaktır (Şek. 4.7).


İncir. 4.7.Cellspacing ile Masa \u003d 0

Cellpadding

Parametre kayıt formu, Cellspacing'e benzer. Num değeri, hücre çerçevesi ile hücrenin içindeki veriler arasındaki boş alanın (girinti) boyutunu belirler. Varsayılan olarak, değer birine eşit alınır. Cellpadding parametresinin sıfıra ayarlanması, hücre metninin bazı bölümlerinin, çok estetik görünmeyen çerçevesine dokunabileceği gerçeğine yol açabilir.

İncirde. 4.8, Cellpadding \u003d 10 değeri olan bir tablonun bir örneğini göstermektedir.


İncir. 4.8.Cellpadding ile Masa \u003d 10

Cellpadding ve Cellspacing parametreleri birbirine çok benzer. Çerçevesiz bir tablo için, bir veya başka bir parametreyi değiştirmek aynı sonucu verir. Her iki parametre de uygun girintileri eşzamanlı olarak yatay ve dikey olarak etkiler. Ne yazık ki, yapıldığı gibi yatay ve dikey geri çekilmelerin ayrı kontrolü, örneğin görüntülerden gelen girintiler için (parametreler HSPace ve VSPace Etiketi) ), sağlanmadı.

Her üç parametre - sınır, cep telefonu ve cellpacing birbirlerinden bağımsız olarak hareket ederse, varsa, varsayılan olarak alınan değeri alınır. Özellikle, eğer listelenen tüm parametreler ihmal edilirse, bitişik hücrelerden gelen veriler arasındaki minimum mesafe 6 piksel (NetScape için) olacaktır. Bu değer, Cellpacing, Cellpadding için bir piksel ve her hücrenin çerçevesi için bir piksel için iki pikselden oluşur. En kompakt tablo, aşağıdaki açıklamanın görevi ile elde edilecektir:

Sadece bu değişken hücrelerde birbirlerine yakın olacaktır. Bir tablo kullanmanın bir örneği, tüm hücrelerin aynı boyutta çizimleri içeren, yan yana yerleştirilmelidir.

Genişlik ve Yükseklik Parametreleri

Tablolar görüntülendiğinde, genişliği ve yükseklikleri tarayıcı tarafından otomatik olarak hesaplanır ve birçok faktöre bağlıdır: Tabloya, bireysel çizgiler ve hücrelere verilen tüm belgenin açıklamasında belirtilen parametre değerleri, hücrelerin içeriği , ayrıca, bir belgeyi farklı bir tarayıcıda görüntülerken belirtilen parametrelerin yanı sıra, örneğin, yazı tipinin türü ve boyutu, görüntüleme penceresinin boyutu, vb. Tablo boyutlarının hesaplanmasını görüntüleyerek otomatik olarak gerçekleştirilir, Bu faktörleri dikkate alarak, tabloyu yerleştirilecek şekilde ve görüntüleme penceresini konumlandırmak için en uygun şekilde bir tablo sunmak için girişimde bulunulur. Büyük belgeler için genel görüntüleme şeması, bir kural olarak, dikey belgenin içeriğinin doğrusal bir kaydırılmasına ve metni okunur, çeşitli tablolar, görüntüler vb. Tarafından yorumlanır. Bu, hem de oluşturulan geleneksel belgeler için Herhangi bir metin editörü. Her iki metin editörünün (örneğin, Microsoft Word) ve HTML tarayıcıları, metni otomatik olarak biçimlendirir (mümkünse), böylece dize uzunluğu görüntüleme penceresinin genişliğini aşmaz. Bu, belgenin yatay kaydırmasına ihtiyaç duyulmasını önler. Benzer eylemler tabloları olan tarayıcılar tarafından yapılır - mümkünse, tablonun genişliğinin görüntüleme penceresinin genişliğini aşmayacak şekilde biçimlendirin. Tabloların genişliğinin daha önemli olduğu, öncelikle yüksekliğe kıyasla yapıldığı birincil parametre olduğu sonucuna varılabilir.

Çoğu durumda, tablo boyutunun dinamik tanımı, görüntüleme penceresinin gerçek görünümünün etkili kullanımı ile estetik olarak orantılı bir görüntü verir. Bununla birlikte, tablonun genişliğini veya yüksekliğini zorlamak için gereklidir. Bu amaçla, genişlik parametreleri kullanılır (masa genişliği) ve yükseklik (Tablo Yüksekliği) etiketi

. Kayıt Formu: Genişlik \u003d Num veya Genişlik \u003d Num, Num, pikseldeki tüm tablonun genişliğinin veya tüm pencere boyutunun yüzdesi olarak sayısal bir değerdir. Değerleri ayarlamak için izin verilebileceğini,% 100'ü, gerekli olduğu durumun hayal edilmesi zor olmasına rağmen, gerekli olduğu durumları hayal edin. Misal:

.

Bireysel hücreler için benzer parametreler ayarlanabilir. Parametrenin spesifik değerinin, örneğin genişlik \u003d 200'in özel değerini ayarlamanın, tablonun herhangi bir durumda belirtilen genişliğe sahip olacağı anlamına gelmez, ancak yalnızca mümkünse dayanacak olan önerilen genişliği tanımlar. Örnekler üzerinde açıklayalım. Diyelim ki, bu koşullarda varsayılan olarak belirtilenden daha küçük bir genişliğe sahip olacak bir tablo var. Bu durumda, tarayıcı tablonun genişliğini, tablonun tüm sütunlarının orantılı olarak genişletilmesiyle istenen şekilde artıracaktır. Görüntüleme penceresi daralma olduğunda, masa genişliği değiştirilmez ve yatay bir kaydırma görüntülemek için gerekli olabilir. Varsayılan tabloda belirtilenden daha büyük bir genişliğe sahipse, tarayıcı, öncelikle, ilk olarak, belirtilen genişliğin daha fazla gerekli olduğu, ikincisi, metnin ayrı hücrelerde bölünmesi için bireysel sütunların genişliğini azaltmaya çalışacaktır. Masanın yüksekliğinde bir artışa sahip birkaç satır. Bu eylemler istenen tablo boyutunu sağlamayabilir ve ardından asgari olası genişliğe sahip olacaktır. Aynı işlemler, görüntüleme penceresinin daraldığında, boyut belirtmeyen tablolar için yapılır.

Farklı tarayıcılar için özel tablo yapılandırma algoritmaları biraz farklı olabilir.

Parametre hizası

Bu parametre etiketi

Viewport'taki tablonun yatay konumunu belirtir. Geçerli değerler - sol (solda) ve sağ (sağa hizalama). Varsayılan olarak, tablo sol kenarda seviyelendirilir. İzin verilen değerler arasında Hizalama parametresi - Merkezi için tipik bir değer olmadığını unutmayın. HTML dilindeki bazı kaynaklarda, merkez (merkezli) bu durumda izin verilir. Bu, HTML spesifikasyonuna karşılık gelir, ancak pratikte ve Netscape Navigator'da Microsoft Internet Explorer sadece iki değer uygular. Gerçek şu ki, etiketteki hizalama parametresinin varlığıdır.
Sadece tablonun yerini belirler, ancak tablonun etrafındaki akışı, metnin karşı tarafındaki metni, resimlerin düzenlenmesine benzer şekilde yapmanızı sağlar. Her iki taraftaki metne sahip masanın etrafındaki akış, herhangi bir durumda öngörülmez. Daha doğru akış yönetimi için bir etiket kullanmalı
net parametre ile ve bunun için yapılır. . Hizalama parametresi ihmal edilirse, sağdaki konumu ve / veya tablonun solundaki yeri her zaman genişliğinden bağımsız olarak boş olacaktır. Tablo metin akışı gerektirmiyorsa, görüntüleme penceresindeki konumunu elde edebilirsiniz. Bunun için, örneğin, etiket çifti içinde bir tablo açıklaması yapabilirsiniz.
ve
.

Ekran, Şekil 2'de gösterilen akan metni olan bir tabloya bir örnek veriyoruz. 4.9.

Akan bir kasa ile masa


yetişkin

petersburg nüfusu

  • Abram
  • Alexander
  • Alexei
  • Albert.
  • Anatolyon
  • Andrew

  • Arkady
  • Boris.
  • Vadim.
  • sevgili
  • Valy
  • Fesleğen

  • Victor
  • Vitaly
  • Vladimir
  • Vladislav.
  • Vyacheslav

  • Gennad
  • Georgy.
  • Hermann
  • Gıcırdamak
  • Dmitriy

  • Evgen
  • Efim
  • İvan.
  • Igor
  • Il ya
  • Joseph
  • Konstantin

  • bir aslan
  • Leonid
  • Michael
  • Nikolai
  • Oleg
  • Pavel
  • Peter

  • Roman
  • Meni
  • Sergey
  • Stanislav
  • Edward
  • Yuri.
  • Yakov








  • Belirtilen 43 Yaygın isim, numunenin% 92'sini kapsar.

    İncir. 4.9. Akan metin ile çerçevesiz masa

    Bu belge, align \u003d sol hizalama parametresi ile çerçevesiz bir tablodan oluşur; bu, tabloyu sağdaki metnin sağlanmasını sağlar. Tablo iki hücre içeren yalnızca bir satırdan oluşur. Her hücre, ölçülen bir listenin parçası içerir.

      . Bir listeyi çıkarmak için bir tablo kullanmak, listenin bu örneği gösteren çeşitli sütunlarda zorunlu konumlarından biridir. Masanın sağında bulunan metin, hepsine uymuyor ve tablodan sonra devam edecek. Tarayıcı görüntüleme penceresinin genişliğini azaltmak için bu örneği deneyin ve bir noktada tüm metin tablonun altından olacaktır. Tablo boyunca metnin akışının zorla kesilmesi için (örneğin, sonraki metin, tablo ile mantıksal olarak ilişkili değildir ve aşağıda bulunulmaması gerekirse) kod tarafından kullanılması gerekir.
      Net parametre seti ile. Bu örnek için kaydetmeniz gerekir
      veya
      . Bazı tarayıcılar, net parametrenin anlamsız kaydetmesini sağlar, ancak bu tavsiye edilmez. Aynı görevi uygulamak için, birden fazla hat çevirini ayarlayın
      Net parametre olmadan (metinden önceki örnekte, birkaç çizgiye kaydırmak için) veya yeni paragrafın başlangıcının birkaç kodu

      Geçersiz karar.

      Ekran, Şekil 2'de gösterilen benzer bir sayfayı oluşturmak için hafif bir örnek veriyoruz. 4.10.

      Akan metinsiz tablo

      En yaygın insanın isimleri

      petersburg'un yetişkin nüfusu

    • Abram
    • Alexander
    • Alexei
    • Albert.
    • Anatolyon
    • Andrew

    • Arkady
    • Boris.
    • Vadim.
    • sevgili
    • Valy
    • Fesleğen

    • Victor
    • Vitaly
    • Vladimir
    • Vladislav.
    • Vyacheslav

    • Gennad
    • Georgy.
    • Hermann
    • Gıcırdamak
    • Dmitriy

    • Evgen
    • Efim
    • İvan.
    • Igor
    • Ilya
    • Andocif
    • Konstantin

    • bir aslan
    • Leonid
    • Michael
    • Hikolay
    • Oleg
    • Pavel
    • Peter

    • Roman
    • Meni
    • Sergey
    • Stanislav
    • Edward
    • Yuri.
    • Yakov

    • Bu veriler, St. Petersburg'da yaşayan 18 yaşın üzerindeki 5.000 erkek hakkında bilgi içeren temsili numunenin analizine dayanarak elde edildi.
      En sık karşılaşılan 43 belirtilen 43 numunenin% 92'sidir.
      Diğer isimlerin her birinin oluşum sıklığı% 0.3'ü geçmez

      İncir. 4.10. Üç sütun içeren çerçevesiz masa

      Önceki örneğin aksine, masanın etrafında akan bir metin yoktur. Tüm belge, bir satırda üç hücreyi içeren bir başlığa sahip bir tablodan oluşur. İlk iki hücre önceki örneği tamamen tekrar eder. Üçüncü hücrede, ilk iki hücrenin içeriği hakkında yorum yapan bir metin var. Önceki durumda açıklandığı gibi, zorunlu metin kırılmasını ayarlamanıza gerek yoktur. Tabloya ilişkin tüm metin üçüncü hücrenin içine ve sonraki metnin içine yerleştirilmelidir - tüm tablonun açıklamasının sonundan sonra. Tam ekranda görüntülenirken her iki örnek de aynı görünür, ilk durumda iki sütun listesinin ortasında bulunur ve ikincisinde - üç masanın ortasında bulunur. sütunlar. Bununla birlikte, son örnekte görüntüleme alanında bir azalma ile, metnin bir kısmı aşağıdaki tabloya geçemez, böylece yapısını rahatsız edebilir.

      Tablonun içindeki veri biçimlendirmesi

      Tablonun içindeki her ayrı hücre bağımsız bir biçimlendirme alanı olarak görülebilir. Metin ekranı yönetmesi gereken tüm kurallar, hücrenin içindeki metni biçimlendirmek için kullanılabilir. Hücrenin içinde, belgenin gövdesinde görünebilecek hemen hemen tüm HTML elemanlarını kullanmak için izin verilir. , metnin yerini yöneten etiketler dahil -

      ,
      ,


      , başlık kodları - dan

      önce

      , sembol formatlama etiketleri<В>, , , , , , , TEGIVESTAGES köprü metni bağlantıları<А> Ve böylece. Derhal, ayrı bir hücrede belirtilen etiketlerin kapsamının, nihai etiketin varlığından bağımsız olarak bu hücrenin sınırları ile sınırlı olduğunu vurgulayın. Örneğin, metnin rengi hücrenin içinde tanımlanırsa - , tamamlanma kodu olmasa bile Veya birkaç hücre veya bir tablonun satırından, aşağıdaki hücre metni varsayılan renge yansıtılacaktır.

      Tablo hücrelerinde veri biçimlendirme için, aşağıdaki parametreler sağlanır.

      Hücrelerin içeriğinin hizalamasının içeriği hizalanır ve değerlidir. Kodlarda kullanılabilir , ve . Yatay hizalama parametresini hizalayın, sol, sağ ve orta değerler alabilir (varsayılan kaldı ve merkezi ). Valign dikey hizalama parametresi, Torus değerlerini (üst kenarda), alt (alt kenarda), orta (orta) (orta), taban çizgisine dayanarak (taban çizgisine göre) alabilir. Varsayılan - orta. Temel hizalama, tüm hücrelerde ayrı bir çizginin tek bir satıra bağlanmasını sağlar. Tesviye parametrelerini kod seviyesinde ayarlayın Bu çizginin tüm hücrelerinin hizalamasını, dizenin her bir hücre hücresinde, belirtilen parametreleri yeniden tanımlayan parametrelerini belirler. .

      İlk sütunun hücrelerindeki verilerin sağa, ikinci sütun - ortada ve üçüncü soldaki (varsayılan değer) hakkına hizalandığı bir tabloya bir örnek verelim.

      Masa elemanlarını hizalamak

      Hücre 1. Hile 2. Hücre 3.
      YACHIKA 4. Hücre 5. Hücre 6.

      Bu örnek tarayıcının gösterimi, Şekil 2'de gösterilmiştir. 4.11.


      İncir. 4.11.Tablo hücrelerinde verilerin hizalanması

      NowRAP parametresi, hücre metnini dize otomatik olarak bölme yeteneğini devre dışı bırakır. Kodlarda kullanılabilir , ve . Tablolardaki dinamik değişim olanaklarını önemli ölçüde azaltabileceği ve algılarını kötüleştirebileceği için bu parametrenin haksız bir şekilde kullanılmasından kaçınılmalıdır. Çoğu durumda, Word Transfer'in yeni bir çizgiye yasaklanmasını gerektiren bireysel hücreler için NowRap'ı uygulamak yeterlidir. Kelime aktarımı, yalnızca kelimeler (boşluklar) arasındaki ayırıcılarda ve bazı durumlarda, bir alan sembolü yerine metin yırtılmasını yasaklamak için, ayrılmayan boşluk kodunu ayarlayın. Örnek olarak, boşluğun önerilmediği durumlarda, sayısal değer ve bu değerin ölçülmesi birimleri arasında olabilir; Soyadı ve baş harfler arasında. Öyleyse, Metin 650 km veya Yeltsin B.N. Formda yazmanız önerilir650 km ve Yeltsin B.N.

      Kodlarda genişlik ve yükseklik parametreleri kullanılabilir ve . Sözdizimi, etiket için bu parametrelerin sözdizimine benzer.

      . Değerleri, bu parametrelerin kaydedildiği hücrenin genişliğini veya yüksekliğini belirler. Değerler, piksel veya tüm tablonun yüzdesinde ayarlanabilir. Microsoft Internet Explorer, genişlik değerini yalnızca piksellerde ayarlamanızı sağlar. Tablo, satır ve sütunlardan oluşan bağlı bir yapı olduğundan, herhangi bir hücre için genişlik görevi, hücrenin bulunduğu tüm sütunun genişliğini etkiler ve yükseklik görevi tüm çizgiyi etkiler. Genişlik değeri sütunda yalnızca bir hücrede belirtilirse, bu değer tüm sütunun genişliği olur. Bu tür bir endikasyon varsa, maksimum değer seçilir. Aynı özellikler çizgilerin karakteristiğidir.

      Karmaşık tablolar için, ihtiyaç, birkaç bitişik hücreyi yatay veya dikey olarak birleştirerek karakterize edilir. Bu özellik Colspan (coliimn yayılma) ve Rowpan (satır yayılma) kodlarında belirlenmiş olarak uygulanır.

      Ayarlar, bu grubun bireysel sütunlarına ayarlanır. Aynı zamanda etikette Gerekirse, değerler bu grubun tüm sütunlarına dağıtılan hizalama parametreleri belirtilebilir. Etikette belirtilen parametrelerin değerleri , değerleri etiketten yeniden tanımlama . Etikette bunu not edin Bu örnekte, öncekinin aksine, açıklık parametresi yoktur. Burada anlamsızdır, çünkü gruptaki öğe sayısı aşağıdaki etiketle belirlenecektir. Etiketler . Bu nedenle, parametre yayılma etiketinin belirtilen herhangi bir değeri Geçersiz kılınacak.

      İncirde. 4.17, yukarıdaki kodun uygulanmasının yanı sıra, bu tür bir tabloyu kuralların kaydı ile görüntüleme seçeneğinin yanı sıra, etikette gruplar

      veya . Kayıt Formu: ColSpan \u003d Num, NUM, NUM, geçerli hücreye yatay olarak kaç sütun uzatılacağı tanımlayan sayısal bir değerdir. Rowspan parametresinin uygulanması benzerdir, yalnızca burada mevcut dikey hücreyi yakalaması gereken dizgelerin sayısını belirtir. Varsayılan olarak, bu parametreler için birine eşit değer ayarlanır. Bir hücre için her iki parametrenin değerlerinin izin verilen eşzamanlı olarak ayarlanması. Bu parametrelerin değerlerinin doğru ayarı, özellikle HTML editörünün çoğu, yalnızca en basit tabloları oluşturulan HTML kodları ile görsel olarak oluşturulabildiğinden, çok basit bir iş olmayabilir.

      İncirde. 4.12, aşağıdaki HTML koduyla elde edilen tabloyu görüntüleme örneğini göstermektedir:

      Colspan ve Rowspan parametrelerini kullanma

      Hücre iki satır yakalama Hücre, bağımlılık yapan iki sütun
      Hücre 3. Hücre 4.
      Hücre 5. Hücre 6. Hücre 7.


      İncir. 4.12. Birkaç satır veya sütunu yayan hücreli tablo

      Hücre kayma parametrelerinin değerlerinin dikkatsiz görevi, sonucun öngörülemez olduğu, karşılıklı örtüşmelerine ve çatışmalarına neden olabilir. Genişletilmiş hücrelerin karakteristik kullanımı, birkaç bitişik sütun veya çizgiler için paylaşılan bir başlıktır.

      Genişletilmiş hücrelerin yanlış olduğu HTML koduna (gösterilen, Şekil 4.13'te gösterilen) bir örnek veriyoruz.

      Genişletilmiş hücrelerin geçersiz kullanımı

      Hücre 1. Hücre 2.

      Hücre 3.
      (Yaygın
      Ha üç
      çizgiler)

      YACHIKA 4.Hücre 5.
      Hücre 6. Hücre 7 (iki sütun üzerinde ortak)

      İncir. 4.13.Genişletilmiş hücrelerin yanlış tanımının sonucu (metin dayatma)

      BGColor parametresi, tüm tablonun rengini, ayrı çizgiler veya hücreleri ayarlar. Etiketlerde buluşabilir

      , , Hiçbir bilgi içermez veya veri olarak yorumlanmayan bir veya daha fazla boşluk bulunmamaktadır. Görünmez veriler içeren hücreler, örneğin, kod veya satır çeviri kodu içerebilir
      veya rengi hücre arkaplanının rengiyle çakışan herhangi bir metin. Verileri içeren hücreler (görünmez olsa bile) tüm tarayıcıları eşit olarak gösterilirse, boş hücreler farklı gösterilecektir. Netscape tarayıcısı boş bir hücre değil, yani bu hücrenin bulunduğu yer, sayfanın renk arka planı ile boyanacak ve hücre arkaplanının rengiyle, verileri içeren hücrelerin aksine boyanacaktır. Boş hücrelerin etrafında bir çerçeve çizmez. Boş bir hücreli bir tablonun bir örneği, Şekil 2'de gösterilmiştir. 4.15.


      İncir. 4.15. Boş masa hücresi farklı farklı tarayıcılarda görüntülenir

      Microsoft Internet Explorer ve diğer hücreler, hücrelerin arka planının rengini görüntüler. NSCA Mosaic olarak böyle bir tarayıcı, kullanıcının uygun seçenekleri seçerek boş masa hücrelerinin verilmesinin niteliğini belirlemesini sağlar. Bu özelliklerin bilgisi, kullanıcı tarafından seçilen tarayıcıdan bağımsız olarak, uygun bir şekilde görüntülenecek tablolar geliştirmenize izin verir. Bazı durumlarda, bazı boş hücreler yerine bunun tek kodunu içeren hücreleri oluşturmak yeterlidir.

      Tablo sütunlarındaki verilerin hizalanması

      Tablolar oluştururken karakteristik bir problem, bireysel satırlar veya sütunlar için hizalama parametrelerini ayarlamaktır. Geçerli çizginin tüm hücrelerinin içeriğini hizalamak için, koddaki gerekli parametreleri ayarlamak yeterlidir.

      . Bununla birlikte, bir sütunun tüm unsurları için aynı hizalamayı sağlamak, çünkü çoğu durumda sütundaki homojen veriler vardır. HTML'nin önceki sürümlerinde, etikette ayarlanan COLSPEC (sütun özellikleri) parametresini kullanması önerildi.
      ve . Bu özellik HTML spesifikasyonu tarafından sağlanmaz, ancak hem Netscape hem de Microsoft Internet Explorer destekleniyor. Kayıt formu etiket için aynıdır Yani: BGCOLOR \u003d RGB formatındaki renk içeriğinin veya adının bir değer olarak ayarlandığı değer.

      Misal:

      veya .

      İç içe geçmiş tablolar

      Ayrı masa tabloları, hemen hemen herhangi bir dil etiketini ve bölümde izin verilen verileri içerebilir. Belge. Tablo hücrelerinin içinde, başka bir tablo tamamen yerleştirilebilir. Böyle masaların iç içe görülür. İnşaatları için kurallar, tabloların yapımından farklı değildir ve ayrı bir açıklamaya gerek yoktur. Sadece tabloları destekleyen tüm tarayıcıların, karmaşık tabloları birkaç yuvalama seviyesiyle doğru şekilde yansıttığını, bu nedenle kullanımları dikkatli olmadığını not ediyoruz.

      Bir yuvalama seviyesini kullanan bir tabloya örnek veriyoruz.

      Leningrad Bölgesi Şehirleri

      Leningrad Bölgesi Şehirleri

      H - Şehrin nüfusu (TH., 1992)

      P - Petersburg (KM) arasındaki mesafe

      Petersburg'a bağlı şehirler
      KentH.P.
      vay 13.6

      50

      Kallpino.144.6

      26

      Kronstadt 45.2

      48

      Lomonosov 42.0

      40

      Döşeli 25.4

      30

      Petrodvorets 83.8

      29

      Pushkin 95.1

      24

      Sestroretsk 34.9

      35

      Tüm şehirler alt
      İdare
      Petersburg, var
      düz gopodkay
      televizyon numaraları.

      Bölgesel Gönderme Şehirleri
      KentH.P.
      Boksitogorsk 21.6

      Align \u003d sağ\u003e 245

      Top 50.3

      Align \u003d sağ\u003e 122

      BCEW 32.9

      24

      Vyborg 80.9 130
      Vysotsk 1.0

      Align \u003d sağ\u003e 159

      Gatchina 80.9 46
      Ivangorod. 11.9

      Align \u003d sağ\u003e 147

      Kamennogorsk 5.9 157
      Kingisepp 51.5

      Align \u003d sağ\u003e 138

      Kirishi. 53.8

      Align \u003d sağ\u003e 115

      Kirovsk 23.8

      55

      Lodenoye alanı 27.3

      Align \u003d sağ\u003e 244

      Lyga 41.8139

      (Tablo devamı)
      KentH.P.
      Lyuban 4.7

      85

      Yeni Ladoga 11.2

      Align \u003d sağ\u003e 141

      Otradnoye 22. 9

      Align \u003d sağ\u003e 40

      Pikalevo 25.1

      Align \u003d sağ\u003e 246

      Haşhaş 23.1285
      Primorsk 6.7137
      Priozersk 20.5

      Align \u003d sağ\u003e 145

      Svetogorsk 15.8

      Align \u003d sağ\u003e 201

      Şeytan 42.6

      Align \u003d sağ\u003e 192

      Pırtık 57.6

      81

      Tikhvin 72.0

      Align \u003d sağ\u003e 200

      Tosno 33.8

      53

      W kuzu 12.5

      64

      İncir. 4.14.İç içe geçmiş tabloların bir örneği

      Bu örneğin gösterisinin sonucu Şekil 2'de gösterilmiştir. 4.14.

      İlk bakışta, örnekte, yuvalama masaları yok gibi görünüyor. Aslında, tüm belge çerçevesi olmayan ve bir başlık ve beş hücre içeren yalnızca bir dizginden oluşan bir tablodur. Böyle bir tablonun organizasyonu tek amaca hizmet eder - sayfadaki verilerin yeri. İlk hücrenin içinde, bir başlığa sahip ve üç sütundan oluşan başka bir tablo var, ardından metnin ortada seviyelendirildi. Üçüncü ve beşinci hücreler de bireysel tablolar içerir. İkinci ve dördüncü hücreler boş, herhangi bir veri içermez ve genişliğini tanımlayan tek genişlik parametresine sahipler. Randevuları, birinci ve üçüncü arasında ve tabloların bulunduğu üçüncü ve beşinci hücreler arasında bir girinti sormaktır. Bu, böyle bir girintinin görevi için olası seçeneklerden biridir. Başka bir seçenek, hücreler arasındaki mesafeyi belirleyen Cellspacing parametresini kullanmaktır, ancak bu parametre girintiyi eşzamanlı olarak yatay olarak ve dikey olarak gerekli değildir. Ek olarak, görüntüleme alanı daraldığında önceden belirlenmiş bir genişliğe sahip boş bir hücre, Cellspacing parametresi tarafından belirtilen alanın aksine (ayrıca cep telefonu). Tarayıcıdaki görüntüleme alanının genişliğini azaltmak için bu örneği deneyin veya bu sonuçlara yol açacak, metnin görüntüleneceği yazı tipinin boyutunu arttırın. Tablolar arasındaki mesafe sıfıra düşürülecek ve aynı anda tüm bilgileri mümkün olduğu kadar uzun süre görme fırsatı verecek, ancak daha fazla değişiklik masanın bir sermisine yol açmayacak ve yatay kaydırma olasılığını sağlayacaktır. Benzer bir şema ile, yalnızca tablolardan değil aynı zamanda görüntülerden, metin parçalarını vb. Olanakların yerleşimini düzenleyebilirsiniz.

      Bina masalarının özellikleri

      Bu bölüm, bireysel tarayıcıların bazı özel olasılıklarını ve ayrıca bina ve tabloların ayrı ayrı inceliklerini açıklar.

      Tablolarda boş hücreleri görüntüleyin

      Çeşitli tarayıcılar tarafından tabloların sunumunun özelliklerinden biri boş hücrelerin ekranıdır. Dilin açıklamasına göre, tüm tarayıcılar, numaraları çizgilerin geri kalanından daha küçük olarak ayarlanmışsa, boş hücrelerle çizgileri tamamlamalıdır. Ek olarak, tablonun herhangi bir yerinde veri içermeyen hücreler olabilir. Boş hücreler ile görünmez veri içeren hücreler arasında bir fark vardır. Bir çift etiket içindeki boş hücrelerde

      ve
      ve her bir masa sütununun hizalamasını ve genişliğini belirledi. Örneğin, COLSPEC \u003d "L40 R50 C80" ayarının, hücrelerdeki verilerin tablo hizalamasının üç sütunu için tanımlanmıştır: ilk sütun için - Sol, ikinci - sağ ve üçüncü merkez için ve Her sütunun genişliği. HTML dili geliştirildiğinden, bu parametreyi kullanmayı reddetti ve şimdi dil şartnamesine dahil edilmedi ve çoğu tarayıcı tarafından desteklenmiyor. Sonuç olarak, Netscape Navigator'da böyle bir görevi çözmek için özel fon yoktur ve tek seçenek varsayılan hizalamayı veya gerekli olan her hücrede karşılık gelen değerlerin görevini kullanır.

      Microsoft Internet Explorer özel etiketleri sağlar -

      ve . Bu etiketler açıklama için hemen yerleştirilmelidir.
      Etiketin ilk gelişinden önce .

      Tag parametreleri

      ve Parametrelerin ve hizalama değerlerinin uygulandığı bitişik hoparlörlerin sayısını belirleyen, karşılık gelen kolonun (veya sütunların) tüm hücrelerindeki verilerin yatay hizalamasını belirleyen açıklıklar olabilir. Hizalama parametresinin izin verilen değerleri sağ, sağ ve merkez. Açıklık parametresi için, varsayılan değer birdir.

      Etiket

      Ek olarak, verilerin hücrelerdeki dikey hizalamayı belirleyen Valign parametresini ayarlamanızı sağlar. Valign parametresinin değerleri orta, üst ve alttır.

      Etiketler arasındaki fark

      ve Bunlardan birincisinin, sütunlar için veri hizalama parametrelerinin ayarlarına ek olarak, grup için birkaç sütunun koşullu bir kombinasyonunu gerçekleştirmesidir. Böyle bir ilişkinin etkisi, aşağıda açıklanan kural parametresini kullanırken tezahür eder. Varsayılan olarak, tüm sütunlar bir grup olarak kabul edilir. Etiket Gruptaki ayrı sütunlarda verilerin hizalamasını belirlemek için kullanılmalıdır.

      Bir örnek verelim. 6 sütun içeren bir tablo oluşturmak için gerekli olmasına izin verin ve bunların ilk üçündeki veriler sağa ve aşağıdaki üç - ortada hizalanmalıdır. Bu görevi çözmek için, HTML kodunun bu parçası yazılmalıdır:

      (Tablo için veriler)

      Bu kodun ekranının sonucu Şekil 2'de gösterilmiştir. 4.16.


      İncir. 4.16. Verileri hücre gruplarındaki hizalamak için farklı parametrelere sahip tablo

      Başka bir örnek. Önceki tabloya girsin, ilk iki sütun sağa ve üçüncüye hizalanmalı - ortada ve üç hoparlörün de gruba birleştirilmesi gerekir. Daha sonra üç sütun ayrıca bir gruba birleştirilmeli ve birinci gruba benzer bir hizalamaya sahip olmalıdır. Bu görevi çözmek için, HTML kodunun bu parçası yazılmalıdır:

      (Tablo için veriler)

      Etiketten sonra bu örnekte

      Gruptaki birleşmenin anlamı görünür.

      Konsey

      Etiketin kapsamından beri

      ve Altı Microsoft Internet Explorer tarayıcısı tarafından sınırlandırılmış, daha sonra dikkatli kullanmanız gerekir. Bu etiketleri kullanmanın rahatlığı açıktır, ancak pratikte, çoğu tablo, her bir masa hücresi için karşılık gelen hizalama hizalama parametresi kullanılarak, tablonun kaynak kodunun kapsamını önemli ölçüde artırır, ancak özelliği sağlar. Herhangi bir tarayıcısında görüntülemek için.


      İncir. 4.17. Gruplandırılmış sütunlarla masa

      Vergi çerçevesi rengi işi

      Sadece Microsoft Internet Explorer için karakteristik birkaç parametre özelliği, tabloların rengini seçmenize izin verir - BorderColor, BorderColorlight ve Sınır Colordark. Bu parametreler etiketleri ayarlanabilir

      , . Bu parametrelerin değeri olarak, rengin adı veya onaltılık değeri kullanılabilir. BorderColor parametresi, tablo çerçevesinin tüm unsurlarının rengini tanımlarken, diğer iki parametre, bireysel bileşenlerin rengini, BorderColor değerini geçersiz kılar. BorderColorlight parametresi, belirtilen rengin sol ve üst kenarı tüm tablonun ve buna göre, her bir hücrenin sağ ve alt kenarlarına lekeler. İkinci parametre BorderCololordark, zıt kenarların renklerini ayarlar. Bu parametrelerin birleşimi nedeniyle, tablo sayfanın yüzeyinin veya derinlik içi yüzeyinin üzerinde bir şekilde yükseltilir. Hepsi seçilen renk kombinasyonuna bağlıdır.

      Not

      Netscape sürüm 4.x tarayıcısı ayrıca BorderColor parametresini de destekler.

      Masa için görev arka plan deseni

      Microsoft Internet Explorer tarayıcısı (Netscape sürümü 4.x tarayıcısı), tüm HTML belgesinin tamamı için yapılabildiği için tablonun arka plan düzenini tanımlayan arka plan parametresini kullanmanıza izin verir. Bu parametre etiketleri ayarlanabilir

      , ve
      , , w.

      Microsoft Internet Explorer tarayıcısı, çizim çerçevesinin ve örgü çizgilerinin esnek kontrolünü ve esnek kontrolüne bir dizi yeni etiket kullanmanızı sağlar.

      Etiketler

      , ve Tablo açıklaması yapısı, tablo başlığının tablolarının, tablonun ana içeriğini ve son dizenin tablosunu vurgulayarak daha kesin olarak belirtilmiştir. Bu etiketler yalnızca etiket çifti içindeki tabloların açıklamasında görünebilir.
      ve .

      Etiketler yapılandırma tablosu

      ve
      .

      Etiketler ve Tablonun üst ve alt altlarını tanımlamak için kullanılır. Bu etiketler masada bir kereden fazla olmaz. Son etiket onlar için ihmal edilebilir. Bir sayfanın ötesine geçen büyük tablolar oluştururken etiket verilerini kullanmak uygundur.

      Etiket Tablo açıklamasında birden fazla kez oluşabilir ve son etiketin kullanımı gereklidir. Bu etiket, etiketin yanı sıra mantıksal bir veri grubu gerçekleştirir. Bitişik sütunların gruplandırılması gerçekleştirme.

      Yeni etiketler kullanırken, tablo ızgarasının çerçevelerini ve çizgilerini daha esnek bir şekilde kontrol etmek mümkündür.

      Tablonun etrafındaki çizim çerçevesinin kontrolü çerçeve etiketi parametresi tarafından gerçekleştirilir.

      Ve tablo ızgarasının çizgileri kural parametresidir. Örneğin, hoparlörler arasına sadece dikey çizgiler yapmak mümkün olur ve tüm tablonun etrafındaki çerçeve yerine, tablonun üstünden ve altından yatay çizgiler verin.

      Çerçeve parametresi aşağıdaki değerleri alabilir:

      • Kutu veya sınır. - çerçeve dört tarafın hepsinden çekilir
      • Yukarıda. - sadece üstten
      • Altında. - sadece alttan
      • Hsides. - Alt ve üst tarafı çizer
      • Vites - Sol ve sağ taraf çizilir
      • Lhs. - sadece sol tarafta
      • RHS. - sadece sağ tarafta
      • Geçersiz. - Harici bir çerçevesiz tablo

      Kurallar parametresi, tablo ızgarasının iç hatlarının çizilmesini kontrol eder ve aşağıdaki değerleri alabilir:

      • Herşey. - Tüm iç çizgiler çizilir
      • Gruplar. - Sadece satırları ayıran grupları çizdi
      • Satır - Çizgileri çizin, dizeleri ayırın
      • Cols. - Sütunları ayıran satırları çizer
      • Yok - İç hatlar çizilmez

      Misal:

      .

      Not

      Tablo ve çerçevelerin masa çizgilerini çizme, yalnızca bir sınır etiketi parametresi varsa gerçekleştirilecektir.

      . Bu parametrenin yokluğunda veya ızgara çizgisinin sıfır değeri ve çerçeve, çerçevenin ve kural parametrelerinin herhangi bir değerleri için bulunmaz.

      Açıklanan özellikleri kullanarak bir tablo oluşturan tam bir HTML kodunun bir örneğini veriyoruz:

      Seçenekler Başlık ve Son Dize

      Esnek çizgiler örneği
      Örgü tablosu

      Sütun başlığı 1. Sütun başlığı 2. Sütun başlığı 3.
      VeriVeriVeri
      VeriVeriVeri
      VeriVeriVeri
      VeriVeriVeri
      VeriVeriVeri
      VeriVeriVeri
      SonuçSonuçSonuç


      İncir. 4.18.Esnek Çizim Hatları Mesh Masaları Tarayıcı Microsoft Internet Explorer

      Bu örnekte, tarayıcının Şekil 2'de gösterildiği gösterge. 4.18, ızgara çizgilerini ve masanın etrafındaki kareleri kontrol etmek için olası seçeneklerden biri. 5 piksel kalınlığın bir çerçevesi, tablonun etrafında (kenarlık \u003d s) yalnızca üst ve alt taraftan (çerçeve \u003d hsides) çizilir. Tablonun içinde veri gruplarını ayıran bir ızgara hatları çizer (Kurallar \u003d Gruplar). Veri grupları, öncelikle, üç etiketin varlığı tanımlanır. , her biri hangi masanın ayrı bir sütunu duyurur grup. İkincisi, etiketler , ve<тгоот> Ayrıca, tablo verilerini, iç yatay çizgilerin çizilmesini belirleyen gruplara ayırın.

      Tablo sütun numaralarını ayarlama

      Microsoft Internet Explorer tarayıcısı (yanı sıra Netscape 4.x tarayıcısı) etiketle ayarlanmasına izin verir

      Değeri, tablodaki sütun sayısını belirleyen Cols parametresi. Bu parametreyi kaydetme Tarayıcıda görüntülenirken tablo düzenini hızlandırmanıza izin verir, çünkü tablo açıklaması kodu indirilinceye kadar sütun sayısını belirlemek mümkündür. Şu anda, bu parametrenin dahil edilmesi, belge yüklemesinin ilerlemesini etkilemez.

      Tabloların dikey dengeleme

      Etiketin son parametresi

      Müfettiş, yalnızca Microsoft Internet Explorer, tablonun metnine göre dikey hizalamasını tanımlayan valign. İşlemi görüntüler için aynı parametreye benzer.

      Not

      Aynı parametrenin kullanımının, bir tarayıcı için ve dil şartnamesi için bile farklı etiketler için hem amaçlanan amacı hem de olası değerlerinde önemli ölçüde farklılık gösterdiğini unutmayın. Bu nedenle, bir konsolide tabloyu kullanım bağlamı dışında çeşitli parametreler kullanarak derlemek imkansızdır. Örneğin, yalnızca tablolardaki hizalama parametresi üç farklı versiyonda kullanılır:

      • etiket için
      Hizalama parametresi sol veya doğru değerleri alabilir ve sırasıyla sola veya sağ kenara basıldığında, tablonun yeri anlamına gelir;
    • etiket için
    • ,
      Hizalama parametresi tork veya alt değerleri alır ve tablo başlığının tablonun üzerinde veya altındaki yerleşimini;
    • tagov için
    • ve Hizalama parametresi sol, sağ veya orta değerleri kabul eder ve yatay tablonun karşılık gelen hücrenin (veya hücrelerin) içeriğini hizalamak anlamına gelir.

      Sektürme bir gösterimine alternatif

      Tabloların desteği, web tarayıcılarının yaygın olarak ortak bir özelliği haline gelmiştir, böylece önlenmesi gereken hiçbir neden yoktur. Bununla birlikte, tablolar yerine kullanabileceğiniz veya bunlara ekleyebileceğiniz alternatif veri sunumu için olası seçenekleri düşünüyoruz.

      Tablo kavramını kullanmayan diğer bazı yöntemler:

      • Simüle edilmiş metni kullanarak. Bu yöntem, tablo desteği henüz mevcut olmadığında HTML dilinin önceki sürümlerinde geleneksel olarak kullanılmıştır. Kullanımı ve şimdiye kadar alaka düzeyi kaybetmedi, çünkü bu tür metinler tamamen metin dahil olmak üzere herhangi bir tarayıcı tarafından düzgün bir şekilde gösterilecektir.
      • Bir tablo içeren bir görüntü kullanarak. Tablo, herhangi bir metin editörü tarafından oluşturulabilir veya hatta Web tarayıcısı tarafından görüntülenebilir ve ardından grafik formatlarından birinde bir resim olarak kaydedilir. Bu, tablo ekranı dinamik kurulumunun tüm esnekliği kaybolduğundan, bu en iyi seçenek değildir. Ek olarak, bir ek dosyayı görüntüle, bir kural olarak, ayrıca, bir kural olarak, HTML tablosunu tanımlayan metnin boyutundan çok daha büyük olacaktır. Muhtemel Uygulama Alanı - Ekranının herhangi bir harici faktörden bağımlılığının (yazı tipleri, tarayıcı işlem modları vb.) Bağlantısı için kesinlikle tanımlanmış boyutların tabloları geçersiz.
      • Tablolar yerine listeleri kullanma. En basit durumlar için, tabloları düzenlemek yerine, HTML dilinde bulunan liste türlerinden biriyle yapmak oldukça mümkündür.

      Masa hazırlığı

      HTML tablolarını hazırlamak için, çoğu görsel oluşturma tabloları için aracı olan herhangi bir editör kullanılabilir. Hotdog Professional Editor'daki tablo hazırlığına bir örnek verelim. Bir tablo oluşturmak için, Ekle menüsünden tabloları seçmek yeterlidir, daha sonra Şekilde gösterilen iletişim kutusu verilecektir. 4.19. Bir tablo oluşturmak, penceredeki karşılık gelen alanların doldurulmasından oluşur. Tablodaki satır ve sütun sayısını belirledikten sonra, aynı iletişim kutusunda gösterilecek olan bireysel masa hücrelerini doğrudan doldurmaya devam edebilirsiniz. Önizleme iletişim kutusu, ortaya çıkan tabloyu dahili bir tarayıcı kullanarak görüntülemenizi sağlayan presleme (Şek. 4.20).


      İncir. 4.19. Tablolar oluşturmak için iletişim kutusu


      İncir. 4.20. Dahili tarayıcı tarafından gösterilen tablo

      Tablo için veri hazırlama tamamlandıktan sonra, Tamam'ı tıklatın. Daha sonra oluşturulan tablo açıklaması kodu düzenlenebilir HTML belgesine yerleştirilecektir. Örneğin, Şekil 2'de gösterilmiştir. 4.19, aşağıdaki kod üretilecektir:

      (Kodun bir kısmı atlandı)

      3Allo tablo
      CTLBE 1. Sütun 2. CTOS 3. Sütun 4.
      1 2 3 4

      Benzer şekilde, Netscape Communicator'ın Netscape Besteci bileşenini kullanırken bu görev çözülür. İncirde. 4.21, gerekli alanları doldurmanın gerekli olduğu bir iletişim kutusunu gösterir. Ek etiket parametrelerini girmek için

      Ekstra HTML düğmesi sağlar. İletişim kutusunun alanlarını doldurduktan sonra, Uygula düğmesine ve ardından tablo hücrelerini doldurma yeteneğine basın (Şek. 4.22).

      İncir. 4.21. Netscape besteci tablosu ayarlarını ayarlamak için iletişim kutusu


      İncir. 4.22. Giriş imlecinin boş tablodaki başlangıç \u200b\u200bkonumu

      Bir vücut masası var. Vücut satır ve sütunlardan oluşur. Tablo doğrultusunda doldurulur.

      Her etiket

      Yeni bir dize oluşturur. Sonraki Yuvalanmış
      Sütunlar oluşturulur. Çok fazla sütun oluşturabilirsiniz. Bu durumda, her satırdaki sütun sayısını izlemeniz gerekir. Örneğin, ilk satırda 5 sütun varsa, aşağıdaki satırlarda 5 sütun olmalıdır. Aksi takdirde, masa yeller. Hücreleri birleştirmek mümkündür.

      HTML'de bir masa nasıl yapılır

      Bir örnek verelim, HTML kodu:

      Örnek tablo
      Sütun 1. Sütun 2.

      Hücreye dikkat etmek

      . Yatay hücreleri birleştirmek için COLSPAN özel özniteliğini kullanıyoruz. Sayısal değeri, birleşmiş sütun sayısını gösterir. Ayrıca bu özniteliğin bir analoğu var: Etiket (Tablo başlığı), Colspan'ı da kaydetmeniz gerekir. Sonuç aynı olacak. Ancak genellikle normal TD'yi kullanır.

      Şimdi tüm etiket niteliklerini ayrıntılı olarak düşünün

      .

      Nitelikler ve Etiket Özellikleri

      Açılış etiketine

      Çeşitli özellikleri reçete edebilirsiniz.

      1. ALIGN \u003d "Parametre" özelliği - Tablo hizalamasını ayarlar. Aşağıdaki değerleri alabilir:

      Demonte Örnekte, tabloyu Align \u003d "Center" ortasındaki hizaladık.

      Bu özellik sadece tabloya değil, aynı zamanda masanın bireysel tablolarına da uygulanabilir.

      . Böylece, farklı hücrelerde, hizalama farklı olacaktır.

      Örneğin

      , , , veya
    • cOLS - Sütunlar arasında çizgi sergileniyor
    • yok - Bütün sınırlar gizlendi
    • satırlar - Sınır, etiket yoluyla oluşturulan masanın sıraları arasında çizilir.
    • 12. Genişlik \u003d "Numara" Özelliği - Tablonun genişliğini ayarlar: piksel veya yüzde olarak.

      13. Sınıf Emlak \u003d "Sınıf Adı" - Tablonun ait olduğu sınıfın adını belirleyebilirsiniz.

      14. Stil özelliği \u003d "Stiller" - Stiller her tablo için ayrı ayrı ayarlanabilir.

      Şimdi kendinizi masaya bırakmanın ve masa hücrelerinin niteliklerini göz önünde bulundurmanın zamanı geldi. Bu özellikler keşif etiketinde yazmanız gerekir.

      ve Aynı parametreler için mevcuttur hiyerarşik olarak herkese uygulanacak
      veya dizeleri
      ... ... ...

      2. Mülkiyet arka plan \u003d "URL" - arka plan çizimi ayarlar. URL yerine, arka plan görüntüsünün adresi yazılmalıdır.

      Misal

      Örnek tablo
      Sütun 1. Sütun 2.

      Sonraki sayfaya dönüştürülür:

      İncelenen örnekte, arka plan görüntüsü IMG klasöründe (HTML sayfası ile aynı dizinde) bulunur ve görüntünün FON.GIF olarak adlandırılır. Lütfen stil eklediğimiz etikette \u003d "renk: beyaz;" . Arka plan neredeyse siyah olduğundan, metin arka plan ile birleşmiyor, metin beyazı yaptık.

      3. özellik bgcolor \u003d "renk" - tablonun renk arka plan ayarlar. Bir renk olarak, tüm paletten herhangi birini seçebilirsiniz (bkz. Kodlara ve Başlıklar HTML Renkleri)

      4. Sınır \u003d "Numara" Özelliği - Tablo çerçevesinin kalınlığını ayarlar. Önceki örneklerde, Border \u003d "1" olarak işaret ettik, bu da çerçevenin kalınlığı - 1 piksel anlamına gelir.

      5. BorderColor \u003d "Renk" Özelliği - Çerçevenin rengini ayarlar. Sınır \u003d "0" ise, çerçeve olmaz ve çerçevenin rengi anlamlı olmaz.

      6. CELLPADDING özelliği \u003d "numara" - çerçeveden piksel cinsinden çerçeveden girinti.

      7. CELLSPACING özelliği \u003d "Numara" - pikseldeki hücreler arasındaki mesafe.

      8. Cols \u003d "Number" özelliği sütun sayısıdır. Belirtmezseniz, tarayıcının kendisi sütun sayısını belirler. Tek fark, bu parametrenin özelliklerinin masayı hızlandırması muhtemel olmasıdır.

      9. özellik çerçevesi \u003d "parametre" - Tablodaki sınırları nasıl gösterilir. Aşağıdaki değerleri alabilir:

      • boşluk - sınır çizmeyin
      • sınır - masa etrafındaki sınır
      • yukarıda - Masanın üst kenarındaki sınır
      • aşağıda - masanın altından sınır
      • hSIDES - Yalnızca yatay sınırlar ekleyin (masanın üstü ve altı)
      • vsides - Sadece dikey kenarlıklar çizin (tablodan sola ve sağa)
      • rHS - sadece masanın sağ tarafında kenarlık
      • lhs - sadece masanın sol tarafında sınır

      10. Yükseklik \u003d "Numara" özelliği - Tablonun yüksekliğini ayarlar: piksellerde veya yüzde olarak.

      11. Özellik kurallar \u003d "parametre" - hücreler arasındaki sınırları gösterecek. Aşağıdaki değerleri alabilir:

      • hepsi - Hatta her hücre masasının etrafında çizer
      • gruplar - çizgi, etiketlerle oluşturulan gruplar arasında görüntülenir.
      .

      Nitelikler ve Özellikler

      1. Özellik align \u003d "parametre" - ayrı bir tablo hücresinin hizalamasını ayarlar. Aşağıdaki değerleri alabilir:

      • sol - sol kenara tesviye
      • merkez - Merkez Hizalaması
      • sağ kenarda sağ - Hizalama

      2. arka plan \u003d "URL" özelliği - hücre arka plan görüntüsünü ayarlar. URL yerine, arka plan görüntüsünün adresi yazılmalıdır.

      3. bgcolor \u003d "renk" özelliği - hücre arkaplanının rengini ayarlar.

      4. BorderColor \u003d "Renk" Özelliği - Hücre çerçevesinin rengini ayarlar.

      5. Char \u003d "Letter" Özelliği - Hizalama yapmanız gereken harfi ayarlar. Hizalama niteliği değeri karakter olarak kurulmalıdır.

      6. ColSpan \u003d "Number" özelliği - Kombine yatay hücre sayısını ayarlar.

      7. Yükseklik \u003d "Numara" özelliği - Tablonun yüksekliğini ayarlar: piksel veya yüzde%.

      8. Genişlik \u003d "Numara" Özelliği - Tablonun genişliğini ayarlar: piksel veya yüzde%.

      9. ROWSPAN \u003d "Numara" özelliği - Birleşik dikey hücre sayısını ayarlar.

      10. Mülkiyet Valign \u003d "Parametre" - Hücrenin içeriğini dikey olarak hizalayın.

      • Üst - Hücrenin içeriğini çizginin üst kenarında hizalayın
      • orta - ortadaki hizalama
      • alt kenarda alt-hizalama
      • temel - Temel Hizalama
      Not 1.

      Etiket için

      . Bir etiket için parametreler
      içinde

      Tablodaki hücrelerin sınırlarını nasıl yapıştırılmamış

      Sınır (hücrelerin kenarlığı) kullanılması durumunda ve hücreler arasında sıfır girintiler, hala yapıştırırlar ve bir çift sınır ortaya çıkar. Kaçınmak için, Stiller tablosuna kayıt yaptırmanız gerekir. Border-çöküş: Daralt:

      ...

      Sevgili Reader, şimdi HTML masa etiketi hakkında daha fazla bilgi edindiniz. Şimdi bir sonraki derse gitmenizi tavsiye ederim.

      ColSpan Nitelikleri'ni kullanarak, RowsPAN, birkaç bitişik sütun hücresini veya dizeleri bir büyük hücreye birleştirebilirsiniz.

      Colspan TEV

      ve . Etiketler arasında yer alan metin , bu stili miras almaz, etiketten beri ne de etiket .

      Belirli bir tablo sütununda yatay metin hizalaması, stil belirleyerek değiştirilebilir metin hizalama. Pseudoclassa için tD: nth-child (n) burada n sütun numarasıdır. Ancak, tablonun tabloları arasında bir nitelik varsa, bu yöntem çalışmaz. colsan..

      Misal
      , Birkaç sütunun hücrelerini aynı satırda birleştirmenizi sağlar.

      Rowspan niteliği - bir sütun içindeki birkaç satırdan hücreler.

      Bu özelliklerde belirtilen sayı, kaynaşacak hücre sayısını gösterir.

      Çünkü Birleşme işlemlerini gerçekleştirirken, kafam karışması çok kolaydır, kağıda masanın ön kroki yapmanızı şiddetle tavsiye ederim.

      Misal:

      ve

      Sudoku tablosu örneğinde satır ve sütunların gruplandırılmasını nasıl kullanabileceğinizi anlamanın en kolay yolu.


      Col Etiketi, parametreleri her sütun için ayrı ayrı ayarlar. Kaynak kodunda nasıl yazılacağı önemli değil:

      veya

      Misal

      HTML Kodu:


      1111 22222 33333 44444 55555 66666 77777 88888 99999

      Tarayıcıda göster:


      1111 22222 33333
      44444 55555 66666
      77777 88888
      99999

      HTML Sayfa Tablosunun Görünümünün Geliştirilmesi

      Cellspacing niteliği, masayı dışından çerçeveleyen saf alan şeridinin boyutunu ayarlamayı mümkün kılar. Varsayılan olarak, tarayıcı bandın tablo hücrelerini 2 piksel olarak paylaşır.

      Cellpadding niteliği, hücrenin içindeki saf boşluk bantlarının boyutunu, içeriğini dış sınırlardan ayırır. Varsayılan olarak, bu değer 1 pikseldir.

      Komşu masa hücrelerine yerleştirilen grafik görüntüleri yapmak için, tek bir bütün gibi görünüyordu, Cellpacing özelliklerini, hücreli sıfır değerleri ayarlamanız gerekir.

      HTML Sayfa Tablosu Sınırlarını Görüntüleme

      Sınır etiketi niteliğinin değeri ise

      Sıfırdan farklıdır, tarayıcı çerçeveye bir tabloya son verir ve masanın komşu satırlarını ve sütunlarını ayırt eder. Çerçeve özelliklerini kullanarak, kurallar, masanın çerçeveli parçaların hangi bölümlerinin gösterilmesi gerektiğini belirleyebilir.

      Çerçeve niteliği, tablonun harici ana hatlarının parçalarını belirlemek için kullanılır.

      Kurallar niteliği - bir dizi iç ayırma hattını gösterir.

      Aşağıda, bu özelliklerin izin verilen değerleridir.

      Çerçeve değeri boşluk Sonuç Tüm satırların üzerindeki tüm çizgilerin üzerindeki tabloyu yukarıdaki satırların üstündeki satırın altındaki satırın altında LHS LHS satırı sol masa çizgisi Grupların grupları arasındaki satır satırı kolonları arasında kolonların grupları arasında kolonlar ve satır arasındaki tüm satırlar arasında herhangi bir kolon hatası yoktur (varsayılan olarak)

      Misal:

      HTML Kodu:


      111 111 111 111 111 111

      Tarayıcıda göster:


      111 111 111
      111 111 111

      HTML sayfa hücrelerinde kelime aktarımı

      Varsayılan olarak, tarayıcı, masa hücresinin içindeki metin kelimelerinin otomatik aktarılmasını sağlar. NowRAP niteliği, tablodaki kelime aktarım işlevini zorla devre dışı bırakır ve metni bir satıra görüntüler. Bu nedenle, bu öznitelik, kısa metin içeren tablo hücrelerine göre uygulanması önerilir, çünkü Aksi takdirde, tarayıcı penceresinin ötesine geçecektir. Bu öznitiğin etiketlerle biçimlendirilmiş hücre metnini etkilemediği söylenmelidir.

      ,
      .

      Yuvalanmış HTML Sayfa Tabloları

      Tabloları bir diğerine takma, web sayfasının görünümünün çok yaygın bir uygulamasıdır. Her şeyden önce, bir ana masa inşa etmek gerekir ve daha sonra bağlı ortaklıkları yerleştirmek için hücrelerinde gereklidir. Tabloyu tanımlama, açıklamalarına bir eğik çizgi sembolü içeren tüm kapanış etiketlerini eklemeyi unutmamalısınız, çünkü Bu tanımlayıcının sadece birinin atlanması masayı önemli ölçüde bozar.

      Ayrıca, nasıl kötüye kullanmamalı, çünkü Bu durumda, tarayıcı sayfası yükü önemli ölçüde yavaşlatılmıştır.

      Yatırım yapılan tabloların biçimlendirilmesi, aslında sayfayı çekici hale getiren genel kurallara göre gerçekleştirilir.

      Misal:

      .
      Kapanış etiketi zorunludur.

      Dikkat: Tüm bu etiketleri kullanmadan, tablo mümkün değildir.

      Şimdi teoriyi kullanmaya ve pratikte bir tablo oluşturmaya çalışalım.

      Görev: Üç sütun olacağı bir satırdan bir masa oluşturun.

      HTML Kodu:


      111 111

      01 01 01 01 111 111 111

      Tarayıcıda göster:


      111 111
      01 01
      01 01
      111 111 111

      09.11.2015


      Herkese merhaba!
      HTML'nin temellerini incelemeye devam ediyoruz. Bu derste, örnekleri söyleyeceğim ve göstereceğim, hTML'de bir masa nasıl yapılır. Ayrıca, tablo hücrelerinin rengini nasıl ayarlayabileceğinizi, tabloyu nasıl merkezleyeceğinizi, tablonun sınırını nasıl yapacağınızı öğrenin, vb.
      HTML tabloları genellikle bazı bilgileri numaralandırmak için HTML'de kullanılır. Önceden, tablolar, web sayfalarının bir çerçevesi oluşturmak için kullanıldı:

      ... Ama bu zaten geçmişte, bugün olduğu gibi, site için çerçeveler oluşturmanın daha verimli yolları var. Sık sık blogumda veya sitede bir masa kullanıyorum, örneğin, gibi.

      Sanırım bir tablo oluşturmak için ne öğreneceğinizi düşündünüz.

      Bir tablodan hangi ana etiketlerden oluşur?

      ○ etiket Tablo
      Bu, sütunlar ve satırlar gibi diğer masa elemanlarının bulunduğu bir tablo oluşturmak için ana kaptır.
      Kapanış etiketi zorunludur.

      ○ etiket T.R.

      İç konteyner

      ……
      yerleştirilen satırlar:

      Sütunlar bir etiket kullanılarak oluşturulur

      seri -1 / Sütun 1 sütun 2. sütun 3.

      Görev: Üç satır ve üç sütun tablosu oluşturun.

      seri -1 / Sütun 1 sütun 2. sütun 3.
      seri -2 / sütun 1 sütun 2. sütun 3.
      sıra -3 / Sütun 1 sütun 2. sütun 3.

      O anın hepiniz netleşene kadar? Kim anlamadı, elini kaldır! Evet, her şeyi anladım, sonra ileri gidiyoruz.

      Şimdi tablo için nitelikleri düşünün.

      * Öznitellikler

      HTML'de Masa Kenarlıkları

      Etiketlemek için görünür bir masa olmak

      uygulamalı Öznitelik "sınır.» .

      Özellik değeri ise « sınır.» "0", sınırlar etiketine kaydolmamaksa, sınırlar görünmeyecek

      öznitelik Sınır , masadaki sınır da görünmeyecek.

      HTML'de Masa Kenarlıkları - Site

      seri -1 / Sütun 1 sütun 2. sütun 3.

      Sonuç:

      Özellikteki değeri değiştirmeye çalışın Sınır üzerinde "10" .

      Masadaki hücreleri nasıl birleştirilir

      Tablodaki hücreleri birleştirmek için öznitelikler "ColSpan" ve "rowspan" etiketine < td.> .

      • cOLSPAN - Hücreleri yatay olarak birleştiriyor;
      • rowspan - Dikey Hücrelerin Birliği.

      Değerlerde, hücrelerin ne kadar birleşmesi gerektiğini gösterir.

      satır 1 sütunu 1
      seri 2 Aşama 1 seri 2 Aşama 2

      Sonuç:

      satır 1 sütunu 1 satır 1 Aşama 2
      seri 2 Aşama 1

      Sonuç:

      Daha karmaşık örneği:

      HTML - Sitede Tablolar

      seri -1 / Sütun 1 sütun 2. sütun 3.
      seri -2 / sütun 1 sütun 2. sütun 3. sütun 4.

      Sonuç:

      Tablonun tabloları arasındaki mesafeyi nasıl artırırsınız

      Metin ve hücrenin sınırı arasındaki mesafeyi artırmak için bir nitelik reçete "Cellpadding" Etiketlemek

      "Cellpadding" niteliğinin değerlerinde, tarımın mesafesini gösterir.

      satır 1 sütunu 1 sütun 2.

      Sonuç:

      Tablodaki hücreler arasındaki mesafeyi yakınlaştırmak için özniteliği kullanın "CELLSPACING" Etiketlemek

      Özelliğin değerlerinde "CELLSPACING" Hücreler arasındaki mesafeyi belirtin

      satır 1 sütunu 1 sütun 2.

      Sonuç:

      HTML tablo arka plan nasıl yapılır

      HTML tablosunun arka planını etiketlemek için

      ve

      böyle nitelikler:

      • BGColor - Tüm masanın arka plan rengi veya her hücre ayrı ayrı. Renk kod veya kelime ile ayarlanır.
      • Arka plan-masadaki telefon bir desenle doludur.
      HTML - Sitede Tablolar
      seri -1 / Sütun 1 sütun 2. sütun 3.
      seri -2 / sütun 1 sütun 2. sütun 3. sütun 4.

      Sonuç:

      HTML tablosunda bir resim eklenir

      Etiket arasında HTML tablosuna bir resim eklemek için

      Etiketi ekle .

      satır 1 Hücre 1 hücre 2.

      Sonuç:

      Değerler piksel (PX) veya yüzde (%) olarak ayarlanır

      İçeriği HTML tablosunda hizalayın

      İçeriği HTML tablosundaki hizalamak için etiketlemek için kullanın

      öznitelik "Hizala" ve "Valign" :

      Hizalayın. - Tablodaki yatay içerik hizalaması.
      Değerler:

      • ayrıldı. - İçeriğe sol tarafa basın (varsayılan);
      • merkez merkeze takın;
      • sağ - İçeriğe sağ parçaya basın

      Valign. - Tablodaki içeriğin dikey hizalaması.
      Değerler:

      • Üst. İçeriği üste basın;
      • alt İçeriğe dibe basın;
      • orta İçeriği ortada ayarlayın
      metin
      varsayılan olarak hücre İçerik Sağ kenar boyunca yatay olarak hizalayın, dibe dikey olarak basın
      İçerikler, sol kenar boyunca yatay olarak hizalayın, dikey olarak - üste basın İçerik Merkezde yatay olarak hizalanır, orta ortada dikey olarak basın

      Sonuç:

      HTML tablosunu merkezdeki nasıl hizalamayı

      Tabloyu merkezdeki hizalamak için, masa etiketini almanız gerekir.

      :

      Tablo kodu

      seri -1 / Sütun 1 sütun 2. sütun 3.

      Masaya ek ve ana etiketler

      Web sitesi için masa
      İsim 1. İsim 2.
      1 2

      Sonuç:

      Öyleyse tablolarla bitti. Artık herhangi bir karmaşıklığın tablosu oluşturabilirsiniz. Bu dersi koruyun. Herhangi bir masa oluşturmaya çalışın.
      Bir sonraki derste seni bekliyor. Blogumu güncellemek için abone olun.

      Önceki yazı
      Sonraki Gönderi

      Çerçevelerle masa

      İsim vermek Soyadı
      Larisa İsaeva
      Dmitriy Kolesnikov

      SONUÇ:

      Çerçevesiz masa

      Çerçevelerle masa

      Nitelikler Tagov
      ve Birleştirme hücreleri için
      Misal
      gelincik
      ağırlık boyut
      erkekler 1.2 - 2,5 kg 70 cm'ye kadar
      kadınlar 0.7 - 1,0 kg 40 cm'ye kadar

      SONUÇ:

      gelincik
      ağırlık boyut
      erkekler 1.2 - 2,5 kg 70 cm'ye kadar
      kadınlar 0.7 - 1,0 kg 40 cm'ye kadar

      HTML5 standardına göre, daha önce tüm kullanılan tablo nitelikleri gibi sınır., cELLSPASING., cep telefonu. et al. Artık desteklenmiyor ve validator kullanımı koddaki hataları görüyor. Tabloları yapmak için, tüm eski tablo niteliklerini değiştirebileceğiniz CSS-Stilleri kullanmanız gerekir. Örneğin, bir nitelik yerine cELLSPASING. Tablo hücreleri arasındaki mesafeyi değiştirmek için, özellik kullanılır. sınır aralığı.ve içeriği tablonun hücrelerindeki hizalamak için - Özellikler metin hizalama. ve dikey aling.. Tablolar için CSS-Styles

      Etiketler gruplama dizeleri HTML tablosu

      Daha karmaşık tablolar oluşturmak için etiketleri kullanabilirsiniz:

      Misal
      Bira tüketimi
      AD SOYAD. lithrov
      TOPLAM 250
      Ivanov Ivan Ivanovich 133
      Petrov Petr Petrovich 117

      SONUÇ:

      Etiketler Gruplandırma Sütunları HTML Tabloları

      Tag niteliği
      sarı kırmızı

      SONUÇ:


      Stili ayarlamaya çalışmayın metin hizalama. Tagov için

      ... bir soyundan değil ne etiket
      İsim vermek Fiyat, ovmak.)
      Solaryumun dakika başına ödeme (4 dakikadan)15
      50 dakikalık solaryum (14 ruble / min, 1 ay)700
      100 dakika solaryum (13 ruble / min, 2 ay)1300
      200 dakika solaryum (12 ruble / min, 3 ay)2400

      SONUÇ:


      Ancak, tablonun tabloları arasında bir nitelik varsa, bu yöntem çalışmaz. colsan..