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Н3>
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Н3>
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.
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.
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
,
,
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
Kent
H.
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
Kent
H.
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.8
139
(Tablo devamı)
Kent
H.
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.1
285
Primorsk
6.7
137
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
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 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
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
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
,
,
ve
. 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
.
Etiketler yapılandırma tablosu , 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 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.
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.
Veri
Veri
Veri
Veri
Veri
Veri
Veri
Veri
Veri
Veri
Veri
Veri
Veri
Veri
Veri
Veri
Veri
Veri
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:
3Allo tablo
CTLBE 1.
Sütun 2.
CTOS 3.
Sütun 4.
1
2
3
4
(Kodun bir kısmı atlandı)
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:
Bu özellik sadece tabloya değil, aynı zamanda masanın bireysel tablolarına da uygulanabilir.
veya dizeleri
. Böylece, farklı hücrelerde, hizalama farklı olacaktır.
Örneğin
...
...
...
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.
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. , , ,
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.
.
Nitelikler ve Özellikler
ve
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.
Ü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
Aynı parametreler için mevcuttur
. Bir etiket için parametreler
hiyerarşik olarak herkese uygulanacak
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
,
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:
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:
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
. 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.
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
İç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
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
sarı
kırmızı
SONUÇ:
Stili ayarlamaya çalışmayın metin hizalama. Tagov için
ve
. Etiketler arasında yer alan metin
...
, bu stili miras almaz, etiketten beri
bir soyundan değil ne etiket
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
İ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..