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ıdaki normal hücrenin üzerine germek için.
 
 
 


SATIR özniteliğ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 garip 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, masa 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ğinin 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 özelliğ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 onlar için boşluk olacaktır.  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 genişliğini piksel cinsinden belirtir.  Bu öznitelik belirtilmezse, varsayılan iki pikseldir.  CELLSPACING = özelliği, metin ve grafikleri istediğiniz yere yerleştirmenize olanak tanır.  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 üretilen 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 tüm tablo kenarlarında görünür olacak 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.
Tabloların çok yönlülüğü ve görünümlerini kontrol eden çok sayıda parametre nedeniyle, tablolar uzun zamandır web sayfalarının düzeni için kesin bir standart haline gelmiştir.  Görünmez kenarlıklı bir tablo, bloklarda bir web sayfasının öğelerini yerleştirmenin uygun olduğu modüler bir ızgara gibidir.  Ancak bu pek doğru bir yaklaşım değil çünkü her HTML nesnesi kendi amaçları için tanımlanıyor ve eğer başka amaçlar için kullanılıyorsa, dahası alternatifi yok demektir.  Ve öyleydi uzun zaman katmanlar site düzeninde tabloların yerini alana kadar.  Bu, katmanların artık her zaman kullanıldığı anlamına gelmez, ancak eğilim zaten açıkça belirtilmiştir - tablolar tablo verilerini yerleştirmek için kullanılır ve katmanlar yerleşim ve tasarım için kullanılır.
 
Tablo oluşturma
 
Tablo, metin ve resimler içerebilen hücre satırlarından ve sütunlarından oluşur.  Tipik olarak, tablolar verileri düzenlemek ve sunmak için kullanılır, ancak tabloların yetenekleri bununla sınırlı değildir.  Tablolar yardımıyla metin ve resim parçalarını istenilen şekilde düzenleyerek sayfa düzenlerini dizmek uygundur.
 
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 tablodaki grup başlığını içermek için kullanılır ("tablo başlığı", başlıklarla karıştırmayın).
Etiket 
tablonun (altbilgi) "altbilgisini" içermek için kullanılır.
Etiket 
tablonun (gövde) "gövdesini" içermek için kullanılır.
eleman 
aşağıdaki bağlamda bir tabloda yalnızca bir kez kullanılmalıdır: bir öğenin parçası olarak 
...  Tablo en az bir hücre içermelidir (örnek 12.1).  Etiket yerine izin verilir 
etiketi kullan 
...  Etiketle süslenmiş bir hücredeki metin 
, tarayıcı tarafından kalın ve hücrede ortalanmış olarak görüntülenir.  Aksi takdirde, etiketler aracılığıyla oluşturulan hücreler arasındaki farklar 
ve 
numara.

 
Örnek 12.1.  Tablo oluşturma

 

 
 
 
 
 
 

 

 
hücre 1
 
hücre 2
 
 

 
hücre 3
 
hücre 4
 
 
 

 
Hücrelerin sırası ve görünümleri Şek.  12.1.
HTML tabloları o kadar işlevseldir ki, onları tüm siteleri dizmek (okumak) için kullanabilirsiniz.  Şimdi bir web sayfasına basit HTML tabloları eklemekten, yalnızca işaretlemeyi ayrıştırmaktan, ancak tasarıma dokunmamaktan bahsedeceğiz, çü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).
sınır- çerçevelerin kalınlığını belirleyen bir nitelik.  Bunun yerine border CSS özelliğini kullanmak daha iyidir.
ve elemanın içinde değil :

 

 

 
 
 
 


 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 belirlemek 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 ... .

Tablo başlık hücresi öğeye yerleştirilir (İçerik kalın ve ortalanmış olarak görüntülenir).

Tablo verilerinin her hücresi bir öğeye yerleştirilir  .

Gerekirse tablonun adı elemanın içine yerleştirilir. (isteğe bağlı tablo öğesi). Bu öğeyi tablonuzda kullanmayı planlıyorsanız, öğeden hemen sonra belgede takip etmesi gerektiğine dikkatinizi çekiyorum. 





- 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çla 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 

 
Web sitesi oluşturma araçları
 

 
Randevu
Alet
 
 

 
İşaretleme
HTML
XHTML
 
 

 
Kayıt
CSS
 
 

 
Geliştirilmesi
PHP
piton
 
 
 

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ı 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ı.


.

Tablonun her satırı bir öğeye yerleştirilir 
...
...
...
.. .

Elektronik tabloyu hazırlamanın pratik kısmına geçelim:
 

 

 
 
 
  kenarlık = "1"> 





 
İlköğretim tablosu
 
 

 
 
Başlık hücresi 1
Başlık hücresi 2
Başlık hücresi 3
 

 

 
 
Veri hücresi 1 Satır 2
Veri hücresi 2 Satır 2
Veri hücresi 3 Satır 2

 
 

 
 
Veri hücresi 1 Satır 3
Veri hücresi 2 Satır 3
Veri hücresi 3 Satır 3
 
 
 

 


Anlaşılır olması için, bu tabloya, sınırın tablo hücrelerinin çevresinde gösterilmesi gerektiğini belirten "1" değerine sahip bir sınır niteliği ekledik.  border niteliği HTML'de neredeyse hiç kullanılmaz, bu durumda CSS kullanılması tercih edilir ve daha fazla esneklik sağlar.  HTML öğrenmenin bir parçası olarak, dilbilgisel olarak ve çalışırken tabloları nasıl oluşturacağımızı öğreneceğiz. CSS3"" makalesinde onları profesyonel olarak nasıl stilize edeceğimizi öğreneceğiz.
Örneğimizin sonucu:
Sütunları birleştir
Öğelerdeki sütunları birleştir 
(veri hücresi) veya 
(başlık hücresi) colspan özniteliği kullanılarak yapılabilir (hücre, belirtilen hücre sayısı kadar sağa uzatılır).

 

 

 
 
 
  kenarlık = "1"> 
 


 


 
İlköğretim tablosu
 
 

 
 
Başlık hücresi 1
 
 
Başlık hücresi 2

 

 


 
Veri hücresi 1 Satır 2
Veri hücresi 2 Satır 2
Veri hücresi 3 Satır 2

 
 

 
 
Veri hücresi 1 Satır 3
Veri hücresi 2 Satır 3
Veri hücresi 3 Satır 3
 
 
 

 


Örneğimizin sonucu:
Birleştirme dizeleri
Öğelerdeki dizeleri birleştirme 
veya 
rowspan niteliğinin kullanılmasına izin verilir (hücre aralığı yukarıdan aşağıya doğrudur ve birden çok satırı kapsar - hücre aşağı doğru uzatılır).

 

 

 
 
 
  kenarlık = "1"> 






 
İlköğretim tablosu
 
 

 
 
Başlık hücresi 1

 
Başlık hücresi 2
 
 


 
satır aralığı = "2"> Veri hücresi 1 Satır 2
Veri hücresi 2 Satır 2
Veri hücresi 2 Satır 3
 
 

 
 
Veri hücresi 2 Satır 3
Veri hücresi 3 Satır 3

 
 
 

 


Örneğimizin sonucu:
Sütun özellikleri
Bir tablonun tek tek sütunlarında span niteliğini kullanma örneği:
 

 
 
 
 
 
span = "2" stil = "arka plan rengi: haki"> 

 
 
  

 
 
 

 
Başvuru numarası
Hizmet
fiyat, ovmak.
Toplam
 
 

 

31337
kulaktan okuma

1 000

1 000
 
 
 


Örneğimizin sonucu:
Yalnızca bir sütuna stil vermeniz gerekiyorsa, öğenin içindeki span niteliğini belirtmeniz yeterlidir. 
 

 
 
 

 

 Başvuru numarası
Hizmet
fiyat, ovmak.
Komisyon, ovmak.
 
 

 

31337
kulaktan okuma

1 000

150
 
 

 


Örneğimizin sonucu:
Tabloyu parçalara ayırma
Devamındaki HTML etiketleri tabloyu parçalara ayırmak için kullanılır:
Etiket 



(alt (iç içe) öğe olarak), etiketler varsa (bir tablodaki sütun grubunu tanımlar) takip etmelidir sonrasında bu unsurlar, ancak önce herhangi bir etiketten daha  , ve ...  Ayrıca, eleman bir veya daha fazla etikete sahip olmalıdır içeride (dize oluşturma için kap).
Elementler 
 , ve varsayılan tablo düzenini etkilemez.  Bununla birlikte, CSS kullanarak, bu öğeleri istediğiniz gibi şekillendirebilirsiniz.


 
 
 
 
 
(tablo adı) ve 


 
 stil = "arka plan rengi: gümüş">  stil = "arka plan rengi: mercan"> 
 style = "arka plan rengi: haki"> 

 

 
Hizmet
Fiyat 
 
 
 

 

 
toplam

3 000
 
 
 

 
kulaktan okuma

1 000
 
 

 
yumruk oyunu

2 000
 
 
 
 


Örneğimizin sonucu.
Tablolar, web sayfalarında bulunması gereken en önemli ancak karmaşık unsurlardan biridir.  Onların yardımı ile önemli ve kullanışlı bilgi oldukça özlü bir şekilde.  Elbette, çeşitli motorlarda çalışan şablonlardaki çoğu editör, bir sitenin sayfasına veya ayrı bir yayına otomatik olarak bir tablo eklemenize izin verir, ancak bir web kaynağının tasarımı, sayfaları sıfırdan oluşturulursa ne olur?  Sonra acemi bir sihirbaz bir sorunla karşılaşabilir: nasıl yapılır Bu öğeyi nasıl doğru ve hızlı bir şekilde oluşturacağımızı bulalım.
editör seçme
Öncelikle tablo oluşturmaya başlayarak hangi editörde çalışacağınıza karar vermelisiniz.  Tabii ki en kolay yol, ana site kodunu oluşturduğunuz programı seçmektir.  Ancak bu amaçlar için eski bir not defteri kullanmak en iyisidir.
Neden hayatınızı zorlaştıracağınızı sorabilirsiniz, çünkü editörde her şeyi bir kerede yaparsanız, sonuç hemen görülebilir ve program ipuçlarını da kullanabilirsiniz.
Evet, bu doğrudur, ancak sıfırdan bir tablo oluşturarak, yalnızca oluşturma ilkesini tam olarak incelemekle kalmayacak, aynı zamanda ana koddaki can sıkıcı yazım hatalarını ve hataları da önleyebileceksiniz.  Bazen imleç yanlışlıkla aşağı hareket eder ve bir hata yazma sürecinde bazen bulması zor olan kodun içine girer.  Not defterinde bir tablo oluşturduğunuzda, şifresini kopyalayabilir ve istediğiniz yere yapıştırabilirsiniz.
Tablo oluşturma algoritması
İlk olarak, HTML'de nasıl tablo yapılacağına dair kısa bir algoritma oluşturalım.  Bu, her adımın sırasını anlamanız içindir.  Ardından, noktaların her birinin nasıl gerçekleştirileceğini tam olarak analiz edeceğiz.
Hazırlık adımlarıyla başlayalım.
1. Bir kağıda tablonun şematik bir görüntüsünü çizin.
2. Satır ve hücre sayısını sayıyoruz.  İkincisinin sayısı farklıysa, her satır için ayrı ayrı sayılırız.
3. Satırdaki başlık hücrelerinin sayısını belirleyin (örneğin, "Hayır.", "Ad", vb. hücreler).
4. Tablonun ana parametrelerini - renk, yükseklik ve genişlik, metin hizalaması - genel olarak, gerekli olduğunu düşündüğünüz her şeyi yazın.
1. Tablonun etiketlerini ekleyin.
2. İhtiyacınız olan sayıya göre satır etiketleri ekleyin.
3. Satırlara, kağıda yazdığınız sayıya göre hücre etiketlerini (normal ve büyük) yerleştirin.
4. Tablonun parametrelerini bir bütün olarak ayarlayın.
5. Gerekirse, ayrı hücreler için göstergeler ayarlayın.
6. Hücrelerimizi metinle dolduruyoruz.
Tablo oluştur
Bir editör seçtiniz, şimdi HTML'de nasıl tablo oluşturulacağını bulalım.  Tablonun sayfa koduna eklendiği etiket ( 
), eşleştirilir, yani yapımız bu etiketle başlar ve ile biter.
Tablo etiketlerini ekledikten sonra satırlar ve hücreler oluşturmaya devam ediyoruz.
Hemen, bu öğelerin de eşleştiğini not ediyoruz.  Etiket dizeleri belirtir ve - hücreler.
Başlık hücreleri için eşleştirilmiş öğeyi kullanın .
Daha önce de belirtildiği gibi, ilk adım satırları çizmek ve ardından içlerindeki hücreleri yazmaktır.  Kafanızın karışmaması için, her blok arasında bir veya iki satır girinti yapmanızı veya "Tab" tuşunu kullanarak yeni bir eleman bloğu yazmanızı öneririz.
Nasıl görünebilir?  Bunun gibi:
;
;
;
;
;
;
;
;
P / p No.
Soyadı
1
;
İvanov
.
Gördüğünüz gibi, bu konuda karmaşık bir şey yok.  Ana şey, satır ve hücre sayısında kafa karıştırmamaktır.  Aksi takdirde, tablo eğilebilir.
HTML'de bir tablonun oluşturulmasını tartıştık, şimdi hem matrisin kendisinin hem de satırlarının ve hücrelerinin parametrelerine geçebiliriz.
Tablo parametreleri
Kod yazılırken şu noktalara dikkat etmelisiniz: Kenarlıklarda hizalama, arka plan, metin vb.
Tablo parametreleri etikette ayarlanır 
...  Bunlar şunları içerir:
1. Sınır - sınırların genişliği.  Tamsayı olarak ayarlanır.  Varsayılan olarak, herhangi bir tablonun sınırları sıfırdır.
2. Kenarlık rengi - kenarlık rengi.  Onaltılı renk kodu (# 00008B) ve İngilizce adı (DarkBlue) olarak ayarlanabilir.  Varsayılan olarak her zaman gridir.
3. Bgcolor - Ayrıca kod veya ada göre ayarlanır.
4. Hizala - tablonun arkasındaki metin hizalaması.  Varsayılan, sola hizalıdır.  Bu parametre için aşağıdaki seçenekler vardır:
sol - sağa sarın;
sağ -sola sarma;
merkez - tabloyu sarmadan ortada görüntüler.
5. Genişlik ve yükseklik - tablonun genişliği ve yüksekliği.  Hem piksel hem de yüzde olarak ayarlanabilir (tarayıcı penceresinin boyutuna göre).
Bu veya bu göstergeyi reçete ederek, tasarıma özel dikkat göstermelisiniz.  Parametrenin ardından bir "eşittir" işareti ve ardından tırnak içinde belirtilen değer gelmelidir.
Metnin rengine gelince, HTML formatında normal metinle aynı şekilde biçimlendirilir.
Bir masa tasarımı örneği:
;
;
;
;
;
;
;
;
P / p No.
Soyadı
1
;
İvanov
.
dize parametreleri
Bu nedenle, HTML'de nasıl tablo oluşturulacağını ve ana parametrelerini nasıl kaydedeceğimizi zaten anladık.  Peki ya bir satırı vurgulamamız gerekirse?  Tablonun ana metninden farklı bir şekilde mi tasarlanmalı?
Dize parametreleri etikete yazılır tablo verileriyle tamamen aynı.  Bir dize için aşağıdaki değişkenler ayarlanabilir:
1. Border, bordercolor ve bgcolor zaten sizin tarafınızdan biliniyor.
2. Hizala - metnin bir satırda hizalanması.  Sol, orta ve sağdaki değerleri alabilir.
3. Valign - bu etiket metni dikey olarak hizalar.  Aşağıdaki değerleri alır:
üst - metin üst kenarlığa hizalanır;
orta - merkezde;
alt - alt sınır boyunca.
Satır biçimlendirme örneği:
;
P / p No.;
Soyadı;
.
Hücre parametreleri
Ve HTML'de nasıl tablo yapılacağını bilmek isteyenler için dikkat etmeye değer son şey, hem normal hem de büyük harfli bireysel hücrelerin parametreleridir.  Aslında, her şey bir tablo veya satırla aynı şekilde yapılır.  Tek şey, iki önemli unsurun daha eklenmesidir:
1. Colspan - bu parametre, hücrenin yayılabileceği sütun sayısını belirtir.
2. Rowspan - zaten bu hücrenin kapladığı satır sayısını gösterir.
Tasarımın satır yazmaktan farkı olmadığı için koda bir örnek vermeyeceğiz.
sonuçlar
Bir tablo yapmak ilk bakışta göründüğü kadar zor değildir.  Kodunu yazarken en önemli şey azim ve dikkattir.
HTML'ye bir tablonun nasıl ekleneceğine gelince, şifresini kopyalayıp sayfanızın tam olarak size göre olması gereken yere yapıştırmanız yeterlidir.
Denemekten çekinmeyin ve yakında mükemmellik için tablo oluşturma tekniğinde ustalaşacaksınız.  İyi şanlar!