HTML öğretici. Hücreleri birleştirme

İki veya daha fazla hücreyi bir hücrede birleştirmek için etiketin colspan ve rowspan öznitelikleri kullanılır. ... colspan özelliği, yatay olarak birleştirilecek hücre sayısını ayarlar. Rowspan niteliği benzer şekilde çalışır, tek fark hücreleri dikey olarak yaymasıdır. Öznitelikleri eklemeden önce, hata oluşmadığından emin olmak için her satırdaki hücre sayısını kontrol edin. Yani, üç hücrenin yerini alır, bu nedenle sonraki satırda üç etiket olmalıdır veya benzeri bir yapı ...... ... Her satırdaki hücre sayısı eşleşmezse, boş hayali hücreler görünecektir. Örnek 12.3, geçerli olmasına rağmen, benzer bir hatanın göründüğü yanlış kodu gösterir.

Örnek 12.3. Geçersiz hücre birleştirme

colspan'ın yanlış kullanımı

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

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 12.5.

Pirinç. 12.5. Tabloda ek bir hücrenin görünümü

Örneğin ilk satırında üç hücre vardır, bunlardan ikisi colspan özniteliği kullanılarak birleştirilmiştir ve ikinci satır yalnızca iki hücre ekler. Bu, tarayıcıda görüntülenen fazladan bir hücre oluşturur. Şekilde açıkça görülebilir. 12.5.

Örnek 12-4, colspan ve rowspan özniteliklerinin doğru kullanımını gösterir.

Örnek 12.4. Hücreleri dikey ve yatay olarak birleştirme

Hücreleri birleştirme

Tarayıcı	6.0	7.0	7.0	8.0	9.0	1.0	2.0
Tarayıcı	Internet Explorer		Opera			Firefox
Desteklenen	Numara	Evet	Numara	Evet	Evet	Evet	Evet

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 12.6.

Pirinç. 12.6. Birleştirilmiş hücreler içeren bir tablo

Bu tablonun sekiz sütunu ve üç satırı vardır. "Internet Explorer", "Opera" ve "Firefox" kelimelerinin bulunduğu bazı hücreler, nerede iki, nerede üç hücre birleştirilir. "Tarayıcı" etiketli hücrede dikey birleştirme uygulanır.

Tablolarda hücrelerin dikey ve yatay olarak nasıl birleştirileceğini ayrıntılı ve ayrıntılı olarak anlatacağım.

Bu yazımızda html tabloları oluşturma ilkelerini anlatmayacağız, bu bilgiyi edinmek için HTML dersimizi alın.

Hücreleri bir tablo içinde birleştirmek için etikete verilen iki özellik vardır. bunlar colspan (yatay birleşim) ve rowspan (dikey birleşim).

Bazı insanlar bu özellikleri kullanmakta zorluk çekerler, hücrelerin birleştirilmesiyle ilgili sorunlar.

colspan ve rowspan öznitelikleri, parametre olarak 0 ile 1000 arasında tamsayı değerleri alır. Tablodaki hücreleri nasıl birleştirebileceğinize dair küçük bir örnek.

İlk bakışta, çok karmaşık olmayan bir yapı uygulanıyor, ancak bolluğa bakıldığında ve koddaki öğelerin birkaç hücreyi daha hangi ilkeyle birleştirebileceğinizi anlamak zordur.

Size hücreleri birleştirmenin çok yönlü ve çok uygun bir yolunu sunuyoruz.

Başlamak için, gelecekteki tablonuzdan bir boşluk hazırlayın ve tüm hücreleri ayrılmış olarak sunun. bir masa olabilir 3x3, 6x10 vesaire. Soldan sağa ve yukarıdan aşağıya saymaya başlayarak her hücreye kendi numarasını vereceğiz.

Bu yöntemi kullanarak yukarıda gösterilen tablonun oluşturulmasını analiz edelim.

Şablonumuzun kodu ve şablonun kendisi şu şekilde görünecektir:

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

1,2,3 numaralı hücreleri yatay olarak birleştirmeniz gerekir. Bunu yapmak için, kodda, hücre numarası 1, colspan niteliğini 3 değeriyle ekleyin. ve kaldır 2 ve 3 numaralı elemanlar Birleştirilen hücrelerin sayılarını ortaya çıkan hücreye yazıyoruz.

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

Şimdi 9 ve 13 numaralı hücreleri dikey olarak birleştirmemiz gerekiyor. Benzer bir prosedür uyguluyoruz - rowspan niteliğini 9 hücre numarasına 2 değeriyle ayarlayın, hücreyi 13 numaradan silin, birleştirilmiş hücreden oluştuğu hücrelerin numaralarını yazın.

Bu, kodumuzu ve tablonun görünümünü değiştirecektir:

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

11,12,15,16 hücreyi bir hücrede birleştirmek için kalır. Bunu yapmak için, 11 numaralı hücreye colspan = "2" rowspan = "2" özniteliklerini yazın. 12,15,16 hücrelerini koddan kaldırıyoruz. Birleştirilmiş hücre numaralarını 11,12,13,14 olarak yazıyoruz.

Bu, kodumuzu ve tablonun görünümünü değiştirecektir:

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

Hepsi bu, orijinal tabloyu aldık, şimdi hücreler sizin için uygun olan bilgilerle doldurulabilir.

Birleştirilmiş hücrelerle karmaşık tablolar oluşturma ilkesini anladığınızı umuyoruz.

HTML tablolarının iki işlevi vardır. Birincisi, tabloların kendisidir, yani bilgilerin bir tablo şeklinde çıktısıdır. İkincisi, sayfanın düzenidir. Ayrı içerik parçaları tablonun farklı hücrelerine yerleştirilir ve böylece sayfada doğru yerde görünür.

Tablo oluşturma

HTML'de bir tablonun nasıl oluşturulacağına bakalım. Bu etiket kullanılarak yapılır

... Tablolar, içinde hücreler bulunan satırlardan oluşur. Bu hücreler tablonun içeriğini içerir. Etiket tabloya bir satır ekler ve etiket

bir satıra hücre ekler. Etiketleri kapatmayı unutmayın. Örneğin şöyle bir tablo oluşturalım:

Tablo çerçevelerinin görünür olması için etiketin

border niteliği ayarlandı, ancak HTML5 bu niteliği kullanımdan kaldırıyor ve kullanımdan kaldırıyor. Ayrıca, çerçevelerle çalışmak ve arka planı değiştirmek için başka nitelikler de vardır ve hücrelerin içeriği hizalama nitelikleri de vardır. Bu niteliklerin tümü de kullanımdan kaldırılmıştır, bunun yerine stiller kullanılmalıdır.

Tablo hücrelerini birleştir

Tablo hücrelerini tek bir hücrede birleştirmek mümkündür. Bunu yapmak için etiket

aynı satırdaki hücreleri birleştiren bir colspan özniteliği ve farklı satırlardaki hücreleri birleştiren bir rowspan özniteliği vardır. Bu özniteliklerin değeri, birleştirilecek hücre sayısıdır.

Şöyle bir tablo oluşturalım:

Lütfen tablonun ikinci satırında bir hücrenin iki hücrenin yerini aldığını unutmayın, bu nedenle bu satırdaki toplam hücre sayısı diğerlerinden daha az olacaktır, bu durumda bir.

Şimdi şöyle bir tablo oluşturalım:

Ek tablo etiketleri

Kullandığımız etiketlerin yanı sıra tablo oluştururken de kullanılan etiketler vardır.

- başlık hücresi. Genellikle bir tablonun ilk satırında bulunur. Tablo sütunu için bir ad oluşturmak için kullanılır. etiketten

yalnızca kalın ve ortaya hizalamada farklılık gösterir.

- etiketin içinde , tabloya bir başlık ekler.

- belirli bir stili belirtmek için tablonun ilk birkaç satırını içerir. Tabloda bu tür yalnızca bir etiket olabilir. İçerdiği satırlar ilk satırdan başlamalıdır.

- belirli bir stili belirtmek için tablonun birkaç satırını içerir. Tabloda bu tür birkaç etiket olabilir.

- tablonun en altında görüntülenecek tablo satırlarını içerir.

- ilkinden başlayarak tablonun bir sütununun stilini tanımlar. Yani, bu tür ilk etiket, ilk sütun için stili, ikinci sütun için ikinci etiket vb. belirleyecektir. Farklı tarayıcılarda farklı çalışır.