Html'de css tablosu nasıl oluşturulur? Etiket özelliği ve
Merhaba sevgili blog okuyucuları! Çoğu zaman web sayfalarında metin ve resimlerin yanı sıra çeşitli verilerin tablo şeklinde görüntülenmesi de gerekli hale gelir. Evet, bu anlaşılabilir bir durum, tablo büyük miktarda bilgiyi sunmanın en uygun yoludur. Bu nedenle soru ortaya çıkıyor Html'ye tablolar nasıl gömülür?. Bu yazımda bu soruyu cevaplayacağım ve çeşitli html tablolarından birçok örnek vereceğim.
HTML kullanarak tablo nasıl oluşturulur
HTML tabloları dört adımda oluşturulur.
1. Eşleştirilmiş kodu kullanarak html kodunun ilk adımında etiket
tarayıcıya web sayfasına bir tablo eklendiğini söyleyin:
. Tablo öğesi bir web sayfasının blok öğesidir. Bu nedenle, tablo her zaman komşu öğelerden dikey girintilerle yeni bir satırda görüntülenir, dolayısıyla onu bir paragrafa koymaya gerek yoktur.
2. İkinci adımda şunu oluşturuyoruz: çizgiler eşleştirilmiş etiketler yerleştirerek tablolar
içeri
. Her öğe
ayrı bir satır oluşturur:
3. Daha sonra üçüncü adımda şunu oluşturuyoruz: hücreler eşleştirilmiş etiketlere sahip tablolar
Ve
elemanın içine yerleştirilen
. Etiket
yaratır olağan hücre ve
hücre başlık yani ilgili sütunun başlığı:
4. Son adımda onu elemanların içine yerleştiriyoruz
Ve
hücre içeriği. Bir web sayfasına tablo eklemek için kullanılan HTML kodu şuna benzer:
Sütun 1
Sütun 2
Sütun 3
Hücre 1-1
Hücre 1-2
Hücre 1-3
Hücre 2-1
Hücre 2-2
Hücre 2-3
Kenarlıkların görünümüne ince ayar yapmak yardımcı olacaktır. ile çerçevelerin kalınlığını ve rengini değiştirebileceğiniz gibi kenarlıkların türünü de değiştirebilirsiniz.
Hücrelerin içine yerleştirilmesi gereken metin isteğe bağlıdır ancak metin büyükse etiketi uygulanarak paragraflara bölünebilir.
Eklenen metne bir şekilde stil vermeniz gerekiyorsa, .
Metnin yanı sıra etiketini kullanarak hücrelere resimler de yerleştirebiliriz. :
Bir hücrenin içeriği başka bir tablo bile olabilir. Bu durumda iç içe tablo oluşturmanın normal tablo oluşturmaktan hiçbir farkı yoktur. Sadece etiketler arasında
Ve
etiketler eklendi
Ve
ve satırlar ve hücreler buna eklenir.
Tablo oluştururken akılda tutulması gereken bazı kurallar vardır:
tabloyu oluşturmak için yalnızca etiket kullanılır
;
etiket
yalnızca bir etiketin içinde olabilir
;
Etiketler
Ve
yalnızca bir etiketin içinde olabilir
, diğer etiket içerikleri
tarayıcı tarafından göz ardı edildi;
tablo içeriği (metin veya resimler) yalnızca etiketlerde bulunabilir
Ve
;
tablo hücreleri en azından bir miktar içeriğe sahip olmalıdır, aksi takdirde tarayıcı bunları hiç görüntülemeyebilir, eğer bazı hücrelerin boş olması gerekiyorsa, o zaman genellikle içine bölünemez bir boşluk (HTML değişmezi) yerleştirilir;
tablo, web sayfasının blok öğelerine atıfta bulunur;
tablonun ve hücrelerinin boyutları içeriğe bağlıdır; masa her şeyin sığması için genişlik ve yükseklikte gerilir;
tek tek hücrelerin sınırları arasında ve her hücrenin sınırları ile içeriği arasında küçük bir girinti yapılır;
başlık hücrelerinin metni (th öğesi) kalın harflerle ve ortalanmış olarak görüntülenir;
Tablonun ve hücrelerinin etrafındaki kenarlıklar varsayılan olarak çizilmez.
Tablo başlığı
Çift etiketiyle başlayalım
,
bu da tabloya bir başlık verir. Başlık metni, etiketin içinde olması gereken bu etiketin içine yerleştirilir.
. Ve etiketi tablonun html kodunun neresine yerleştireceğiniz önemli değil
, tarayıcı başlığı yine de tablonun üzerinde gösterecek ve ortalayacaktır. Ama genellikle etiket
açılış etiketinin hemen sonrasına yerleştirilir
:
Bu bir masa
Hücre 1.1
Hücre 1.2
Hücre 2.1
Hücre 2.2
Görüntülemek:
Tablo bölümleri
Html tablosu mantıksal olarak parçalara - bölümlere ayrılabilir. Üç tür bölüm vardır:
başlık bölümü tablonun başlığını oluşturan başlık hücrelerinin yerleştirildiği;
gövde bölümü temel verilere sahip hücrelerin bulunduğu;
tamamlama bölümü, toplam veri içeren hücrelerin yerleştirildiği yer.
Tablo başlığı bölümü bir çift etiketi kullanılarak oluşturulur . Ayrıca birden fazla unsurun kullanılmasına izin verilmez. aynı tablo içinde olmalıdır ve html kodunda etiketten hemen sonra yer almalıdır
.
Gövde bölümü çift etiketiyle oluşturulur
. Bir html tablosu, tek tip tasarım stillerinin uygulanabileceği yapısal bloklar oluşturmanıza olanak tanıyan birkaç gövde bölümü içerebilir.
Tamamlama bölümü bir çift etiketten oluşur
ve aynı kap içinde
Sadece bir olabilir.
Bu eşleştirilmiş etiketlerin tümü etiket içermelidir
karşılık gelen bölümlerle ilgili çizgiler oluşturan:
Sütun 1
Sütun 2
Sütun 3
Hücre 1.1
Hücre 1.2
Hücre 1.3
Hücre 2.1
Hücre 2.2
Hücre 2.3
Sonuç 1
Sonuç 2
Sonuç 3
Tablo hücrelerini birleştirme
Tabloların en önemli özelliğinden bahsetmeye devam ediyoruz - hücreleri birleştiriyor. Nitelikler birden fazla hücreyi tek bir hücrede birleştirmek için kullanılır. kolspan Ve satır aralığı Etiketler
Ve
. Colspan özelliği, yatay olarak birleştirilen hücre sayısını ve dikey olarak satır aralığını ayarlar:
1.1
1.2-1.3
2.1
2.2
2.3
3.1-4.1
3.2
3.3
4.2
4.3
Örnek sonuç:
1.1
1.2-1.3
2.1
2.2
2.3
3.1-4.1
3.2
3.3
4.2
4.3
Hücreleri birleştirirken hata oluşmaması için her satırdaki hücre sayısını kontrol etmek önemlidir. Evet, tasarım
iki hücrenin yerini alır, bu nedenle sonraki satırda iki etiket bulunmalıdır
veya aynı tasarım! Tüm satırlardaki hücre sayısı eşleşmiyorsa, boş ekstra hücreler görünecektir.
Hücreleri birleştirirken hatalı html kodu örneği:
hücre 1.1
hücre 1.2
hücre 2.1
hücre 2.2
Ve tarayıcıda görüntülenen sonuç:
Onlar. HTML kodunu analiz ederseniz, ilk satırda üç hücre bulunduğunu, bunlardan ikisinin colspan özelliği kullanılarak birleştirildiğini, ikinci satırda ise yalnızca iki hücrenin eklendiğini fark edeceksiniz. Bu nedenle ikinci satırda üçüncü bir boş hücre belirir.
Etiket Nitelikleri
Bu yazıda zaten bir etiket özelliğiyle karşılaştık
. Kenarlığın genişliğini piksel cinsinden ayarlayan border özelliği ile. Varsayılan olarak 0'dır ve bu nedenle hücreler varsayılan olarak kenarlıksız görüntülenir.
Border özelliğine ek olarak etiket tarafından desteklenen başka önemli özellikler de vardır.
. Şimdi onlara bir göz atalım.
Bağlanmak hizalamak— setler hizalama Sayfadaki tablolar. Hizalamayı sırasıyla sola, ortaya ve sağa ayarlayan sol, orta, sağ değerlerini alabilir. Varsayılan kaldı.
Bağlanmak arka plan, Hangi arka plan resmini ayarlar masaya. Değer olarak imaj dosyasının adresini alır.
bg rengi- yükler arka plan rengi tablolar. Arka plan özelliğiyle birlikte kullanılabilir.
Bağlanmak sınır rengi setleri Çerçeve rengi tablolar.
hücre dolgusu- tanımlar hücre sınırı ile içeriği arasındaki mesafe. Tablonun okunabilirliğini artırmanıza olanak tanır. Değer herhangi bir pozitif sayı olabilir.
Hücre aralığı— setler dış hücre sınırları arasındaki mesafe.
Bu konuda konuşmak için html sayfasına tablo nasıl eklenir Bitireceğim, özetleyeceğim:
Etiketler tablo eklemek için kullanılır
- tablo tanımı,
- bir satır ekleme ve
- bir hücre ekleyin;
tablo bir web sayfasının blok öğesidir;
hücrelerin içeriği yalnızca metin değil aynı zamanda resimler ve diğer tablolar da olabilir;
bir tablo üç tür bölüm içerebilir: başlık bölümü — , tamamlama bölümü ve gövde bölümü ;
hücreleri birleştirmek için etiket niteliklerini kullanın
colspan ve rowspan.
Bu kadar, bir sonraki yazımda html sitesindeki gezinme araçlarından bahsedeceğim. Bu yazımı kaçırmamak için blog güncellemelerime abone olun! Yakında görüşürüz!
HTML'deki tablolar en güçlü ve en yaygın kullanılan araçtır. Genel olarak web yöneticileri, tabloları yalnızca verilerin görüntülenmesini gruplandırma yöntemi olarak değil, aynı zamanda web sayfalarını biçimlendirmek için de kullanır.
HTML tablolarını kullanmanın her iki yoluna da bakalım. Ancak önce, bir HTML belgesine tabloların nasıl ekleneceğini öğreneceğiz ve ayrıca HTML'nin tablolarla çalışmak için sağladığı olanaklara da bakacağız.
Temel HTML Tablosu Oluşturma
HTML'deki her tablo, satırlar halinde düzenlenmiş birçok hücreden oluşur. Ve zaten tüm bu çizgiler bütün bir tabloyu oluşturuyor. Bir tabloyu belirtmek için çift etiketi kullanılır
Ve
.
Bildiğiniz gibi tablolar satırlardan ve hücrelerden oluşur. En basit tabloyu oluşturmak için iki etikete daha ihtiyacımız var: bunlar eşleştirilmiş etiketlerdir
Ve
çizgiler oluşturmak ve etiketleri eşleştirmek için kullanılır,
Ve
hücrelerin yaratılmasından sorumludur. ( Ayrıca satır ve hücrelerin kapanış etiketleri bulunmayabilir.)
Basit bir HTML tablosunun nasıl oluşturulacağını zaten bildiğimize göre, yukarıdaki bilgileri uygulayalım ve şekilde gösterildiği gibi basit bir tablo oluşturalım. (Şekil 1).
En basit tablo Şekil 1
Basit tablo koduŞekil 1'de gösterilmektedir (yukarıda)
1 masa hücresi
2 hücreli masa
3 hücreli masa
4 hücreli masa
5 hücreli masa
6 hücreli masa
7 masalı hücre
8 hücreli masa
9 hücreli masa
10 hücreli masa
11 hücreli masa
12 hücreli masa
Karmaşık tablo kodu, Şekil 2'deki örnek
Sütunların Birleştirilmesi Özelliği " kolspan"
Dize Birleştirme Özelliği " satır aralığı"
Bağlanmak " kötülemek"tepe"
Bağlanmak " kötülemek" "alt"
Ortaya çıkan tablo Şekil 1. çirkin görünüyor. Bütün bunlar, en basit tabloyu oluşturmak için kullandığımız etiketlerin (
,
,
) belirtilmesi gereken çeşitli niteliklere sahip olabilir: arka plan, kenarlıklar, boyutlar vb. olabilir.
Şimdi etikete uygulanan niteliklere bakalım.
Ve
. Etikete uygulandığında tablonun nasıl değişeceğini görmek için
nitelikleri, tablo kodunu kopyalayıp bir metin belgesine yerleştirin, .html uzantılı ve tarayıcıyla açın, tablo koduna nitelikler ekleyip sayfayı yenileyin, tablonuzun tarayıcıda nasıl görüneceğini göreceksiniz.
Etiket özellikleri:
1) "kenarlık" özelliği, tüm tablonun çerçevesinin genişliğini aşağıdaki gibi yazarak piksel cinsinden ayarlar:
.
2) "genişlik" ve "yükseklik" özellikleri - bu özellik, tablonuzun önerilen genişliğini ve yüksekliğini şu şekilde yazılır: ayarlar:
3) "bordercolor" özelliği - aşağıdaki şekilde yazılan tüm tablonun kenarlığının rengini ayarlar:
.
4) "align" özelliği - tablo hizalaması, align=left - tablo sola, align=right - sağa hizalanacak ve aşağıdaki şekilde yazılacaktır:
5) "bgcolor" özelliği - aşağıdaki şekilde yazılan tablonun arka plan rengini ayarlar:
Özelliklerin sizin için yeterli olduğunu düşünüyorum!
Şimdi etiket özelliklerini göz önünde bulundurun:
Ve
Etiket Nitelikleri
1) Etiket özelliği
"yükseklik". Lütfen etiketin
"genişlik" (genişlik) özelliği yoktur çünkü etiket
çizgiden ve dolayısıyla yükseklikten sorumludur. Ve sütunlar zaten genişlikten sorumludur. etiketi olmasına rağmen
"yükseklik" özelliği, ancak pratikte artık hiçbir yerde kullanılmıyor.
Etiket Nitelikleri
2) Etiket özelliği
Etiketin "genişliği", özelliği "yüksekliği" (yüksekliği)
hayır çünkü etiket
tablo hücresinden ve genişliğinden, çizgi ise yükseklikten sorumludur (etiket
).
3) Etiket özelliği
"kolspan". Bu özelliğin değeri, bu hücrenin kapladığı sütun sayısını gösterir. Başka bir deyişle, bu özellik, dikey olarak bitişik birkaç hücreyi tek bir hücrede birleştirmenize olanak tanır.
4) Etiket özelliği
satır aralığı. Bu özelliğin değeri, bu hücrenin kapladığı satır sayısını gösterir. Buna göre, bu özellik, birkaç hücreyi yatay olarak tek bir hücrede birleştirmenize olanak tanır.
5) Etiket özelliği
"hizala". Bu özellik, hücre içindeki öğeleri yatay olarak hizalamanıza olanak tanır. Üç değeri vardır: "sol" (hücrenin sol tarafında), "orta" (ortada), "sağ" (hücrenin sağ tarafında). Hiçbir şey belirtilmezse hizalama bırakılır.
6) Etiket özelliği
"kötü". Bu özellik, hücre içindeki öğeleri dikey olarak hizalamanıza olanak tanır. Ayrıca "hizalama"nın yalnızca üç değeri vardır: "üst" (üst), "orta" (orta), "alt" (alt). Varsayılan değer ortadaki "orta"dır.
Şimdi öğrendiklerimizi uygulayalım.
Şekil 2 karmaşık tablomuzu göstermektedir.
Karmaşık tablo Şekil 2
Temel olarak HTML tabloları hakkında bilmeniz ve bunları başarıyla kullanmanız gereken tek şey budur.
Joomla düzenleyicisinde bir html tablosu oluşturma.
Joomla'da tablo oluşturmak için Joomla'da varsayılan olarak bulunan TinyMce düzenleyicisini kullanabilirsiniz.
Artık Joomla görsel düzenleyicisini kullanarak tabloların basit veya karmaşık sürümlerini oluşturabilirsiniz, ancak dikkatli olun ve sitenizdeki içerik alanının genişliğini unutmayın, böylece bir tablo oluştururken genişliği bu değeri aşmaz.
Dosyaları indir:
Evgeny Popov'dan HTML üzerine video kursu
Ücretsiz video kursu 33 HTML dersi içerir.
Video kursu, temel HTML bilgilerini ortaya koyar ve yalnızca henüz HTML'ye aşina olmayan yeni başlayan site oluşturucular için değil, aynı zamanda daha deneyimli web yöneticileri için de yararlı olacaktır.
09.11.2015
Herkese selam! HTML'in temellerini öğrenmeye devam ediyoruz. Bu dersimde örneklerle anlatacağım ve göstereceğim. html'de tablo nasıl yapılır. Ayrıca masa hücrelerinin rengini nasıl ayarlayabileceğinizi, masayı nasıl ortalayacağınızı, masa kenarlığı yapmayı vb. nasıl öğrenebileceğinizi de düşünün. HTML tabloları genellikle HTML'de bazı bilgileri listelemek için kullanılır. Daha önce web sayfalarının çerçevesini oluşturmak için tablolar kullanılıyordu:
…ama bu geçmişte kaldı, çünkü bir siteyi . Blogumda veya web sitemde sıklıkla bir tablo kullanırım, örneğin .
Sanırım neden tablo oluşturmayı öğrenmeniz gerektiğini anladınız.
Bir tablodaki ana etiketler nelerdir?
○ etiketi MASA Bu, içinde sütunlar ve satırlar gibi tablonun diğer öğelerinin bulunduğu bir tablo oluşturmak için ana kaptır. Kapanış etiketi gereklidir.
○ etiketi TR
Konteynerin içinde
……
satırlar yerleştirilir:
Çubuklar etiketi kullanılarak oluşturulur
. Kapanış etiketi gereklidir.
Dikkat: tüm bu etiketleri kullanmadan tablo oluşturmak mümkün değildir.
Şimdi teoriyi kullanmaya ve pratikte bir tablo oluşturmaya çalışalım.
Egzersiz yapmak:üç sütunun olacağı tek satırlık bir tablo oluşturun.
satır -1 / sütun 1
sütun 2
sütun 3
Egzersiz yapmak:üç satır ve üç sütundan oluşan bir tablo oluşturun.
satır -1 / sütun 1
sütun 2
sütun 3
satır -2 / sütun 1
sütun 2
sütun 3
satır -3 / sütun 1
sütun 2
sütun 3
Şu ana kadar her şey sizin için açık mı? Anlamıyorsan elini kaldır! Evet anladım, devam edelim.
Şimdi tablonun niteliklerini düşünün.
*Öznitellikler
○ HTML'de tablo kenarlıkları
Tabloyu görünür kılmak için etikete
uygulamalı bağlanmak "sınır»
.
Özellik değeri ise «
sınır»
"0", etikete atanmamışsa kenarlık görünmez
bağlanmak sınır, tablodaki kenarlık da görünmeyecektir.
HTML'de tablo sınırları - web sitesi
satır -1 / sütun 1
sütun 2
sütun 3
Sonuç:
Özellikteki değeri değiştirmeyi deneyin sınır Açık "10"
.
○Bir tablodaki hücreler nasıl birleştirilir
Nitelikler bir tablodaki hücreleri birleştirmek için kullanılır "kolspan" ve etikete "satır aralığı" <
td>
.
colspan - hücreleri yatay olarak birleştirmek;
rowspan - hücreleri dikey olarak birleştirmek.
Değerlerde kaç hücrenin birleştirileceğini belirtin.
satır 1 sütun 1
satır 2 sütun 1
satır 2 sütun 2
Sonuç:
satır 1 sütun 1
satır 1 sütun 2
satır 2 sütun 1
Sonuç:
Daha karmaşık örnek:
HTML'deki tablolar - site
satır -1 / sütun 1
sütun 2
sütun 3
satır -2 / sütun 1
sütun 2
sütun 3
sütun 4
Sonuç:
○ Tablo hücreleri arasındaki boşluk nasıl artırılır
Metin ile hücrenin kenarlığı arasındaki mesafeyi artırmak için niteliği yazın "hücre dolgusu" etikete
içerik yatay olarak sağa hizalanır, dikey olarak aşağıya doğru bastırılır
içeriği yatay olarak sola, dikey olarak hizalayın - yukarıya doğru bastırın
içeriği yatay olarak ortaya, dikey olarak hizalayın - ortaya bastırın
Sonuç:
○ Html tablosu nasıl ortalanır
Tabloyu ortaya hizalamak için tabloyu bir etiketle sarmanız gerekir
:
Tablo kodu
satır -1 / sütun 1
sütun 2
sütun 3
Tablo için ek ve ana etiketler
Web sitesi için tablo
Başlık 1
Başlık 2
1
2
Sonuç:
Böylece masalarla işimiz bitti. Artık kendi başınıza herhangi bir karmaşıklık tablosu oluşturabilirsiniz. Bu derse göz atın. Herhangi bir tabloyu kendiniz oluşturmaya çalışın. Bir sonraki derste sizi görmeyi sabırsızlıkla bekliyorum. Blog güncellemelerime abone olun.
Önceki yazı Sonraki Gönderi
COLSPAN, ROWSPAN niteliklerini kullanarak, bir sütunun veya satırın birkaç bitişik hücresini tek bir büyük hücrede birleştirebilirsiniz.
COLSPAN özelliğini etiketle
,
birden fazla sütunun hücrelerini tek bir satırda birleştirmenize olanak tanır.
ROWSPAN özelliği - tek bir sütundaki birden fazla satırın hücreleri.
Bu niteliklerde belirtilen sayı, birleştirilecek hücre sayısını gösterir.
Çünkü Birleştirme işlemlerini gerçekleştirirken kafanızın karışması çok kolaydır, tablonun kağıt üzerinde bir ön taslağını yapmanızı şiddetle tavsiye ederim.
Örnek:
HTML Kodu:
1111
22222
33333
44444
55555
66666
77777
88888
99999
Tarayıcıda görüntüle:
1111
22222
33333
44444
55555
66666
77777
88888
99999
Html sayfa tablosunun görünümünü iyileştirme
CELLSPACING özelliği, tabloyu dışarıdan çevreleyen beyaz alan şeridinin boyutunu ayarlamanıza olanak tanır. Varsayılan olarak tarayıcı, tablo hücrelerini 2 piksellik bir şeritle ayırır.
CELLPADDING özelliği, hücre içindeki beyaz boşluk şeritlerinin boyutunu belirtir ve içeriğini dış kenarlardan ayırır. Varsayılan olarak bu değer 1 pikseldir.
Bitişik tablo hücrelerine yerleştirilen grafik görüntülerin tek bir bütün gibi görünmesi için CELLSPACING, CELLPADDING özelliklerini sıfır değerine ayarlamanız gerekir.
Html sayfasının tablo kenarlıklarını görüntüleme
Etiketin BORDER özelliğinin değeri ise
sıfır değilse, tarayıcı tabloyu çerçeveler ve tablonun bitişik satırlarını ve sütunlarını sınırlandırır. ÇERÇEVE, RULES özelliklerini kullanarak tablo çerçevelerinin hangi bölümlerinin gösterilmesi gerektiğini belirleyebilirsiniz.
FRAME niteliği tablonun dış çerçevesinin parçalarını tanımlamak için kullanılır.
RULES özelliği iç ayırıcı çizgilerin kümesini belirtir.
Bu nitelikler için geçerli değerler aşağıdadır.
ÇERÇEVE Değer Sonuç void Yukarıdaki tüm satırlar eksik Tablonun üstündeki tablonun altındaki satır Tablonun altındaki satır rhs Tablonun sağındaki satır lhs Tablonun solundaki satır hsides Tablonun üstündeki ve altındaki satırlar vsides Tablo sınırının solundaki ve sağındaki çizgiler Tüm satırlar mevcut (varsayılan) KURALLAR yok Tüm satırlarda eksik sütunlar Sütun satırları arasındaki çizgiler Satır grupları arasındaki çizgiler Sütun grupları ve satırlar arasındaki satırların tümü Tüm satırlar mevcut (varsayılan)
Örnek:
HTML Kodu:
111
111
111
111
111
111
Tarayıcıda görüntüle:
111
111
111
111
111
111
Html sayfa tablosu hücrelerinde kelime kaydırma
Varsayılan olarak tarayıcı, bir tablo hücresindeki metnin otomatik olarak sözcük kaydırmasını yapar. NOWRAP özelliği, tablodaki sözcük kaydırma işlevini zorla kapatır ve metni tek satırda görüntüler. Bu nedenle, bu özelliğin kısa metin içeren tablo hücrelerine göre uygulanması önerilir çünkü. aksi takdirde tarayıcı penceresinin dışına çıkar. Bu özelliğin etiketlerle biçimlendirilmiş hücre metni üzerinde hiçbir etkisi olmadığını unutmayın.
,
.
Html sayfasının iç içe geçmiş tabloları
Tabloları iç içe yerleştirmek, bir Web sayfasının görünümünü tasarlamanın çok yaygın bir yoludur. Öncelikle ana tabloyu oluşturmanız ve ardından alt tabloları hücrelerine yerleştirmeniz gerekiyor. Tabloları tanımlarken, eğik çizgi karakteri içeren tüm kapanış etiketlerinin açıklamalarına dahil edilmesi unutulmamalıdır, çünkü Böyle bir tanımlayıcının atlanması tabloyu önemli ölçüde bozacaktır.
Ayrıca yatırımı kötüye kullanmamalısınız çünkü bu durumda sayfanın tarayıcı tarafından yüklenmesi önemli ölçüde yavaşlar.
İç içe tabloların biçimlendirilmesi genel kurallara göre gerçekleştirilir ve bu da aslında sayfayı çekici kılar.
Örnek:
HTML Kodu:
111
111
01
01
01
01
111
111
111
Tarayıcıda görüntüle:
111
111
01
01
01
01
111
111
111
colspan etiketi - sütunların birleşimi
Karmaşık yapıdaki tabloların en yaygın kullanımı bir web sayfasının işaretlenmesidir. Resme bak:
Her birinin birer sütuna sahip olması için birinci ve üçüncü satırlara ihtiyacımız olduğu ortaya çıktı. Bu parametre kullanılarak elde edilir kolspan etiket
. Bu seçenek, tarayıcıya birden fazla sütunu tek bir sütunda birleştirmesini söyler. Bu parametrenin değeri kaç sütunun birleştirileceğini gösteren bir sayıdır.
Örneğin,
Bu sütun iki sütun içerir.
Örneğimiz için:
Belge başlığı
site başlığı
Menü
içerik
sitenin alt kısmı
Birinci ve üçüncü satırların artık birer sütun içerdiğini unutmayın.
Başka bir web sayfası işaretleme örneğini düşünün:
site başlığı
Menü
Menü
Menü
Menü
Menü
Menü
haberler
içerik
Sayım - bu tabloda kaç satır ve sütun var? Bunu yapmak için, resme zihinsel olarak bir ızgara uygulayın. Üç satır ve altı sütun olacak.
İlk satır, altı sütun içeren bir sütundan oluşur. Bunu yazalım:
site başlığı
İkinci satırda altı sütun vardır:
Menü
Menü
Menü
Menü
Menü
Menü
Üçüncü satırda iki sütun vardır; ilkinde iki sütun, ikincisinde ise dört sütun vardır:
haberler
içerik
O kadar da zor değil. Resme görsel olarak bir ızgara uyguluyoruz ve her birinde gerekli sayıda sütunu tanımlayarak satırları yukarıdan aşağıya sırayla yazıyoruz.
rowspan etiketi - satırları birleştirme
Peki ya bu işaretlemeye ihtiyacımız olursa?
Lütfen ikinci satırda yalnızca bir sütunun bulunduğunu unutmayın, çünkü ilk sütun ilk satırdan itibaren uzanır, yalnızca ikisini içerir.
İlk bakışta bu karmaşık görünebilir, aslında biraz pratik yaparak her karmaşıklıkta tablolar oluşturabileceksiniz.
Başka bir örneğe bakalım:
bir kep
Menü
içerik
sitenin alt kısmı
Yani ilk satırda iki sütunumuz var, ikinci sütun ise iki satırı birleştiriyor. Bunu yazalım:
bir kep
Menü
İkinci satır bir sütundur (sadece bir kısmı ilk satırın ikinci sütunu tarafından gizlenmiştir):
içerik
Son olarak üçüncü satır, üç sütun içeren tek bir sütundur:
sitenin alt kısmı
Bu iki seçeneği kullanmak satır aralığı Ve kolspan herhangi bir karmaşıklıkta tablolar oluşturabilirsiniz. Pratik.
İç içe tablolar
Adından da anlaşılacağı gibi, bir tablo diğerinin içine yerleştirilebilir, ancak herhangi bir sütunun içine de yerleştirilebilir. Bunu örnek olarak son işaretlememizi kullanarak yapalım.
