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

Örnek

Örnek tablo

Sütun 1

Sütun 2

Sayfada aşağıdakine dönüştürür:

Yukarıdaki örnekte arka plan görselimiz img klasöründe (html sayfasıyla aynı dizinde) yer alıyor ve görselin adı fon.gif. Lütfen etikete style="color:white;" eklediğimizi unutmayın. . Arka plan neredeyse siyah olduğundan, metnin arka plana karışmasını önlemek için metni beyaz yaptık.

3. Özellik bgcolor="renk" - tablonun arka plan rengini ayarlar. Paletin tamamından herhangi bir rengi seçebilirsiniz (html renklerinin kodlarına ve adlarına bakın)

4. Özellik border='sayı' - tablo kenarlığının kalınlığını ayarlar. Önceki örneklerde border="1" belirtmiştik, yani kenar kalınlığı 1 pikseldir.

5. Özellik bordercolor="renk" - kenarlığın rengini ayarlar. Border = "0" ise kenarlık olmayacak ve kenarlık renginin hiçbir anlamı kalmayacaktır.

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

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

8. Özellik cols = "sayı" - sütun sayısı. Ayarlamazsanız sütun sayısını tarayıcının kendisi belirleyecektir. Tek fark, bu parametrenin belirtilmesinin büyük olasılıkla tablonun yüklenmesini hızlandırmasıdır.

9. Çerçeve özelliği = "parametre" - tablonun etrafındaki kenarlıkların nasıl görüntüleneceği. Aşağıdaki değerleri alabilir:

• geçersiz - sınırları çizmeyin
• kenarlık - masanın etrafındaki kenarlık
• yukarıda - tablonun üst kenarı boyunca 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 soluna ve sağına)
• rhs - yalnızca tablonun sağ tarafındaki kenarlık
• lhs - tablonun yalnızca sol tarafındaki kenarlık

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

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

• hepsi - her tablo hücresinin etrafına bir çizgi çizilir
• gruplar - etiketlerin oluşturduğu gruplar arasında bir çizgi görüntülenir

Nitelikler ve Özellikler

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

• sola - sola hizalama
• merkez - merkez hizalaması
• sağ - sağ hizalama

2. Özellik arka plan = "URL" - hücrenin arka plan resmini ayarlar. URL yerine arka plan görselinin adresi yazılmalıdır.

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

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

5. Özellik char="letter" - hizalamanın yapılması gereken harfi belirtir. Hizalama özelliğinin değeri char olarak ayarlanmalıdır.

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

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

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

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

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

• top - hücre içeriğini satırın üst kenarına hizalar
• orta - orta hizalama
• alt - alt kenara hizalama
• taban çizgisi - taban çizgisine hizalama

Etiket için

Tablodaki hücre sınırlarının birbirine yapışması nasıl önlenir

Bir kenarlık (hücre kenarlığı) ve hücreler arasında sıfır dolgu kullanırsanız, bunlar yine de birbirine yapışır ve çift kenarlık elde edersiniz. Bunu önlemek için tablo stillerinde border-collapse: daraltmayı belirtmeniz gerekir:

...

Sevgili okuyucu, artık html tablo etiketi hakkında çok daha fazlasını öğrendiniz. Şimdi bir sonraki derse geçmenizi tavsiye ediyorum.

Bu derste HTML işaretlemesinde tablo kullanmanın ilkeleri ayrıntılı olarak tartışılmaktadır. Bu, metnin tablo şeklinde düzenlenmesini, tablo şeklinde koordinat ızgarasını ve tablolar halinde düzenlenen grafikleri içerir.

HTML'deki tabloları açıklamaya yönelik araçlar

WWW geliştikçe, HTML'nin içerdiği kaynakların, çeşitli belge türlerinin yüksek kalitede görüntülenmesi için yeterli olmadığı ortaya çıktı. HTML'nin dezavantajı tabloları görüntülemek için gerekli araçların bulunmamasıydı. Bu amaçla önceden biçimlendirilmiş metin (etiket

), tablonun ASCII karakterleriyle ana hatları çizildiği.  Ancak bu tablo sunum şekli yeterli değildi Yüksek kalite ve belgenin genel stilinden öne çıkıyordu.  HTML'de tabloların kullanılmaya başlanmasından sonra, Web Yöneticileri yalnızca metin ve sayısal verileri yerleştirmek için bir araca değil, aynı zamanda grafik görüntüleri ve metni ekranda doğru yere yerleştirmek için güçlü bir tasarım aracına da sahip oldu.

HTML'de tablolar oluşturma
Etiket 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şturma - etiketi<ТR>
Etiket<ТR>(Tablo Satırı) bir tablo satırı oluşturur.  Tek satırda yer alması gereken tüm metinler, diğer etiketler ve nitelikler lt;TR> etiketleri arasına yerleştirilmelidir..
Tablo hücrelerini tanımlama - etiket<ТD>
Veri içeren hücreler genellikle bir tablo satırının içine yerleştirilir.  Metin veya resim içeren her hücre etiketlerle çevrelenmelidir<ТD>.  Etiket sayısı<ТD>bir satırda hücre sayısını tanımlar

 

 
Masa
 
 

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

Tablo sütun başlıkları - etiketi<ТН>

Tablo sütunları ve satırlarının başlıkları başlık etiketi kullanılarak ayarlanır<ТН>(TableHeader, tablo başlığı). Bu etiketler benzer<ТD>. Aradaki fark, etiketlerin arasına alınan metnin<ТН>, otomatik olarak kalın harflerle yazılır ve varsayılan olarak hücrenin ortasına yerleştirilir. Metnin ortasını kaldırabilir ve metni sola veya sağa hizalayabilirsiniz. Eğer kullanırsan<ТD>etiketli<В>ve özellik<АLIGN=center>metin aynı zamanda bir başlık gibi görünecektir. Ancak, tüm tarayıcıların tablolarda kalın yazı tipini desteklemediğini, bu nedenle tablo başlıklarını kullanarak ayarlamanın daha iyi olacağını unutmayın.<ТН>.

Başlık varsayılan olarak ortalanmıştı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 - etiket<САРТIОN>

Etiket

Notepad++ kullanarak düzenlemek için web sayfası dosyamız index.html'yi açalım. Sayfadaki değişiklikleri görüntülemek için bir tarayıcı kullanarak açın.

Bu yazımızın en başında planladığımız site düzeninin tablo olduğundan bahsetmiştik.

Ayrıca site yerleşim tablomuz üç satır (Heder, İçerik ve Altbilgi) ve iki sütundan (Menü ve İçerik) oluşacaktır.

Üç satır ve iki sütundan oluşan bir tablo eklemek için kodumuzu aşağıdakileri ekleyecek şekilde değiştirelim:

Tabloda bir kenarlık ayarlamak için border parametresini kullanın. Tablo kenarlığının kalınlığı piksel (px) cinsinden belirtilir.

Html kodumuza argüman değeri 1px'e eşit olan bir border parametresi ekleyelim. Yani masa çerçevesinin kalınlığı bir piksele eşit olacaktır:

Tabloyu tarayıcı penceresinin ortasına hizalamak için üç değer alabilen align parametresini kullanırız: sol, orta, sağ.Tabloyu tarayıcı penceresinin ortasına hizalamak için, hizalama parametresi bağımsız değişkeni şuna eşit olmalıdır: center.

Ve buraya tablonun genişliğini ayarlayalım. Tablonun genişliği width parametresi ile belirtilir. Bu parametrenin alabileceği değerler piksel cinsinden tamsayı olarak veya mevcut tarayıcı penceresi genişliğinin yüzdesi olarak ifade edilebilir.

Kodumuza hizalama ve tablo genişliğini ekleyelim ve sonuç olarak aşağıdaki kodu elde edelim:

Değişiklikleri görmek için web sitemizin tarayıcı penceresini yeniliyoruz, tablonun pencerenin ortasına hizalandığını ve genişliğinin değiştiğini görüyoruz.

Şimdi tablo çerçevesine geri dönelim, html kodunda border parametresi argümanının değerini kullanarak onu 1 piksele ayarladık: border=”1”.

Html referans kitabındaki TABLE etiketinin parametrelerine bakın; burada etkileyen iki parametre vardır. dış görünüşçerçeve.

İlk parametre: hücre aralığı – tablo hücreleri arasındaki mesafeyi ayarlar.

İkinci parametre: hücre dolgusu – çerçeveden hücrenin içeriğine olan mesafe, bu parametrenin argümanının değerine bağlıdır.

Tüm mesafeleri ve girintileri minimuma indirmek için yukarıdaki parametrelerin üzerindeki argümanların değerlerini sıfıra ayarladık.

Sonuç olarak tablonun html kodu aşağıdaki formu alacaktır:

Hatırlayacağınız gibi tablomuz üç satırdan oluşmalı ve ilk satırda bir hücre, ikinci satırda iki hücre, üçüncü satırda da bir hücre bulunmalıdır.

Tablonun görünümüne bakarsak, tabloyu istenilen forma getirmek için birinci ve üçüncü sıranın yatay hücrelerini birleştirmemiz gerektiğini göreceğiz.

Bunu yapabilmek için colspan parametresini kullanacağız. Bu parametre TD etiketinde kullanılır. Colspan parametresi argümanının değeri birleştirilecek yatay hücre sayısını belirtir; bizim durumumuzda bu değer 2'dir.

Colspan parametresini eklemenin yanı sıra tablo hücrelerindeki etiketleri düzenimize uyacak şekilde değiştirelim.

Tüm değişikliklerden sonra sayfamızın tam html kodu aşağıdaki gibi olacaktır:

Değişiklikleri görmek için kodumuzu Notepad’e kaydedelim ve tarayıcıdaki index.html dosyasını yenileyelim.

Yani bu ders oldukça büyük çıktı, o yüzden bir sonraki derste sayfamızın html tablosu üzerinde çalışmaya devam edelim.

HTML'deki tablolar o kadar işlevseldir ki, bunları tüm web sitelerini düzenlemek (okumak) için kullanabilirsiniz. Şimdi bir web sayfasına basit HTML tabloları eklemek, yalnızca işaretlemeyi analiz etmek, ancak tasarıma dokunmamak hakkında konuşacağız çünkü tabloları CSS stillerini kullanarak dekore etmek daha iyidir.

Tablo etiketleri ve nitelikleri

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

• - içinde masanın bulunduğu bir kap (aynısı)
  işaretli veya
  numaralı listeler için).
  1. sınır- çerçevelerin kalınlığını belirleyen bir özellik. Bunun yerine border CSS özelliğini kullanmak daha iyidir.

  tablo imzasını belirtir. Kap kullanmak zorunda değilsiniz ancak yine de tabloya başlık vermeye karar verirseniz bunu etiketin hemen sonrasına yerleştirin. , hücrelerin ve satırların dışında.

  - bir tablo satırı içeren eşleştirilmiş bir etiket (aynı yatay seviyede bulunan hücreler).

  , içinde çok fazla hücre olacak: bir etiket - bir hücre.

  Sütunları hızla ve kodu tıkamadan gruplandırmanıza, onlara ortak özellikler atamanıza olanak tanır. Bir kap kullanarak bir tablonun mantıksal bölümlerini birbirinden ayırabilirsiniz. Etiketten sonra yerleştirilir

  , eğer orada değilse, o zaman sonra .

  ile aynı amaçla kullanılan . içerebilir , ancak tam tersi değil.

  açıklık- kapsayıcı özelliklerinin uygulandığı sütun sayısını belirten bir özellik

  .

  , Ve - tabloyu sırasıyla üst (başlıklar), ana (gövde) ve alt (son) parçalara ayırmanıza olanak tanıyan kaplar. Bir HTML tablosunda bu etiketlerin sırası, kapların sırası ile aynıdır. , Ve

  Web sitesi oluşturma araçları

  Amaç	Alet
İşaretleme	HTML	XHTML
Dekor	CSS
Gelişim	PHP	Python

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

  Hangi kod satırlarının neden sorumlu olduğunu bulalım.

  • - çerçevelerin kalınlığını vererek masayı açtı.
    - adını koydular.
    - hattı açtık.
    - başlık tasarımına sahip bir hücre oluşturuldu.
    - satırda ikinci bir başlık hücresi oluşturuldu. Colspan parametresi bu hücrenin yatay olarak ikiye yayılması gerektiğini belirtti.
    - hattı kapattık. Kalan çizgiler de aynı şekilde oluşturuldu.
    - tablonun başlık yerine normal hücreler içeren ikinci bir satırı eklendi. Sonraki satırlar ve hücreler benzer şekilde yerleştirildi.

    Web sitesi oluşturma araçları

    Amaç	Alet
  İşaretleme	HTML	XHTML

    - masayı kapattı.

  Kategoride popüler:

  Sberbank - zolnirt -'den terminal kurulumuna yönelik eylem planı...

  Okumak

  KKM strok-m ile çalışmaya yönelik yazılım

  Okumak

  Microsoft Office'i Windows bilgisayara yükleme

  Okumak

  DVDRip, CAMRip, TS, TC, DVDSrc vb. nedir?

  Okumak

  

  En son makaleler

  Ava iletişim halinde: nedir bu? awk nedir? Nasıl...

  Okumak

  Pazar kapasitesi: nedir ve nasıldır?

  Okumak

  Eski Dünya oyuncuları için uzun zamandır beklenen ödüller...

  Okumak

  Wifi Analizörü WiFi analizi için bir uygulamadır...

  Okumak

  Eski sabit diskinizi atmamak için beş neden

  Okumak

  VirusTotal: Çevrimiçi virüs taraması...

  Okumak

  Operatörlerin ücretli abonelikleri nasıl yasaklanır?

  Okumak

  Skype'a para yatırmanın yolları...

  Okumak

  vsevolozk.ru
  PC'leri inceliyoruz - Windows, virüsler, programlar, onarımlar, veri kurtarma

  • Proje baskısı
  • Web sitesinde reklam

  • Kişiler
  • Site Haritası

  © 2023 PC Eğitimi - Windows, virüsler, programlar, onarım, veri kurtarma

  Tepe

  - tablo başlığı hücresi oluşturan bir etiket. Dışarıdan bakıldığında içeriği diğer hücrelerdeki içerikten (genellikle içindeki metinden) farklıdır.	Tarayıcı onu kalın harflerle vurgular ve ortaya yerleştirir.	- basit bir hücrenin oluşturulduğu bir kap. Bir satırda bu türden kaç tane etiket bulunur (etiket