Html ile tablo nasıl yapılır? Ural Devlet Pedagoji Üniversitesi

Bölüm 4

HTML tabloları

HTML'deki en güçlü ve yaygın olarak kullanılan araçlardan biri tablolardır. Tablo veri sunumu kavramı ek açıklamaya ihtiyaç duymaz. V HTML tabloları geleneksel olarak yalnızca veri sunma yöntemi olarak değil, aynı zamanda Web sayfalarını biçimlendirme aracı olarak da kullanılır. Burada, bir belge oluşturmak için tablo görünümünün uygun bir yol olduğu gerçek hayattan belgelere örnekler verilmiştir. İncirde. 4.1, satırlara ve sütunlara ayrılmış sayısal verileri temsil etmek için tabloları kullanmanın tipik bir örneğini gösterir. İncirde. 4.2 Tablonun kullanımı, yalnızca belgeyi biçimlendirme, sayfa öğelerinin göreli konumunu ayarlama amacına hizmet eder. Böyle bir belgeyi görüntülerken, hücrelerinin etrafındaki çerçeveler çizilmediğinden, onu oluşturmak için bir tablonun kullanıldığı hemen anlaşılmaz.

HTML dilinin ilk sürümü sağlamadı özel araçlar tabloları görüntülemek için, çünkü esas olarak basit metin yazmak için tasarlandı. HTML belgelerinin uygulama alanlarının geliştirilmesiyle, bir dizi satır ve sütunun varlığının tipik olduğu veri sunma görevi acil hale geldi. İlk başta, sütun hizalı verileri içeren belgelerin oluşturulması, giriş tarafından gerekli hizalamanın sağlandığı önceden biçimlendirilmiş metin kullanılarak gerçekleştirildi. doğru miktar boşluklar. Bir çift etiketin içindeki metnin 

VE
tek aralıklı yazı tipinde görüntülenir ve tüm boşluklar ve sekmeler önemlidir. Bu tür metinleri hizalama işi manuel olarak yapıldı ve bu da belgelerin oluşturulmasını önemli ölçüde yavaşlattı. Tablo verileri için destek, başlangıçta tüm büyük tarayıcılarda uygulandığından ve yalnızca HTML 3.2 belirtiminde önemli bir süre düzeltildikten sonra fiili standart haline geldi.

Ancak tablo oluşturmaya yönelik özel araçlar, önceden biçimlendirilmiş metin kullanma olasılığını ortadan kaldırmaz. Tabloların kullanımı satır ve sütunlardan oluşan verilerle sınırlı değildir. Kullanımlarından biri, düz metin, resimler, diğer tablolar, vb.'den oluşabilen bir sayfadaki çeşitli verilerin düzenini düzenlemektir. Bu bölüm, tablo oluşturma kurallarına ve bunların kullanım örneklerine ayrılmıştır.

Pirinç . 4.1. Tipik HTML tablosu örneği


Pirinç . 4.2. Kenarlıksız bir tablo örneği

En basit HTML tablolarını oluşturma

Önce basit tablolar oluşturmak için gerekli ve yeterli olan minimum etiket kümesini ve parametrelerini ele alalım ve ardından ayrıntılı açıklamalarına geçelim.

Tabloların açıklaması, belgenin bölümünün içinde yer almalıdır. ... Bir belge, rastgele sayıda tablo içerebilir ve tablolar iç içe yerleştirilebilir. Her tablo etiketiyle başlamalıdır

ve etiketiyle bitirin
... Bu etiket çiftinin içinde tablonun içeriğinin bir açıklaması bulunur. Herhangi bir tablo, her biri tek tek hücreler için verileri belirten bir veya daha fazla satırdan oluşur.

Her satır etiketle başlar (Tablo Satırı) ve etiketiyle biter... Bir satırdaki tek bir hücre, bir çift etiketle çerçevelenir ve(Tablo Verileri) veya ve(Tablo Başlığı). Etiket genellikle tablo başlığı hücreleri için kullanılır ve - veri hücreleri için. Kullanımdaki fark, yalnızca hücrelerin içeriğini görüntülemek için varsayılan olarak kullanılan yazı tipinin yanı sıra hücre içindeki verilerin konumunda yatmaktadır. Tip hücrelerinin içeriği Kalın ve ortalanmış olarak görüntülenir (ALIGN = MERKEZ, VALIGN = ORTA). Bir etiket tarafından tanımlanan hücreler varsayılan olarak verileri sola (ALIGN = SOL) ve ortada (VALIGN = MIDDLE) dikey yönde hizalanmış olarak görüntüler.

Etiketler ve tablo satırı açıklamasının dışında görünemez ... Bitiş kodları, ve göz ardı edilebilir. Bu durumda, bir satırın veya hücre açıklamasının sonu, bir sonraki satırın veya hücrenin başlangıcı veya bir tablonun sonudur. Bitiş tablosu etiketi göz ardı edilemez.

Tablodaki satır sayısı, açılış etiketlerinin sayısına göre belirlenir. ve sütun sayısı azami sayı veya tüm satırlar arasında. Bazı hücreler herhangi bir veri içermeyebilir, bu tür hücreler arka arkaya aşağıdaki bir çift etiketle tanımlanır - , ... Bir satırın sonundaki bir veya daha fazla hücre veri içermiyorsa, açıklamaları atlanabilir ve tarayıcı gerekli sayıda boş hücreyi otomatik olarak ekleyecektir. Aynı boyutta farklı sayıda sütunun farklı satırlarda bulunduğu tabloların oluşturulmasına izin verilmediğini takip eder.

Tablo, birkaç etiket içine alınmış bir başlığa sahip olabilir. ve... Tablo başlığının açıklaması etiketlerin içinde yer almalıdır.

ve
etiketlerin kapsamı dışında herhangi bir yerde , veya ... HTML dili spesifikasyonuna göre, başlık açıklamasının konumu daha sıkı bir şekilde düzenlenmiştir: etiketten hemen sonra yer almalıdır. ve ilkinden önce ... Bu kurala uymanızı öneririz.

Varsayılan olarak, tablo başlığı metni onun üzerine yerleştirilir (ALIGN = TOP) ve yatay olarak ortalanır.

Listelenen etiketler, sayısı ve değerleri farklı olan parametrelere sahip olabilir. Bununla birlikte, en basit durumda, etiketler, varsayılan değerleri alan parametreler olmadan kullanılır.

Bu bilgi, temel tablolar oluşturmak için oldukça yeterlidir. bir örnek verelim en basit tablo, ekranı Şekil 2'de gösterilen iki satır ve iki sütundan oluşur. 4.3.

En basit tabloya bir örnek

1. satırın 1. hücresi Hücre 2 Satır 1
2. satırın 1. hücresi Hücre 2 Satır 2


Pirinç. 4.Z. En basit tabloya bir örnek

Bir sayfada tabloları görüntüleme

Tabloları tanımlayan etiketlerde kullanılabilecek çeşitli parametrelerin amacına bakalım.

Tablo başlığı

Tablo başlık etiketi TOP (tablonun üstündeki başlık) veya BOTTOM (tablonun altındaki başlık) olabilen tek geçerli ALIGN parametresine sahiptir. ALIGN = TOP değerine karşılık gelen ALIGN parametresi atlanabilir. Yatay yönde tablo başlığı her zaman ortalanır. Tablonun başlığı olmayabilir. Tablo başlığı olarak, çoğu durumda, HTML spesifikasyonu tarafından düzenlenen, ancak gerçekte etiketler arasında düz metin kullanılır. ve bölümde kullanılan herhangi bir HTML öğesinin yazılmasına izin verilir ... Tablo başlığı girdisine bir örnek:

Tablonun alt kısmında yer alan başlık

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

Pirinç. 4.4. Başlıklı tablo

Microsoft Tarayıcı Internet Explorer sağlar Ek özellikler başlığın konumunu seçmek için ALIGN parametresi, yukarıda açıklanan değerlerle birlikte yatay hizalama için SOL, MERKEZ ve SAĞ değerlerini kabul eder. Bunun, yaygın olarak kullanılan ALIGN parametresinin hem yatay hem de dikey hizalama için kullanılabileceği nadir durumlardan biri olduğuna dikkat edin. Örneğin, ALIGN = RIGHT, başlığın sağda ve tablonun üstünde konumlandırılmasını sağlayacaktır. ALIGN = BOTTOM yazarsanız, yukarıdaki örnekte olduğu gibi başlık tablonun altında yer alacaktır. Ancak, ALIGN parametresi aynı başlıkta iki kez kullanılamaz. Bu nedenle, dikey hizalama için özel bir parametre ek olarak tanıtıldı - TOP veya BOTTOM değerlerini alan VALIGN. Örneğin, bir tablonun alt kısmında, sola hizalanmış bir başlık için açıklama şöyle görünür:

Sola hizalanmış alt başlık

Microsoft Internet Explorer'da başlığın bu açıklamasını içeren tablo aşağıdaki gibi görüntülenecektir (Şekil 4.5). Bu örnek Netscape'de görüntüleniyorsa, başlık varsayılan olarak, yani tablonun üstüne ve yatay olarak ortasına yerleştirilecektir.

Pirinç. 4.5. Microsoft Internet Explorer tarafından tablo başlığının yatay hizalanması

Tablo başlığı yatay hizalama özellikleri, HTML belirtiminin bir uzantısıdır, Netscape Navigator tarayıcısı tarafından desteklenmez ve bu nedenle yalnızca kesinlikle gerekli olduğunda kullanılmalıdır.

Etiket parametreleri

Tablo oluştururken kullanılan ana etiket etiketidir.

... Her biri atlanabilen bir dizi parametre ile kullanılabilir. Geçerli seçenekler tarayıcıya göre değişir. Etiketteki HTML spesifikasyonuna göre
aşağıdaki parametreler kullanılabilir: KENARLIK, HÜCRE BOŞLUĞU, HÜCRE YATIRIMI, GENİŞLİK, HİZALAMA. NetScape ve Microsoft Internet Explorer tarayıcıları, yukarıda listelenen beş parametreye ek olarak HEIGHT ve BGCOLOR parametrelerinin kullanılmasına izin verir. Bazı tarayıcılar başka parametrelerin ayarlanmasına da izin verir. Sık kullanılan etiket parametrelerinin amacını ele alalım
.

KENARLIK parametresi

BORDER parametresi, esasen tablonun ızgara çizgilerini veren ve tüm tablonun etrafındaki her hücrenin etrafındaki bir kenarlığın oluşturulmasını kontrol eder. Varsayılan olarak, hiçbir çerçeve çizilmez ve kullanıcı ekranda yalnızca tablo hücrelerinin eşit aralıklı metnini görür. Örneğin, tablolar kullanılarak uygulanan çok sütunlu listeler veya şekillerin ve metnin tam göreli konumunun belirtilmesi gibi, kenarlıksız tablo kullanımının oldukça haklı olduğu birçok durum vardır. Bununla birlikte, çoğu durumda, tabloların geleneksel kullanımı için, hücrelerini ızgara çizgileriyle birbirinden ayırmak yararlıdır, bu da tabloda yer alan bilgilerin algılanmasını ve anlaşılmasını kolaylaştırır.

Tabloya çerçeve eklemek için koda eklemeniz gerekir.

sayısal bir değer olabilen bir BORDER parametresi.

Örneğin,

veya
.

Parametrenin sayısal değeri, tüm tablonun etrafına çizilen piksel cinsinden kenarlığın kalınlığını belirler, ancak bu değer her hücrenin etrafındaki kenarlıkların kalınlığını etkilemez. Sayısal bir değerin yokluğunda, çerçeveleri görüntüleme stili farklı tarayıcılar için farklılık gösterebilse de, genellikle minimum değere (1) eşit olduğu varsayılır. Tüm tablonun etrafındaki kenarlığın ve hücrelerin etrafındaki kenarlıkların görüntülenmesini bağımsız olarak kontrol etme yeteneği mevcut değildir.

10 piksel kenarlıklı bir tablo örneği, Şek. 4.6.


Pirinç. 4.6. 10 piksel kenarlıklı tablo

HTML 3.0 spesifikasyonu, BORDER parametresi için bir değer içermiyordu. Bu yalnızca HTML 3.2'de yapılır. Örneğin, Microsoft Internet Explorer'ın önceki sürümleri sayısal değer atamasına izin vermiyordu.

BORDER parametresinin yokluğunda çerçevelerin çizilmediğini, ancak onlar için boşluk bırakıldığını unutmayın (bu yalnızca Netscape için geçerlidir). BORDER parametresinin yokluğunda veya varlığında tablonun toplam boyutu değişmez (BORDER = 0 belirtildiğinde istisnadır). Böylece, bu durumlarda iki bitişik hücre arasındaki minimum mesafe, çerçevenin kalınlığının iki katına, yani iki piksele eşit olacaktır. BORDER = 0 ayarlanarak hücreleri birbirine mümkün olduğunca yakın yerleştirmek mümkündür, yani çerçeve yoktur. Bazı tarayıcılar BORDER parametresinin sayısal değerini ayarlamayı desteklemeyebilir, bu durumda sıfıra eşit bir değer yok sayılır ve tablo kenarlıklarla çizilir.

İşte bazı örnekler:

Gösterilen her üç örnek de Netscape tarayıcısı tarafından farklı şekilde işlenecektir. Burada, varsayılan bir değerden söz edilemeyen oldukça benzersiz bir durum olduğuna dikkat edin. BORDER parametresinin atlandığı üçüncü örnek, bu parametrenin bulunduğu herhangi bir örnekten farklıdır. Microsoft Internet Explorer için ikinci ve üçüncü örnekler aynıdır, dolayısıyla bu tarayıcı için BORDER parametresinin varsayılan değeri sıfırdır.

HÜCRE BOŞLUĞU parametresi

Parametre gösterim formu: CELLSPACING = num, burada num, parametrenin piksel cinsinden sayısal değeridir ve ihmal edilemez. Sayı değeri, hem yatay hem de dikey olarak bitişik hücreler arasındaki (daha kesin olarak hücre çerçeveleri arasındaki) mesafeyi belirler. Varsayılan olarak, değerin iki olduğu varsayılır. Geleneksel olarak yayımlama sistemlerinde bitişik tablo hücrelerinin ortak bir sınırı olduğunu unutmayın. HTML tablolarında, yukarıdaki şekilde açıkça görüldüğü gibi, varsayılan olarak aralarında boşluk bırakılır (Şekil 4.6). HÜCRE ARALIĞI = 0 olarak ayarlarsanız, bitişik hücrelerin sınırları birleşecek ve tablonun tek bir ızgarası izlenimi yaratacaktır (Şekil 4.7).


Pirinç. 4.7. HÜCRE BOŞLUĞU = 0 olan tablo

CELLPADDING parametresi

Parametre gösterimi CELLSPACING'e benzer. Num değeri, hücre sınırı ile hücre içindeki veriler arasındaki boş alan (dolgu) miktarını belirler. Varsayılan olarak, değerin bir olduğu varsayılır. CELLPADDING parametresinin sıfıra ayarlanması, hücre metninin bazı bölümlerinin kenarlarına değmesine neden olabilir, bu da estetik açıdan hoş görünmez.

İncirde. 4.8, CELLPADDING = 10 olan bir tablo örneğini gösterir.


Pirinç. 4.8. CELLPADDING'li Tablo = 10

CELLPADDING ve CELLSPACING parametreleri çok benzer şekilde çalışır. Sınırsız bir tablo için, bir parametreyi veya diğerini değiştirmek aynı sonuca yol açar. Her iki parametre de karşılık gelen kenar boşluklarını hem yatay hem de dikey olarak etkiler. Ne yazık ki, yatay ve dikey kenar boşluklarının ayrı yönetimi, örneğin görüntülerdeki kenar boşlukları için yapılır (etiketin HSPACE ve VSPACE parametreleri). ), sağlanmamıştır.

Üç parametrenin tümü - KENARLIK, HÜCRE YOLLAMASI ve HÜCRE BOŞLUĞU birbirinden bağımsız olarak hareket eder, bunlardan herhangi biri atlanırsa varsayılan değeri alınır. Özellikle, yukarıdaki parametrelerin tümü atlanırsa, bitişik hücrelerden gelen veriler arasındaki minimum mesafe 6 piksel olacaktır (Netscape için). Bu değer, HÜCRE BOŞLUĞU için iki piksel, HÜCRE PANOSU için bir piksel ve her hücrenin kenarlığı için bir pikselden oluşur. En kompakt tablo, aşağıdaki açıklama belirtilerek elde edilecektir:

Sadece bu versiyonda hücreler birbirine yakın yerleştirilecektir. Kullanım örneği, tüm hücrelerinde yan yana yerleştirilmesi gereken aynı boyutta resimler içeren bir tablodur.

GENİŞLİK ve YÜKSEKLİK parametreleri

Tabloları görüntülerken, genişlikleri ve yükseklikleri tarayıcı tarafından otomatik olarak hesaplanır ve birçok faktöre bağlıdır: tüm belgenin açıklamasında belirtilen parametrelerin değerleri, bu tablo, tek tek satırları ve hücreleri, hücrelerin içeriği , ayrıca belgeyi belirli bir tarayıcıda görüntülerken ayarlanan parametreler , örneğin yazı tipi ve boyutu, görünüm alanı boyutu vb. Görüntüleme sırasında, tablo boyutları bu faktörler dikkate alınarak otomatik olarak hesaplanır; tabloyu en uygun biçimde - tabloyu görünüm alanına sığacak şekilde düzenlemek için. Büyük belgeleri görüntülemenin genel şeması, kural olarak, belgenin içeriğinin dikey olarak doğrusal olarak kaydırılmasına ve çeşitli tablolar, resimler vb. editörler... Çoğu metin düzenleyici olarak (ör. Microsoft Word) ve HTML tarayıcıları, (mümkünse) metni otomatik olarak biçimlendirir, böylece çizgilerin uzunluğu görünüm alanının genişliğini aşmayacaktır. Bu, belgenin yatay olarak kaydırılması ihtiyacını ortadan kaldırır. Benzer eylemler tabloları olan tarayıcılar tarafından da gerçekleştirilir - mümkünse, bunları tablonun genişliği görünüm alanının genişliğini aşmayacak şekilde biçimlendirin. Tabloların genişliğinin, yüksekliği ile karşılaştırıldığında her şeyden önce hesaplanması yapılan birincil parametrenin daha önemli olduğu sonucuna varılabilir.

Çoğu durumda, tablonun dinamik olarak boyutlandırılması, görüntü alanının gerçek alanının verimli kullanımıyla estetik olarak orantılı bir görüntüyle sonuçlanır. Ancak, tablonun genişliğini veya yüksekliğini zorlamak gerekebilir. Bu amaçla etiketin WIDTH (tablo genişliği) ve HEIGHT (tablo yüksekliği) parametreleri kullanılır.

... Gösterim formu: WIDTH = num veya WIDTH = num%, burada num, tüm tablonun genişliğinin piksel cinsinden veya tüm pencere boyutunun yüzdesi olarak sayısal değeridir. Bunun gerekli olduğu bir durumu hayal etmek zor olsa da, %100'den büyük değerlerin belirtilmesine izin verildiğini unutmayın. Örnek:

.

Tek tek hücreler için benzer parametreler ayarlanabilir. Parametre için belirli bir değer belirtmenin, örneğin WIDTH = 200, tablonun her durumda belirtilen genişliğe sahip olacağı anlamına gelmediğini, ancak yalnızca mümkün olduğunda korunacak olan önerilen genişliği belirlediğini unutmayın. Bunu örneklerle açıklayalım. Verilen koşullar altında varsayılan olarak belirtilenden daha az genişliğe sahip olacak bir tablo olsun. Bu durumda tarayıcı, tablonun tüm sütunlarını orantılı olarak genişleterek tablonun genişliğini gerekli olana yükseltecektir. Görünüm alanını daraltmak, tablonun genişliğini değiştirmez ve görüntülemek için yatay olarak kaydırmanız gerekebilir. Tablonun varsayılan genişliği belirtilenden daha büyükse, tarayıcı öncelikle belirtilen genişliğin gerekli olandan daha büyük olduğu tek tek sütunların genişliğini azaltarak ve ikinci olarak Tablonun yüksekliğini artırarak ayrı hücrelerdeki metni birkaç satıra bölün. Bu eylemler, tablonun gerekli boyutunu sağlamayabilir ve ardından mümkün olan en küçük genişliğe sahip olacaktır. Görünüm alanı daraltıldığında boyutları olmayan tablolar için de aynı işlemler yapılır.

Farklı tarayıcılar için tabloları ayarlamak için özel algoritmalar biraz farklılık gösterebilir.

ALIGN parametresi

Verilen etiket parametresi

tablonun görünüm penceresindeki yatay konumunu tanımlar. Geçerli değerler SOL (sola yaslanmış) ve SAĞA (sağa yaslanmış) şeklindedir. Varsayılan olarak, tablolar sola hizalanır. Geçerli değerlerin, hizalama parametresi - CENTER için tipik bir değer içermediğini unutmayın. Bazı HTML kaynakları, bu durumda geçerli olarak MERKEZİ (ortalanmış) belirtir. Bu, HTML spesifikasyonunu takip eder, ancak pratikte hem Netscape Navigator hem de Microsoft Internet Explorer yalnızca iki değer uygular. Gerçek şu ki, etikette ALIGN parametresinin varlığı
sadece tablonun konumunu belirlemekle kalmaz, aynı zamanda metnin, görüntülerin akışına benzer şekilde, masanın etrafında ters taraftan akmasına izin verir. Hiçbir durumda masanın etrafına her iki taraftan metin sarma sağlanmaz. Daha hassas akış kontrolü için etiketi kullanın
CLEAR parametresiyle aynı şekilde ... ALIGN parametresi atlanırsa, tablonun sağındaki ve/veya solundaki boşluk, genişliğine bakılmaksızın her zaman boş olacaktır. Tablonun etrafına sarılması için metin gerekmiyorsa, konumunu görünümün ortasında elde edebilirsiniz. Bunu yapmak için, örneğin, tüm tablo açıklamasını bir çift etiketin içine koyabilirsiniz.
ve
.

İşte, ekranı Şekil 1'de gösterilen, akan metin içeren bir tablo örneği. 4.9.

Etrafında metin akan tablo


bir yetişkin

Petersburg'un nüfusu

  • İbrahim
  • İskender
  • Alexey
  • Albert
  • Anadolu
  • Andrey

  • Arkadiy
  • Boris
  • Vadim
  • sevgili
  • Valery
  • Reyhan

  • Victor
  • canlı
  • Vladimir
  • Vladislav
  • Vyaçeslav

  • Gennady
  • George
  • Hermann
  • Gregory
  • Dmitry

    		•

  • Evgeniy
  • Efim
  • İvan
  • İgor
  • İlya
  • Yusuf
  • Konstantin

  • bir aslan
  • Leonid
  • Michael
  • Nikolay
  • Oleg
  • Paul
  • Peter

  • Roman
  • Semyon
  • Sergey
  • Stanislav
  • Edward
  • Yuri
  • Yakup

    		•








    Adı geçen en yaygın 43 isim, örneklemin %92'sini kapsıyor.

    Pirinç. 4.9. Akan metin içeren kenarlıksız tablo

    Bu belge, tabloyu takip eden metnin tablonun sağına yerleştirilmesine izin veren ALIGN = LEFT hizalama parametresine sahip kenarlıksız bir tablodan oluşur. Tablo, iki hücre içeren yalnızca bir satırdan oluşur. Her hücre sırasız bir listenin bir parçasını içerir.

      ... Bir listeyi görüntülemek için bir tablo kullanmak, bir listeyi birden çok sütuna zorlamanın bir yoludur ve bu örnekte de gösterilmiştir. Tablonun sağ tarafında yer alan metnin tamamı buraya sığmayabilir, tablodan sonra devam edecektir. Tarayıcı görünüm alanının genişliğini azaltmak için bu örneği kullanmayı deneyin ve bir noktada tüm metin tablonun altında görünecektir. Tablo boyunca metin akışını zorla kesmek için (örneğin, sonraki metin tabloyla mantıksal olarak ilişkili değilse ve altında yer alması gerekiyorsa), kodu kullanmanız gerektiğini hatırlayın.
      CLEAR parametre seti ile. Bu örnek için yazmanız gerekir
      veya
      ... Bazı tarayıcılar CLEAR parametresinin bir değer olmadan yazılmasına izin verir, ancak bu önerilmez. Aynı görevi gerçekleştirmek için birden çok satır beslemesi belirterek
      CLEAR parametresi olmadan (metnin birkaç satır aşağı kaydırılması için önceki örnekte olduğu gibi) veya yeni bir paragrafın başlangıcı için birkaç kod olmadan

      Yanlış karar.

      Görüntüsü Şekil 2'de gösterilen böyle bir sayfa oluşturmak için biraz farklı bir örnek verelim. 4.10.

      Metni kaydırmadan tablo

      En yaygın erkek isimleri

      St. Petersburg'un yetişkin nüfusu

    • İbrahim
    • İskender
    • Alexey
    • Albert
    • Anadolu
    • Andrey

    • Arkadiy
    • Boris
    • Vadim
    • sevgili
    • Valery
    • Reyhan

    • Victor
    • canlı
    • Vladimir
    • Vladislav
    • Vyaçeslav

    • Gennady
    • George
    • Hermann
    • Gregory
    • Dmitry

      		•

    • Evgeniy
    • Efim
    • İvan
    • İgor
    • İlya
    • Yusuf
    • Konstantin

    • bir aslan
    • Leonid
    • Michael
    • Nikolay
    • Oleg
    • Paul
    • Peter

    • Roman
    • Semyon
    • Sergey
    • Stanislav
    • Edward
    • Yuri
    • Yakup

      		•

      Sunulan veriler, St. Petersburg'da yaşayan 18 yaş üstü 5.000 erkek hakkında bilgi içeren temsili bir örneğin analizi temelinde elde edildi.
      En sık rastlanan bu 43 isim, örneklemin %92'sini kapsıyor.
      Diğer isimlerin her birinin görülme sıklığı %0.3'ü geçmez.

      Pirinç. 4.10.Üç sütunlu kenarlıksız bir tablo

      Önceki örnekten farklı olarak, tablonun etrafında akan metin yoktur. Belgenin tamamı, bir satırda üç hücre içeren bir başlık içeren bir tablodan oluşur. İlk iki hücre önceki örneği tamamen tekrarlar. Üçüncü hücre, ilk iki hücrenin içeriği hakkında yorum yapan metni içerir. Önceki durumda açıklandığı gibi zorunlu metin sonu ayarlamaya gerek yoktur. Tabloyla ilgili tüm metinler üçüncü hücrenin içinde ve sonraki metin - tüm tablonun açıklamasının bitiminden sonra bulunmalıdır.... İlk durumda iki sütunlu listenin ortasında, ikinci durumda ise tablonun üç sütununun ortasında yer alan başlık dışında, her iki örnek de tam ekranda görüntülendiğinde aynı görünür. Ancak, son örnekte görüntü alanı küçültüldüğünde, metnin hiçbir kısmı tablonun altına inemez, dolayısıyla yapısını bozabilir.

      Bir tablo içindeki verileri biçimlendirme

      Bir tablo içindeki her bir hücre, bağımsız biçimlendirme için bir alan olarak düşünülebilir. Metnin görüntülenmesini yöneten tüm kurallar, bir hücre içindeki metni biçimlendirmek için kullanılabilir. Belgenin gövdesinde görünebilen hemen hemen tüm HTML öğelerine hücrenin içinde izin verilir. , metnin düzenini kontrol eden etiketler dahil -

      ,
      ,

      , başlık kodları -

      önce

      , karakter biçimlendirme etiketleri -<В>, , , , , , , etiketler grafik görüntüler ekler , hiper metin bağlantıları<А>Hemen, tek bir hücre içinde belirtilen etiketlerin kapsamının, bitiş etiketinin varlığından bağımsız olarak bu hücrenin sınırlarıyla sınırlı olduğunu vurguluyoruz. Örneğin, bir hücrenin içinde bir metin rengi tanımlanmışsa - , o zaman sonlandırma kodu olmasa bile veya tablonun birkaç hücresine veya satırına yerleştirildiğinde, sonraki hücrenin metni varsayılan renkte yansıtılacaktır.

      Tablo hücreleri içindeki verileri biçimlendirmek için aşağıdaki seçenekler kullanılabilir.

      Hücrelerin içeriği için hizalama seçenekleri ALIGN ve VALIGN'dir. Kodlarda kullanılabilir , ve ... Yatay hizalama parametresi HİZALAMA SOL, SAĞ ve MERKEZ olabilir (varsayılan ve MERKEZİ için ). VALIGN dikey hizalama parametresi ÜST (üst), ALT (alt), ORTA (orta), TABAN (taban çizgisi) olabilir. Varsayılan, ORTA'dır. Satır taban çizgisi hizalaması, tüm hücrelerdeki tek bir satırın metninin tek bir satıra bağlanmasını sağlar. Kod düzeyinde hizalama seçeneklerini ayarlama belirli bir satırın tüm hücreleri için hizalamayı belirlerken, satırın her bir hücresinde belirtilen parametrelerin etkisini geçersiz kılan kendi parametreleri tanımlanabilir. .

      Burada, ilk sütunun hücrelerindeki verilerin sağa hizalandığı, ikinci sütunun ortalandığı ve üçüncünün sola hizalandığı (varsayılan) bir tablo örneği verilmiştir:

      Tablo öğelerini hizalama

      hücre 1 hücre 2 hücre 3
      hücre 4 hücre 5 hücre 6

      Bu örneğin tarayıcı tarafından görüntülenmesi Şekil 2'de gösterilmektedir. 4.11.

      Pirinç. 4.11. Tablo hücrelerinde verileri hizalama

      NOWRAP parametresi, hücre metnini otomatik olarak satırlara ayırma özelliğini devre dışı bırakır. Kodlarda kullanılabilir , ve ... Tabloları dinamik olarak yeniden boyutlandırma yeteneğini önemli ölçüde azaltabileceği ve algılarını bozabileceği için bu parametrenin haksız kullanımından kaçınılmalıdır. Çoğu durumda, gerçekten yeni bir satırda sözcük kaydırmanın yasaklanmasını gerektiren tek tek hücreler için NOWRAP uygulamak yeterlidir. Sözcük kaydırma, yalnızca sözcükler (boşluklar) arasındaki ayırıcılar tarafından gerçekleştirilir ve bazı durumlarda, metni belirli yerlerde bölmeyi yasaklamak için boşluk karakteri yerine, bölünmeyen boşluk (Breaking Space) kodunu ayarlayın. Sayısal bir değer ile belirli bir değerin ölçüm birimi arasındaki boşluğun tavsiye edilmediği durumlar buna örnek olarak verilebilir; soyadı ve baş harfleri arasında. Yani, metin 650 km veya Yeltsin B.N. şeklinde yazmanız tavsiye edilir 650 km ve Yeltsin B.N.

      WIDTH ve HEIGHT parametreleri kodlarda kullanılabilir ve ... Sözdizimi, etiket için bu parametrelerin sözdizimine benzer.

      ... Değerleri, bu parametrelerin yazıldığı hücrenin genişliğini veya yüksekliğini belirler. Değerler piksel olarak veya tüm tablonun boyutunun yüzdesi olarak belirtilebilir. Microsoft Internet Explorer yalnızca WIDTH değerinin piksel olarak ayarlanmasına izin verir. Tablo, satırlar ve sütunlardan oluşan tutarlı bir yapı olduğundan, bir hücrenin genişliğini ayarlamak, hücrenin bulunduğu tüm sütunun genişliğini, yüksekliği ayarlamak ise tüm satırı etkiler. Bir sütundaki genişlik değeri yalnızca bir hücrede belirtilirse, bu değer tüm sütunun genişliği olur. Bu tür birkaç gösterge varsa, maksimum değer seçilir. Aynı özellikler dizeler için de geçerlidir.

      Karmaşık tablolar, birkaç bitişik hücreyi yatay veya dikey olarak bir araya getirme ihtiyacı ile karakterize edilir. Bu özellik, kodlarda ayarlanan COLSPAN (COLiimn SPANning) ve ROWSPAN (ROW SPANning) parametreleri kullanılarak uygulanır.

      bu grubun ayrı sütunları için ayarlar belirlenir. Ayrıca, etikette gerekirse, değerleri verilen grubun tüm sütunları için geçerli olan hizalama parametreleri belirtilebilir. Etikette belirtilen parametre değerleri , etiketteki değerleri geçersiz kıl ... etikette olduğunu unutmayın bu örnekte, öncekinden farklı olarak SPAN parametresi yoktur. Gruptaki öğelerin sayısı etiketi takip edenler tarafından belirleneceğinden burada kullanımı anlamsızdır. etiketler ... Bu nedenle, etiketin SPAN parametresinin verilen herhangi bir değeri geçersiz kılınacaktır.

      İncirde. 4.17, yukarıdaki kodun uygulanmasının sonucunu ve etikette RULES = GROUPS girişiyle böyle bir tabloyu görüntülemenin bir varyantını gösterir.

      veya ... Gösterim formu: COLSPAN = num, burada num, geçerli hücrenin yatay olarak kaç sütun genişletileceğini belirleyen sayısal bir değerdir. ROWSPAN parametresinin kullanımı benzerdir, yalnızca burada geçerli hücrenin dikey olarak yakalaması gereken satır sayısını belirtirsiniz. Varsayılan olarak, bu parametreler bire ayarlanmıştır. Bir hücre için her iki parametrenin değerlerinin aynı anda ayarlanmasına izin verilir. Bu parametrelerin değerlerini doğru bir şekilde ayarlamak, özellikle çoğu HTML düzenleyicisi, sonraki nesil HTML kodları ile yalnızca en basit tabloları görsel olarak oluşturmanıza izin verdiğinden, çok basit bir iş olmayabilir.

      İncirde. 4.12, aşağıdaki HTML kodu kullanılarak elde edilen bir tablo görüntüleme örneğini gösterir:

      COLSPAN ve ROWSPAN parametrelerini kullanma

      İki satıra yayılan hücre İki sütuna yayılan hücre
      hücre 3 hücre 4
      hücre 5 hücre 6 hücre 7


      Pirinç. 4.12. Birden çok satıra veya sütuna yayılan hücreler içeren tablo

      Hücrelerin kayma parametrelerinin değerlerinin dikkatsizce ayarlanması, karşılıklı örtüşmelerine ve sonuçların tahmin edilemez olduğu çatışmalara yol açabilir. Genişletilmiş hücreler için tipik bir kullanım, birkaç bitişik sütun veya satır için ortak bir başlıktır.

      Genişletilmiş hücrelerin yanlış oluşturulduğu bir HTML kodu örneği (gösterimi Şekil 4.13'te gösterilmiştir).

      Genişletilmiş hücrelerin yanlış kullanımı

      hücre 1 hücre 2

      hücre 3
      (yaygın
      ha üç
      çizgiler)
      hücre 4hücre 5
      hücre 6 Hücre 7 (iki sütuna yayılmış)

      Pirinç. 4.13. Genişletilmiş hücrelerin yanlış tanımının sonucu (metin yerleşimi)

      BGCOLOR parametresi, tüm tablo, tek tek satırlar veya hücreler için arka plan rengini ayarlar. Etiketlerde oluşabilir

      , , herhangi bir bilgi veya veri olarak kabul edilmeyen bir veya daha fazla boşluk içermez. Görünmez veriler içeren hücreler, örneğin kod veya satır besleme kodu içerebilir.
      veya hücrenin arka plan rengiyle eşleşen herhangi bir metin. Veri içeren hücreler (görünmez olsalar bile) tüm tarayıcılar tarafından aynı şekilde görüntüleniyorsa, boş hücreler farklı şekilde görüntülenecektir. Netscape tarayıcısı boş bir hücre göstermez, yani bu hücrenin bulunduğu yer, veri içeren hücrelerden farklı olarak hücrenin arka plan rengiyle değil, sayfanın arka plan rengiyle boyanacaktır. Boş hücrelerin etrafına kenarlık çizilmez. Boş hücreli bir tablo örneği, Şekil 1'de gösterilmektedir. 4.15.


      Pirinç. 4.15. Boş tablo hücresi farklı tarayıcılar tarafından farklı şekilde işleniyor

      Microsoft Internet Explorer, hem bu hücreleri hem de diğer hücreleri, hücrelerin arka plan rengiyle görüntüler. NSCA Mosaic gibi bir tarayıcı, kullanıcıya uygun seçenekleri seçerek boş tablo hücrelerinin çıktısının doğasını belirleme yeteneği sağlar. Bu özelliklerin bilinmesi, kullanıcının seçtiği tarayıcıdan bağımsız olarak uygun bir şekilde görüntülenecek tabloları tasarlamanıza olanak sağlayacaktır. Bazı durumlarda bunun için bazı boş hücreler yerine tek bir kod içeren hücreler oluşturmak yeterlidir.

      Tablo sütunlarındaki verileri hizalama

      Tablo oluştururken sık karşılaşılan bir sorun, tek tek satırlar veya sütunlar için hizalama seçeneklerinin ayarlanmasıdır. Geçerli satırın tüm hücrelerinin içeriğini hizalamak için, kodda gerekli parametreleri ayarlamanız yeterlidir.

      ... Bununla birlikte, çoğu durumda, sütun homojen veriler içerdiğinden, aynı sütundaki tüm öğeler için aynı hizalamayı sağlamak çoğu zaman gereklidir. HTML'nin önceki sürümlerinde, bunun için etikette belirtilen COLSPEC (COLumn SPECification) parametresinin kullanılması önerildi.
      ve ... Bu özellik HTML belirtimi tarafından desteklenmez, ancak hem Netscape hem de Microsoft Internet Explorer tarafından desteklenir. Kayıt formu, etiketle aynıdır , yani: BGCOLOR = değer, burada değer renk içeriğini RGB biçiminde veya adını belirtir.

      Örnek:

      		veya .

      iç içe tablolar

      Bireysel tablo hücreleri, bölümde izin verilen hemen hemen tüm dil etiketlerini ve verileri içerebilir belge. Özellikle, bir tablo hücresinin içine başka bir tablo yerleştirilebilir. Bu tür tablolara iç içe tablolar denir. Yapım kuralları, tabloların yapımından farklı değildir ve ayrı bir açıklamaya ihtiyaç duymaz. Tabloları destekleyen tüm tarayıcıların, çeşitli iç içe yerleştirme düzeylerine sahip karmaşık tabloları doğru bir şekilde yansıtmadığını, bu nedenle kullanımlarının dikkatli olmasını gerektirdiğini belirtelim.

      İşte bir iç içe yerleştirme düzeyi kullanan bir tablo örneği.

      Leningrad Bölgesi Şehirleri

      Leningrad Bölgesi Şehirleri

      H - şehir nüfusu (bin nüfus, 1992)

      P - St. Petersburg'dan uzaklık (km)

      Petersburg'a Bağlı Şehirler
      ŞehirHP
      Zelenegopsk 13.6

      50

      Kolpino144.6

      26

      Kronştad 45.2

      48

      Lomonosov 42.0

      40

      Pavlovski 25.4

      30

      Petrodvorets 83.8

      29

      Puşkin 95.1

      24

      Sestroretsk 34.9

      35

      Tüm şehirler bağımlı
      Yönetim
      Petersburg, sahip
      doğrudan şehir
      Telefon numaraları.

      Bölgesel şehirler
      ŞehirHP
      Boksitogorsk 21.6

      HİZALAMA = SAĞ> 245

      Balkhov 50.3

      HİZALAMA = SAĞ> 122

      Bcevolozhsk 32.9

      24

      Vyborg 80.9 130
      Vısotsk 1.0

      HİZALAMA = SAĞ> 159

      Gaçina 80.9 46
      İvangorod 11.9

      HİZALAMA = SAĞ> 147

      Kamennogorsk 5.9 157
      Kingisepp 51.5

      HİZALAMA = SAĞ> 138

      Kirishi 53.8

      HİZALAMA = SAĞ> 115

      Kirovsk 23.8

      55

      Lodeynoye Kutbu 27.3

      HİZALAMA = SAĞ> 244

      liga 41.8139

      (Tablonun devamı)
      ŞehirHP
      luban 4.7

      85

      Yeni Ladoga 11.2

      HİZALAMA = SAĞ> 141

      sevindirici 22. 9

      HİZALAMA = SAĞ> 40

      Pikalevo 25.1

      HİZALAMA = SAĞ> 246

      Destek 23.1285
      Primorsk 6.7137
      Priozersk 20.5

      HİZALAMA = SAĞ> 145

      Svetogorsk 15.8

      HİZALAMA = SAĞ> 201

      arduvazlar 42.6

      HİZALAMA = SAĞ> 192

      çamlık 57.6

      81

      Tihvin 72.0

      HİZALAMA = SAĞ> 200

      Tosno 33.8

      53

      K liscelburgh 12.5

      64

      Pirinç. 4.14.İç içe tablolar örneği

      Bu örneğin görüntülenmesinin sonucu Şekil 2'de gösterilmektedir. 4.14.

      İlk bakışta, örnekte tablo iç içe geçme yok gibi görünüyor. Aslında, belgenin tamamı, bir başlık ve beş hücre içeren yalnızca bir satırdan oluşan kenarlıksız bir tablodur. Böyle bir tablonun düzenlenmesi, yalnızca sayfadaki verilerin düzenlenmesi amacına hizmet eder. İlk hücrenin içinde, kendi başlığına sahip olan ve üç sütundan oluşan başka bir tablo ve ardından ortada hizalanmış metin bulunur. Üçüncü ve beşinci hücreler ayrıca ayrı tablolar içerir. İkinci ve dördüncü hücreler boştur, herhangi bir veri içermezler ve genişliğini belirleyen tek bir WIDTH parametresine sahiptirler. Amaçları, tabloların bulunduğu üçüncü ve beşinci hücrelerin yanı sıra birinci ve üçüncü hücreler arasındaki girintiyi ayarlamaktır. Bu, böyle bir girinti ayarlamak için olası seçeneklerden biridir. Diğer bir seçenek ise hücreler arasındaki mesafeyi belirleyen CELLSPACING parametresini kullanmaktır, ancak bu parametre şu anda gerekli olmayan hem yatay hem de dikey girintileri ayarlar. Ek olarak, belirtilen genişliğe sahip boş bir hücre, CELLSPACING parametresi tarafından belirtilen alanın aksine (CELLPADDING'de olduğu gibi) görünüm alanı daraltıldığında daralacaktır. Tarayıcıdaki görüntü alanının genişliğini azaltmak veya aynı sonuçlara yol açacak şekilde metni görüntülemek için kullanılan yazı tipinin boyutunu artırmak için bu örneği kullanmayı deneyin. Tablolar arasındaki mesafe sıfıra indirilerek tüm bilgilerin mümkün olduğu kadar uzun süre aynı anda görülmesi sağlanacak, ancak daha fazla değişiklik tabloya zarar vermeyecek, yatay kaydırma yeteneği sağlayacaktır. Benzer bir şemaya göre, yalnızca tablolardan değil, aynı zamanda resimlerden, metin parçalarından vb. Oluşan bilgilerin yerleşimini düzenleyebilirsiniz.

      Bina tablolarının özellikleri

      Bu bölüm, bireysel tarayıcıların bazı özel yeteneklerinin yanı sıra tablo oluşturma ve görüntülemenin bazı inceliklerini tartışır.

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

      Tabloların farklı tarayıcılar tarafından sunulmasının özelliklerinden biri de boş hücrelerin görüntülenmesidir. Dilin açıklamasına göre, sayıları herhangi bir satırda diğer satırlardan daha az ayarlanmışsa, tüm tarayıcılar satırları boş hücrelerle doldurmalıdır. Ayrıca, veri içermeyen hücreler tablonun herhangi bir yerinde bulunabilir. Boş hücreler ile görünmez veri içeren hücreler arasında bir fark vardır. Bir çift etiketin içindeki boş hücrelerde

      		ve
      ve tablodaki her sütunun hizalamasını ve genişliğini belirledi. Örneğin, colspec = "L40 R50 C80" ayarı, tablonun üç sütunu için hücrelerdeki verilerin hizalanmasını belirledi: ilk sütun için - SOL, ikincisi için - SAĞ ve üçüncü - MERKEZ için ve ayrıca her sütun. HTML geliştikçe, bu seçenek kaldırıldı ve şu anda dil belirtiminin bir parçası değil ve çoğu tarayıcı tarafından desteklenmiyor. Sonuç olarak, Netscape Navigator'ın bu sorunu çözmek için herhangi bir özel aracı yoktur ve tek seçenek, varsayılan hizalamayı kullanmak veya gerektiğinde her hücrede uygun değerleri ayarlamaktır.

      Microsoft Internet Explorer özel etiketler sağlar -

      ve ... Bu etiketler açıklamadan hemen sonra görünmelidir.
      etiketin ilk oluşumundan önce .

      Etiket parametreleri

      ve parametre değerlerinden etkilenen bitişik sütunların sayısını belirleyen SPAN ve ilgili sütunun (veya sütunların) tüm hücrelerinde verilerin yatay hizalamasını belirleyen ALIGN olabilir. ALIGN parametresi için geçerli değerler SOL, SAĞ ve MERKEZ'dir. SPAN parametresi için varsayılan değer birdir.

      Etiket

      ayrıca hücrelerdeki verilerin dikey hizalamasını belirleyen VALIGN parametresini ayarlamanıza olanak tanır. VALIGN parametresi için geçerli değerler ORTA, TOP ve ALT'tır.

      Etiketler arasındaki fark

      ve ilkinin, sütunlar için veri hizalama parametrelerini ayarlamanın yanı sıra, birkaç sütunu koşullu olarak bir grupta birleştirmesi gerçeğinde yatmaktadır. Bu kombinasyonun etkisi, aşağıda açıklanan RULES parametresi kullanıldığında ortaya çıkar. Varsayılan olarak, bir tablodaki tüm sütunlar bir grup olarak kabul edilir. Etiket yalnızca bir gruptaki ayrı sütunlardaki verilerin hizalamasını tanımlamak için kullanılmalıdır.

      Bir örnek verelim. İlk üçündeki veriler sağa ve sonraki üçü ortada olacak şekilde 6 sütun içeren bir tablo oluşturmak istediğinizi varsayalım. Bu sorunu çözmek için aşağıdaki HTML kodunu yazmalısınız:

      (tablo için veriler)

      Bu kodun görüntülenmesinin sonucu Şekil 2'de gösterilmektedir. 4.16.

      Pirinç. 4.16. Hücre gruplarındaki veriler için farklı hizalama seçeneklerine sahip tablo

      Başka bir örnek. Önceki tabloda ilk iki sütunun sağa ve üçüncünün - ortada hizalanması gerektiğini ve üç sütunun hepsinin gruplandırılması gerektiğini varsayalım. Sonraki üç sütun da birlikte gruplandırılmalı ve ilk grupla aynı hizaya sahip olmalıdır. Bu sorunu çözmek için aşağıdaki HTML kodunu yazmalısınız:

      (tablo için veriler)

      Bu örnekte, etiketten sonra

      , gruplandırmanın anlamını görebileceğiniz.

      Tavsiye

      Etiketlerin kapsamından beri

      ve tek tarayıcı Microsoft Internet Explorer ile sınırlıdır, bunları dikkatli kullanmalısınız. Bu etiketlerin kullanım kolaylığı açıktır, ancak pratikte çoğu tablo, gerektiğinde her tablo hücresi için uygun ALIGN hizalama parametresi kullanılarak oluşturulur; bu, tablo kaynak kodunun boyutunu önemli ölçüde artırır, ancak herhangi bir tarayıcıda görüntülemeye izin verir.


      Pirinç. 4.17. Gruplandırılmış Sütun Tablosu

      Tablo kenarlıklarının rengini ayarlama

      Yalnızca Microsoft Internet Explorer'a özgü birkaç seçenek daha, tablo kenarlıklarının rengini seçmenize olanak tanır - BORDERCOLOR, BORDERCOLORLIGHT ve BORDERCOLORDARK. Bu parametreler etiketlerde ayarlanabilir

      , ... Renk adı veya onaltılık değeri bu parametreler için değer olarak kullanılabilir. BORDERCOLOR parametresi, tüm tablo kenarlığı öğelerinin rengini belirler ve diğer iki parametre, BORDERCOLOR değerini geçersiz kılarak ayrı bileşen kenarlıklarının rengini belirtir. BORDERCOLORLIGHT parametresi, tüm tablonun sol ve üst kenarlarını ve buna göre her hücrenin sağ ve alt kenarlarını belirtilen renge boyar. İkinci parametre BORDERCOLORDARK zıt kenarların renklerini ayarlar. Bu parametrelerin eyleminin birleşimi nedeniyle, tablo sayfa yüzeyinin biraz üzerinde yükseltilmiş veya derinleştirilmiş görünecektir. Hepsi seçilen renk kombinasyonuna bağlıdır.

      Not

      Netscape 4.x tarayıcısı ayrıca BORDERCOLOR parametresini de destekler.

      Bir tablo için arka plan görüntüsünü ayarlama

      Microsoft Internet Explorer (ve ayrıca Netscape 4.x tarayıcısı), BACKGROUND parametresinin, tüm HTML belgesi için yapılabileceği şekilde, tablo için arka plan görüntüsünü tanımlamasına izin verir. Bu parametre etiketlerde ayarlanabilir

      , ve
      , , w

      Microsoft Internet Explorer, tabloları yapılandırmak ve çerçevelerin ve ızgara çizgilerinin çizimini esnek bir şekilde kontrol etmek için bir dizi yeni etiket kullanmanıza olanak tanır.

      Etiketler

      , ve tablo başlığı hücrelerini, tablonun ana içeriğini ve son satırı vurgulayarak tablo açıklamasının yapısını daha sıkı bir şekilde ayarlayın. Bu etiketler yalnızca bir çift etiket içindeki tabloların açıklamasında görünebilir.
      ve .

      Tablo yapılandırma etiketleri

      ve
      .

      Etiketler ve Bir tablonun üstbilgisini ve altbilgisini tanımlamak için kullanılır. Bu etiketler tabloda en fazla bir kez görünebilir. Bunlar için bitiş etiketi atlanabilir. Bu etiketlerin kullanılması, bir sayfanın ötesine geçen büyük tablolar oluştururken kullanışlıdır.

      Etiket tablonun açıklamasında birden çok kez oluşabilir, ancak bitiş etiketinin kullanılması gerekir... Bu etiket, verilerin mantıksal olarak gruplandırılmasını etiketle aynı şekilde gerçekleştirir. bitişik sütunları gruplama.

      Yeni etiketlerin kullanılmasıyla tablonun kenarlıklarını ve ızgara çizgilerini daha esnek bir şekilde kontrol etmek mümkün hale geliyor.

      Tablonun etrafındaki çerçevelerin çiziminin kontrolü, etiketin FRAME parametresi ile gerçekleştirilir.

      ve RULES parametresiyle tablonun kılavuz çizgileri. Örneğin, sütunlar arasında sadece dikey çizgiler çizmek ve tüm tablonun etrafına bir kenarlık yerine tablonun üstünde ve altında yatay çizgiler vermek mümkün hale gelir.

      FRAME parametresi aşağıdaki değerleri alabilir:

      • KUTU veya KENARLIK - çerçeve dört taraftan da çizilir
      • ÜSTÜNDE - sadece üst taraftan
      • AŞAĞIDA - sadece alt taraftan
      • HSIDES - alt ve üst taraflar çizilir
      • VSIDES - sol ve sağ taraflar çizilir
      • LHS - sadece sol tarafta
      • sağ - sadece sağ tarafta
      • GEÇERSİZ - dış çerçevesiz masa

      RULES parametresi tablonun iç grid çizgilerinin çizimini kontrol eder ve aşağıdaki değerleri alabilir:

      • HERŞEY - tüm iç hatlar çizilir
      • GRUPLAR - sadece grupları ayıran çizgiler çizilir
      • SATIRLAR - çizgileri ayıran çizgiler çizilir
      • COLS - sütunları ayıran çizgiler çizilir
      • YOK - iç hatlar çizilmez

      Örnek:

      .

      Not

      Tablo ve çerçevelerin ızgara çizgilerinin çizimi, yalnızca etiketin BORDER parametresi mevcutsa gerçekleştirilecektir.

      ... Bu parametre yoksa veya değeri sıfırsa, ÇERÇEVE ve KURALLAR parametrelerinin herhangi bir değeri için ızgara çizgileri ve çerçeveler bulunmayacaktır.

      Burada açıklanan yetenekleri kullanarak bir tablo oluşturan eksiksiz bir HTML kodu örneği verilmiştir:

      Başlık ve özet satırının vurgulanması

      Esnek hat kontrolü örneği
      ızgara 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ç


      Pirinç. 4.18. Microsoft Internet Explorer tarayıcısını kullanarak tablonun ızgara çizgilerinin esnek çizimi

      Bu örnekte, ekranı Şekil 2'de tarayıcı tarafından gösterilmiştir. 4.18'de, tablonun etrafındaki kılavuz çizgileri ve sınırları kontrol etmek için olası seçeneklerden biri gösterilmektedir. Tablonun etrafına 5 piksellik bir kenarlık çizilir (BORDER = S) sadece üst ve alt taraflarda (ÇERÇEVE = HSIDES). Veri gruplarını ayırmak için tablonun içine kılavuz çizgileri çizilir (KURALLAR = GRUPLAR). Veri grupları, öncelikle üç etiketin varlığı ile tanımlanır. , her biri ayrı bir tablo sütunu bildirir grup. İkincisi, etiketler , ve<тгоот>ayrıca tablo verilerini, iç yatay çizgilerin çizimini belirleyen gruplara ayırın.

      Bir tablodaki sütun sayısını ayarlama

      Microsoft Internet Explorer (aynı zamanda Netscape 4.x tarayıcısı) etikette belirtmenize olanak tanır

      değeri tablodaki sütun sayısını belirleyen COLS parametresi. Bu parametrenin yazılması, bir tarayıcıda görüntülendiğinde tablonun düzenini hızlandırmanıza olanak tanır, çünkü tablo açıklama kodunun yüklenmesini tamamlamadan önce sütun sayısını belirlemek mümkün olur. Şu anda bu parametrenin etkinleştirilmesi, belge yükleme ilerlemesini hiçbir şekilde etkilemez.

      Tabloların dikey hizalanması

      Son etiket parametresi

      yalnızca Microsoft Internet Explorer'a özel, tablonun metne göre dikey hizalamasını belirleyen VALIGN'dir. Eylemi, görüntüler için olana benzer.

      Not

      Aynı parametrenin kullanımının, aynı tarayıcı için ve dil belirtimi çerçevesinde bile farklı etiketler için hem amaç hem de olası değerler açısından önemli ölçüde farklılık gösterebileceğini unutmayın. Bu nedenle, uygulama bağlamı dışında çeşitli parametrelerin kullanımına ilişkin bir özet tablo derlemek mümkün değildir. Örneğin, ALIGN parametresi yalnızca üç bölümdeki tablolarda kullanılır. farklı seçenekler:

      • etiket için
      ALIGN parametresi SOL veya SAĞ değerleri alabilir ve sırasıyla sol veya sağ kenara hizalanmış tablonun konumu anlamına gelir;
    • etiket için
      • ,
      ALIGN parametresi, TOP veya BOTTOM değerlerini alır ve tablo başlığının tablonun üstündeki veya altındaki konumu anlamına gelir;
    • etiketler için
      • ve ALIGN parametresi SOL, SAĞ veya MERKEZ değerlerini alır ve tablodaki ilgili hücrenin (veya hücrelerin) içeriğini yatay olarak hizalamak anlamına gelir.

      Tablo görünümüne alternatif

      Tablo desteği, Web tarayıcılarının yaygın bir özelliği haline geldi, bu nedenle bunları kullanmaktan kaçınmak için çok az neden var veya hiç yok. Yine de, tablolar yerine veya bunlara ek olarak kullanılabilecek alternatif veri temsilleri için olası seçenekleri ele alacağız.

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

      • Önceden biçimlendirilmiş metin kullanma. Bu teknik, geleneksel olarak tablo desteğinin henüz mevcut olmadığı HTML'nin ilk sürümlerinde kullanılıyordu. Bu tür metinler, tamamen metin olanlar da dahil olmak üzere herhangi bir tarayıcı tarafından doğru şekilde görüntüleneceğinden, kullanımı bu güne olan ilgisini kaybetmedi.
      • Tablo içeren bir resim kullanma. Tablo herhangi bir metin düzenleyici ile oluşturulabilir veya hatta bir Web tarayıcısı tarafından görüntülenebilir ve ardından aşağıdakilerden birine resim olarak kaydedilebilir. grafik formatları... Değil en iyi yol, çünkü bu, tabloların görünümünü dinamik olarak özelleştirme esnekliğini kaybeder. Ayrıca, depolama ihtiyacı var ek dosya ayrıca boyutu genellikle HTML tablosunu açıklayan metnin boyutundan önemli ölçüde daha büyük olacak bir görüntü ile. Olası bir uygulama alanı, ekranının herhangi bir dış faktöre (yazı tipleri, tarayıcı çalışma modları vb.) Bağımlılığının kabul edilemez olduğu, kesin olarak tanımlanmış boyutlardaki tablolardır.
      • Tablolar yerine listelerin kullanılması. En basit durumlarda, tabloları düzenlemek yerine HTML'de bulunan liste türlerinden biriyle idare etmek oldukça mümkündür.

      Tabloların hazırlanması

      Çoğu düzenleyici için araçlar içeren HTML tabloları hazırlamak için herhangi bir düzenleyici kullanılabilir. görsel oluşturma tablolar. HotDog Professional editöründe tablo hazırlamaya bir örnek verelim. Bir tablo oluşturmak için, Ekle menüsünden Tablolar öğesini seçin, ardından Şekil 1'de gösterilen iletişim kutusu. 4.19. Bir tablo oluşturmak, penceredeki uygun alanların doldurulmasından oluşur. Tablodaki satır ve sütun sayısını belirledikten sonra, aynı iletişim kutusunda gösterilecek olan tablonun tek tek hücrelerini doğrudan doldurmaya geçebilirsiniz. İletişim kutusunda, yerleşik tarayıcıyı kullanarak ortaya çıkan tabloyu görüntülemenizi sağlayan bir Önizleme düğmesi vardır (Şekil 4.20).

      Pirinç. 4.19. Tablo oluşturmak için iletişim kutusu


      Pirinç. 4.20. Yerleşik tarayıcı kullanılarak gösterilen tablo

      Tablo için verilerin hazırlanmasını tamamladıktan sonra Tamam butonuna tıklayınız. Ardından oluşturulan tablo açıklama kodu, düzenlenen HTML belgesine eklenecektir. Şekil 2'de gösterilen örnek için. 4.19, aşağıdaki kod üretilecektir:

      (kodun bir kısmı atlanmıştır)

      masa başı
      Sütun 1 2. sütun Sütun 3 4. sütun
      1 2 3 4

      Benzer şekilde, bu sorun Netscape Communicator programının Netscape Composer bileşeni kullanılarak çözülür. İncirde. 4.21, gerekli alanları doldurmanız gereken bir iletişim kutusu gösterir. Girmek ek parametreler etiket

      Ekstra HTML düğmesi sağlanır. Diyalog kutusundaki alanları doldurduktan sonra Apply (Uygula) düğmesine tıklamanız gerekir ve ardından size tablo hücrelerini doldurma fırsatı verilecektir (Şekil 4.22).

      Pirinç. 4.21. Netscape Composer Tablosu Seçeneklerini Belirtmek İçin İletişim Kutusu


      Pirinç. 4.22. Boş bir tabloda giriş imlecinin başlangıç ​​konumu

      HTML tabloları o kadar işlevseldir ki, onları tüm siteleri dizmek (okumak) için kullanabilirsiniz. Şimdi bir web sayfasına basit HTML tabloları eklemek, yalnızca işaretlemeyi ayrıştırmak, ancak tasarıma dokunmamak hakkında konuşacağız, çünkü tabloları CSS stilleriyle süslemek daha iyidir.

      Tablo etiketleri ve öznitelikleri

      Tablolar oluşturmak için ihtiyacınız olan temel öğeler şunlardır:

      - tablonun içinde bulunduğu kap (aynı
        etiketli veya
          numaralı listeler için).
        1. sınır- çerçevelerin kalınlığını belirleyen bir nitelik. Bunun yerine border CSS özelliğini kullanmak daha iyidir.
      tablonun imzasını belirtir. Kapsayıcıyı kullanmanıza gerek yoktur, ancak yine de tabloya başlık vermeye karar verirseniz, bunu etiketin hemen arkasına koyun. , dış hücreler ve çizgiler.
      • - bir tablo satırı içeren eşleştirilmiş bir etiket (yatay olarak aynı seviyede bulunan hücreler).
      • , içinde aynı sayıda hücre olacak: bir etiket - bir hücre.
      • sütunları, ortak özellikleri tanımlamak için kodu karmaşıklaştırmadan hızlı bir şekilde gruplamanıza olanak tanır. Bir kapsayıcı kullanarak bir tablonun mantıksal kısımlarını birbirinden ayırabilirsiniz. Etiketten sonra bulunur yaratır Yeni hat... Daha fazla iç içe
      - tablo başlık hücresini oluşturan etiket. Dışa doğru, içeriği diğer hücrelerdeki içerikten farklıdır - genellikle içindeki metin tarayıcı kalın ve ortalanmıştır.
      		• - basit bir hücrenin oluşturulduğu bir kap. Dize bu tür kaç etiket içerecek (etiket
      , değilse, sonra .
      • ile aynı amaç için kullanılır . içerebilir ama tersi değil.
    • açıklık- kapsayıcı özelliklerinin uygulanacağı sütunların sayısını belirten bir nitelik
      • .
      • , ve - tabloyu sırasıyla üst (başlıklar), ana (gövde) ve alt (son) parçalara ayırmanıza izin veren kaplar. Bir HTML tablosunda, bu etiketlerin sırası, kapsayıcıların sırası ile aynıdır. , ve
      HTML belgesinde.
    • kol açıklığı hücreleri bir satırda birleştirmek için gerekli. Öznitelik değeri, birleştirilecek hücre sayısını belirten bir sayı içerir.
    • satır aralığı hücreleri sütunlar halinde birleştirir.

      • Tablo oluşturma örneği

      Bir HTML belgesi oluşturun ve içine aşağıdaki kodu kopyalayın:

      Örnek tablo

      Web sitesi oluşturma araçları
      RandevuAlet
      İşaretlemeHTMLXHTML
      KayıtCSS
      GeliştirilmesiPHPpiton

      Tarayıcıda belge şöyle görünecektir:

      Hangi kod satırlarının neyden sorumlu olduğunu analiz edelim.

      • - Çerçevelerin kalınlığını ona ayarlayarak masayı açtı.
        • - adını verdi.
        • - bir hat açtı.
        • - başlık tasarımına sahip bir hücre yarattı.
        • - satırda ikinci bir başlık hücresi oluşturdu. colspan parametresi, bu hücrenin yatay olarak iki tane işgal etmesi gerektiğini belirtti.
        • - hattı kapattı. Çizgilerin geri kalanı aynı şekilde oluşturuldu.
        • - tablonun ikinci satırını normal, üstbilgi değil hücrelerle ekledi. Sonraki satırlar ve hücreler benzer şekilde yerleştirildi.
        • Web sitesi oluşturma araçları
        Randevu Alet
        İşaretleme HTML XHTML
        - masayı kapattı.
      masanın gövdesidir. Gövde satır ve sütunlardan oluşur. Tablo satır satır doldurulur.

      Her etiket

      sütunlar oluşturulur. Birden çok sütun oluşturulabilir. Bu durumda, her satırdaki sütun sayısını takip etmeniz gerekir. Örneğin, ilk satırda 5 sütun varsa, sonraki satırlarda da 5 sütun olmalıdır. Aksi takdirde, masa yüzer. Hücreleri birleştirmek mümkündür.

      html'de tablo nasıl yapılır

      Bir örnek verelim, HTML Kodu:

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

      hücreye dikkat et

      		... Kullanırız özel nitelik hücreleri yatay olarak birleştirmek için colspan. Sayısal değeri, birleştirilecek sütun sayısını gösterir. Bu özelliğin bir analogu da var: etiket (tablo başlığı), burada ayrıca colspan yazmanız gerekir. Sonuç aynı olacaktır. Ancak olağan td sıklıkla kullanılır.

      Şimdi etiketin tüm özelliklerine daha yakından bakalım.

      .

      Etiket nitelikleri ve özellikleri

      Açılış etiketine

      çeşitli nitelikler yazabilirsiniz.

      1. Özellik hizalama = "parametre" - tablonun hizalamasını ayarlar. Aşağıdaki değerleri alabilir:

      Yukarıdaki örnekte, tabloyu merkez hizalama = "merkez" olarak hizaladık.

      Bu öznitelik yalnızca bir tabloya değil, aynı zamanda tek tek tablo hücrelerine de uygulanabilir.

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

      Örneğin

      , , , veya
    • cols - sütunlar arasında satır görüntülenir
    • yok - tüm sınırlar gizlidir
    • satırlar - etiket aracılığıyla oluşturulan tablo satırları arasına sınır çizilir

      • 12. Özellik genişliği = "sayı" - tablonun genişliğini ayarlar: piksel veya yüzde olarak.

      13. Özellik sınıfı = "sınıf_adı" - tablonun ait olduğu sınıfın adını belirtebilirsiniz.

      14. Özellik stili = "stiller" - stiller her tablo için ayrı ayrı ayarlanabilir.

      Şimdi tabloya dalmanın ve tablo hücrelerinin özelliklerine bakmanın zamanı geldi. Bu nitelikler açılış etiketine yazılmalıdır.

      ve için aynı seçenekler mevcuttur herkese hiyerarşik olarak uygulanacak
      veya dizeler
      ... ... ...

      2. Özellik arka planı = "URL" - arka plan resmini ayarlar. URL yerine arka plan resminin adresi yazılmalıdır.

      Örnek

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

      Sayfada şuna dönüştürüldü:

      Yukarıdaki örnekte, arka plan resmimiz img klasöründe (html sayfasıyla aynı dizinde bulunur) bulunur ve resmin adı fon.gif. Etikete style = "color: white;" eklediğimizi unutmayın. ... Arka plan siyaha yakın olduğu için yazı arka planla birleşmesin diye yazı beyaz yaptık.

      3. Özellik bgcolor = "color" - tablonun arka plan rengini ayarlar. Renk olarak tüm paleti seçebilirsiniz (html renklerinin kodlarına ve adlarına bakın)

      4. Özellik sınırı = "sayı" - tablo kenarlığının kalınlığını ayarlar. Önceki örneklerde border = "1" tanımlamıştık, yani kenarlığın genişliği 1 pikseldir.

      5. Özellik bordercolor = "color" - kenarlık rengini ayarlar. Kenarlık = "0" ise, kenarlık olmayacak ve kenarlık rengi bir anlam ifade etmeyecektir.

      6. Özellik cellpadding = "sayı" - çerçeveden hücre içeriğine piksel cinsinden girinti.

      7. Özellik hücre aralığı = "sayı" - piksel cinsinden hücreler arasındaki mesafe.

      8. Özellik sütunları = "sayı" - sütun sayısı. Bunu belirtmezseniz, tarayıcı sütun sayısını kendisi belirleyecektir. Tek fark, bu parametrenin belirtilmesinin tablonun yüklenmesini hızlandıracak olmasıdır.

      9. Özellik çerçevesi = "parametre" - tablonun etrafındaki sınırların nasıl görüntüleneceği. Aşağıdaki değerleri alabilir:

      • void - kenarlık çizme
      • kenarlık - masanın etrafındaki kenarlık
      • yukarıda - tablonun üst kısmındaki kenarlık
      • aşağıda - tablonun altındaki kenarlık
      • hsides - yalnızca yatay kenarlıklar ekleyin (tablonun üstü ve altı)
      • vsides - yalnızca dikey kenarlıklar çizin (tablonun solunda ve sağında)
      • rhs - tablonun yalnızca sağ tarafında kenarlık
      • lhs - tablonun yalnızca sol tarafında kenarlık

      10. Özellik yüksekliği = "sayı" - tablonun yüksekliğini ayarlar: piksel veya yüzde olarak.

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

      • tümü - tablodaki her hücrenin etrafına bir çizgi çizilir
      • gruplar - etiketler tarafından oluşturulan gruplar arasında satır görüntülenir
      .

      Nitelikler ve özellikler

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

      • sol - sol hizalama
      • merkez - merkez hizalama
      • sağ - sağ hizalama

      2. Özellik arka planı = "URL" - hücrenin arka plan görüntüsünü ayarlar. URL yerine arka plan resminin adresi yazılmalıdır.

      3. Özellik bgcolor = "color" - hücrenin arka plan rengini ayarlar.

      4. Özellik bordercolor = "color" - hücre kenarlığının rengini ayarlar.

      5. Özellik char = "harf" - hizalamanın yapılacağı harfi ayarlar. align niteliğinin değeri char olarak ayarlanmalıdır.

      6. Özellik colspan = "sayı" - birleştirilecek yatay hücrelerin sayısını ayarlar.

      7. Özellik yüksekliği = "sayı" - tablonun yüksekliğini ayarlar: piksel veya yüzde olarak.

      8. Özellik genişliği = "sayı" - tablonun genişliğini ayarlar: piksel veya yüzde olarak.

      9. Özellik rowspan = "sayı" - birleştirilmiş dikey hücrelerin sayısını ayarlar.

      10. Özellik valign = "parametre" - hücre içeriğinin dikey hizalanması.

      • top - hücrenin içeriğini satırın en üstüne hizalar
      • orta - orta hizalama
      • alt - alta hizala
      • taban çizgisi - taban çizgisi hizalaması
      Not 1

      etiket için

      ... Bir etiket için parametreler
      içinde

      Tablo hücrelerinin birbirine yapışmasını nasıl önleyebilirim?

      Kenarlık (hücrelerin sınırı) ve hücreler arasında sıfır dolgu kullanılması durumunda, yine de birbirine yapıştırılır ve çift kenarlık elde edersiniz. Bunu önlemek için, stil sayfasında border-collapse: daraltma tablosunu kaydetmeniz gerekir:

      ...

      Sevgili okuyucu, şimdi hakkında çok daha fazla şey öğrendin. html etiketi tablo. Şimdi bir sonraki derse geçmenizi tavsiye ederim.


      Bu bölüm, HTML işaretlemesinde tablo kullanma ilkeleri hakkında ayrıntılı bilgi verir. Bu, metnin tablo şeklinde organizasyonu, tablo şeklinde bir koordinat ızgarası ve tablolarda organize edilmiş bir grafiktir.

      HTML tablosu açıklama olanakları

      WWW'nin gelişmesiyle birlikte, NTML'ye yerleştirilen fonların yüksek kaliteli görüntüleme için yeterli olmadığı ortaya çıktı. farklı şekiller belgeler. НТМL'nin dezavantajı, kompozisyonunda masa sergileme olanaklarının olmamasıydı. Bu amaçla, önceden biçimlendirilmiş metin (etiket 

      ), tablonun ASCII sembolleri ile özetlendiği.  Ancak tabloların bu şekilde sunulması yeterli değildi. Yüksek kalite ve belgenin genel stilinden çıkarıldı.  HTML'de tabloların tanıtılmasıyla, Web yöneticileri yalnızca metin ve sayıları yerleştirmek için bir araca değil, aynı zamanda grafikleri ve metni ekranda doğru yere yerleştirmek için güçlü bir tasarım aracına da sahip oldular.
      

      HTML'de tablolar oluşturma
      

      etiketi tabloları tanımlamak için kullanılır<ТАВLЕ>...  Etiket<ТАВLЕ>Diğerleri gibi, tablodan önceki ve sonraki satırı otomatik olarak çevirir.
      

      Tablo satırı oluştur - etiketi<ТR>
      

      Etiket<ТR>(Tablo Satırı, tablo satırı) bir tablo satırı oluşturur.  Bir satıra yerleştirilmesi gereken tüm metin, diğer etiketler ve nitelikler lt;TR> etiketleri arasına yerleştirilmelidir..
      

      Tablo Hücrelerini Tanımlama - Etiket<ТD>
      

      Veri hücreleri genellikle bir tablo satırına yerleştirilir.  Metin veya resim içeren her hücre etiketlerle çevrelenmelidir<ТD>...  etiket sayısı<ТD>satır başına hücre sayısını tanımlar
      
 

 
      tablo
      Bir tablonun iki TR etiketi varsa, o zaman iki satırı vardır.
      Bir satırda üç TD etiketi varsa, sonra içinde üç sütun.

      Tablo Sütun Başlıkları - Etiket<ТН>

      Tablo sütunları ve satırları için başlıklar başlık etiketi kullanılarak ayarlanır<ТН>(Tablo Neader, tablo başlığı). Bu etiketler tıpkı<ТD>... Fark şu ki, etiketler arasındaki metin<ТН>, otomatik olarak kalın yazılır ve varsayılan olarak hücrenin ortasında bulunur. Ortalamayı geri alabilir ve metni sola veya sağa hizalayabilirsiniz. Eğer kullanırsan<ТD>etiketi ile<В>ve nitelik<АLIGN=center>, metin de bir başlık gibi görünecektir. Ancak, tüm tarayıcıların tablolarda kalın metinleri desteklemediği akılda tutulmalıdır, bu nedenle tablo başlıklarını kullanarak ayarlamak daha iyidir.<ТН>.

      Başlık varsayılan olarak ortalanır Başlık sütunları birleştirebilir
      Başlık sütunların önüne yerleştirilebilir Metin veya veri Metin veya veri
      Başlık satırları birleştirebilir Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri

      Tablo başlıklarını kullanma - etiketi<САРТIОN>

      Etiket

      tablo başlıkları oluşturmanıza olanak sağlar. Varsayılan olarak, başlıklar ortalanır ve (<САРТION АLIGN=top>) veya masanın altında (<САРТION ALIGN=bottom>). Başlık herhangi bir metin ve resim olabilir. Metin, tablonun genişliğiyle eşleşen satırlara bölünecektir. bazen etiket<САРТION>resmin altındaki yazı için kullanılır. Bunun için tabloyu kenarlıksız tanımlamanız yeterlidir.

      Tablonun üstündeki başlık
      Metin veya veri Metin veya veri Metin veya veri Metin veya veri
      Tablonun altındaki başlık
      Metin veya veri Metin veya veri Metin veya veri

      NOWRAP Özelliği

      Tipik olarak, bir tablo hücresinin bir satırına sığmayan herhangi bir metin bir sonraki satıra taşınır. Ancak NOWRAP özelliğini etiketlerle kullanırken<ТН>veya<ТD>hücre uzunluğu, ekteki metin bir satıra sığacak şekilde genişler.

      COLSPAN Özelliği

      Etiketler:<ТD>ve<ТН>COLSPAN (Sütun Yayılımı) özniteliği kullanılarak değiştirildi. Bir hücreyi üstten veya alttan daha geniş yapmak istiyorsanız, onu herhangi bir sayıda normal hücreye yaymak için COLSPAN özniteliğini kullanabilirsiniz.

      Bir hücreyi üstten veya alttan daha geniş yapmak istiyorsanız, СLSPAN = 2 niteliğini kullanabilirsiniz,
      herhangi bir sayıda normal hücrenin üzerine germek için.

      ROWSPAN Özelliği

      Etiketlerde kullanılan ROWSPAN özelliği<ТD>ve<ТН>, hücreye yayılacak satır sayısını belirtmesi dışında COLSPAN = özniteliğine benzer. ROWSPAN = s özniteliğinde birden büyük bir sayı belirttiyseniz, karşılık gelen satır sayısı uzatılmış hücrenin altında olmalıdır. Masanın altına yerleştirilemez.

      WIDTH Özelliği

      WIDTH niteliği iki durumda kullanılır. Etikete koyabilirsin<ТАВLЕ>tüm tablonun genişliğini vermek için veya etiketlerde kullanılabilir<ТD>veya<ТН>Bir hücrenin veya hücre grubunun genişliğini ayarlamak için Genişlik piksel veya yüzde olarak belirtilebilir. Örneğin, etikette ayarlarsanız<ТАВLЕ>WIDTH = 250, monitörünüzdeki sayfa boyutundan bağımsız olarak 250 piksel genişliğinde bir tablo elde edersiniz. Etikette WIDTH = %50 ayarlanırken<ТАВLЕ>tablo, ekrandaki herhangi bir görüntü boyutu için sayfa genişliğinin yarısını alacaktır. Bu nedenle, yüzde olarak bir tablo genişliği belirlerken, kullanıcının dar bir görünümü varsa sayfanızın biraz tuhaf görünebileceğini unutmayın. Piksel kullanıyorsanız ve tablo görünüm alanından daha genişse, sayfada sola ve sağa hareket etmek için altta bir kaydırma çubuğu görünür. Eldeki işe bağlı olarak, tablo genişliğini ayarlamak için her iki yöntem de faydalı olabilir.

      Metin veya veri - %100 genişlik
      veya
      Metin veya veri - %50 genişlik
      veya
      Metin veya veri - 200 piksel genişliğinde
      veya
      Metin veya veri - 100 piksel genişliğinde

      Boş hücreler uygulama

      Bir hücre veri içermiyorsa, sınırları olmayacaktır. Bir hücrenin kenarlıkları olmasını ancak içeriğin olmamasını istiyorsanız, içine görüntülendiğinde görünmeyecek bir şey koymanız gerekir. Boş bir satır kullanabilirsiniz<ВR>... Boş sütunları, genişliklerini piksel veya göreli birimler olarak belirterek ve sonuçta ortaya çıkan hücrelere herhangi bir veri girmeden tanımlayabilirsiniz. Bu araç, bir sayfaya metin ve grafik yerleştirirken faydalı olabilir.

      CELLPADDING Niteliği

      Bu nitelik, hücrenin içeriği ile sınırları arasındaki beyaz boşluğun genişliğini tanımlar, yani hücre içindeki kenar boşluklarını ayarlar.

      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri Metin veya veri

      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri Metin veya veri

      ALIGN ve VALIGN Nitelikleri

      Etiketler:<ТR>, <ТD>ve<ТН>ALIGN ve VALIGN öznitelikleri kullanılarak değiştirilebilir. ALIGN niteliği, metin ve grafiklerin yatay, yani sola veya sağa veya merkeze hizalanmasını belirler. Yatay hizalama birkaç şekilde belirtilebilir:

      ALIGN = sol taraf hücrenin içeriğini sol kenara yaslayarak bastırır.

      HİZALAMA = sol hücrenin içeriğini, CELLPADDING özniteliği tarafından belirtilen dolgu ile sola hizalar.

      HİZALAMA = merkez hücrenin içeriğini ortalar.

      HİZALAMA = sağa hücrenin içeriğini CELLPADDING özniteliği tarafından belirtilen dolgu ile sağa hizalar.

      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri Metin veya veri

      VALIGN özelliği, bir hücre içindeki metin ve grafikleri dikey olarak hizalar. Dikey hizalama birkaç şekilde belirtilebilir:

      VALIGN = üst hücrenin içeriğini üst kenarına hizalar.

      VALIGN = orta hücrenin içeriğini dikey olarak ortalar.

      VALIGN = alt hücrenin içeriğini alt sınırına hizalar.

      VALIGN özelliği, bir hücre içindeki metin ve grafikleri dikey olarak hizalar. Tepe, orta, alt.
      VALIGN = top Hücrenin içeriğini üst sınırına hizalar. Tepe, Tepe, Tepe.
      VALIGN = orta Hücrenin içeriğini dikey olarak ortalar. orta, orta, orta.
      VALIGN = alt Hücrenin içeriğini alt sınırına hizalar. alt, alt, alt.

      KENARLIK özniteliği

      etikette<ТАВLЕ>genellikle çerçevelerin nasıl görüneceğini, yani tablo hücrelerini ve tablonun kendisini çevreleyen çizgileri belirler. Kenarlık belirtmezseniz, satırsız bir tablo alırsınız, ancak bunlar için alan tahsis edilir. Aynı sonuç ayarlanarak da elde edilebilir.<ТАВLЕ ВОRDER=0>... Bazen daha iyi öne çıkması için kenarlığı daha kalın yapmak istersiniz. Bir resme veya metne dikkat çekmek için son derece kalın kenarlıklar ayarlayabilirsiniz. İç içe tablolar oluştururken, farklı tablolar için farklı kalınlıklarda kenarlıklar yapmanız gerekir, böylece onları ayırt etmek daha kolay olur.

      HÜCRE BOŞLUĞU Niteliği

      CELLSPACING özelliği, hücreler arasındaki boşlukların piksel cinsinden genişliğini belirtir. Bu öznitelik belirtilmezse, varsayılan iki pikseldir. CELLSPACING = özniteliği ile metin ve grafikleri istediğiniz yere yerleştirebilirsiniz. Boş bir alan bırakmak istiyorsanız, hücreye bir boşluk girebilirsiniz.

      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri

      BGCOLOR Özelliği

      Bu özellik, arka plan rengini ayarlamanıza izin verir. Hangi etiketle (TABLE, TR, TD) uygulandığına bağlı olarak, arka plan rengi tüm tablo için, bir satır için veya tek bir hücre için ayarlanabilir. Bu özniteliğin değeri, bir RGB kodu veya standart bir renk adıdır.

      Metin veya veri Metin veya veri Metin veya veri
      Metin veya veri Metin veya veri Metin veya veri

      ARKA PLAN Özelliği

      Bu öznitelik, tablolar için arka plan görüntüsünü ayarlar. TABLE ve TD etiketlerine uygulayın. Değeri, arka plan resim dosyasının URL'sidir. Bu özniteliğin kullanımı aşağıda tartışılmaktadır.

      Sayfa tasarımında tabloları kullanma

      Tabloların iyi yanı, isterseniz kenarlıklarını görünmez hale getirebilmenizdir. Bu, etiketin kullanılmasına izin verir<ТАВLЕ>metin ve grafikleri sayfaya güzelce yerleştirin. etiket yaparken<ТАВLЕ>HTML'deki tek güçlü biçimlendirme aracı olmaya devam ediyor. Web sayfası tasarımcıları, artık basılı sayfaların yaratıcıları ile neredeyse aynı "beyaz alanı" kullanma özgürlüğüne sahiptir. Tablolar, Web sayfalarındaki metnin hiyerarşik yerleşiminden uzaklaşmanın en iyi yoludur.

      Tarayıcı tabloları destekliyorsa, genellikle bunlarla elde edilen en ilginç efektleri doğru şekilde görüntüler.

      Ural Devlet Pedagoji Üniversitesi

      Hoş geldin!

      "WEB-mastering'in Temelleri" eğitim kursu

      Renkli tablolar oluşturma

      Bazı tarayıcılar renklerin görüntülenmesine izin verir. Tabloyu renklendirmenin birkaç yolu vardır, bunlar çoğunlukla kullanılan tarayıcıya bağlıdır.

      Netscape Navigator'da renkli kenarlıklar. Sadece masayı çevrelemekle kalmazsınız güzel çerçeve, ancak bunun için metin ve arka plan renklerinden farklı bir renk de ayarlayın. Basit bir gri GIF (veya arka planda olmasını istediğiniz herhangi bir GIF) oluşturun ve bunu etikette tanımlayın<ВODY>sayfanın arka planı olarak. Ardından sayfanın arka plan rengini ayarlayın. Sonuç olarak, etiketiniz<ВОDY>şöyle bir şey görünecek:

      Çift bir arka plan oluşturdunuz - GIF ve belirli bir renk. Sonuç olarak, arka plan rengi tabloların tüm kenarlarında görünecek ve yatay çizgiler (<НR>). Arka plan GIF'inizin gri olup olmamasına bakılmaksızın, tabloların renkli çizgileri ve kenarları belirgin şekilde öne çıkacaktır. Arka plan GIF'i çok karmaşık değilse, sayfa yükleme süresi yalnızca biraz artacaktır.

      Görev

      Bir tablo oluşturun ve onun parametrelerini (hücreler arasındaki kenar boşlukları ve mesafe) stiller aracılığıyla belirtin.

      Çözüm

      Tablo, metin ve resimler içerebilen hücre satırlarından ve sütunlarından oluşur. Bir web sayfasına tablo eklemek için etiketini kullanın.

      ... Bu öğe, tablonun içeriğini tanımlayan öğeler için bir kap görevi görür. Herhangi bir tablo, etiketler kullanılarak uygun şekilde ayarlanmış satırlardan ve hücrelerden oluşur. ve
      ... Tablo en az bir hücre içermelidir (örnek 1). Etiket yerine izin verilir etiketi kullan ... Etiketle süslenmiş bir hücredeki metin , tarayıcı tarafından kalın harflerle gösterilir ve hücrede ortalanır. Aksi takdirde, etiketler aracılığıyla oluşturulan hücreler arasındaki farklar ve numara.

      Örnek 1. Tablo oluşturma

      HTML5 IE Cr Op Sa Fx

      tablo etiketi

      hücre 1 hücre 2
      hücre 3 hücre 4

      Hücrelerin sırası ve görünümleri Şek. 1.

      Pirinç. 1. Dört hücreli bir tablo oluşturmanın sonucu

      Etiketin sınır özelliği

      yalnızca boş bir değerle eklenebilir (
      ) veya 1'e eşittir. Diğer tüm değerler doğrulanmaz.

      Padding style özelliği, td seçiciye eklenen hücreler içindeki kenar boşluklarını kontrol etmek için kullanılır. Hücreler arasındaki boşluk, tablo seçiciye eklenen border-spacing özelliği (örnek 2) tarafından değiştirilir, IE tarayıcısı bunu yalnızca 8.0 sürümünden itibaren anlar.

      Örnek 2. Hücreler içindeki alanlar

      HTML5 CSS 2.1 IE Cr Op Sa Fx

      tablo etiketi

      Başlık 1Başlık 2
      hücre 3hücre 4

      Alanları ve hücreler arasındaki boşlukları içeren bir tablo Şekil 2'de gösterilmektedir. 2. Hücrelerin etrafındaki beyaz bir kenarlıkla benzer bir sonuç elde edilebilir.

      Pirinç. 2. Tablo hücrelerindeki alanlar

      Telif hakkı © 2021 win-keys.ru - Windows işletim sistemi hakkında her şey