Tablo genişliği özniteliğini ayarlarsanız. Boş hücrelerin davranışı

bir dize oluşturur ve etiket :

bir tablo başlığı oluşturur, etiketin içinde bulunur - açılış etiketinden hemen sonra. Başlık, varsayılan olarak tablonun üzerine yerleştirilir ve ortalanır.

Tablo başlığı

1. sıranın 1. hücresi	1. sıranın 2. hücresi
1. hücre 2. sıra	2. sıranın 2. hücresi

Tablo hizalama. Hücre içeriğinin hizalanması

Tabloyu hizalamak için etiketin align niteliği kullanılır.

.

align niteliği ile tabloyu tarayıcı penceresinin (align= "left" ve align= "right" ) kısmına sola veya sağa yerleştirebilirsiniz ( ana öğe) veya merkezine göre (align= "center" ).

Satır içeriği hizalaması ( etiket

) ve hücreler ( etiket Tablo satırını oluşturan, yükseklik ve genişlik özelliklerine sahip değildir. Bir satırın yüksekliği, içinde bulunan hücrelerin yüksekliğine karşılık gelir. Satır genişliği tablo genişliğine eşittir.

Yükseklik ve genişlik değerleri piksel olarak veya boş alanın yüzdesi olarak belirtilir. Değerleri ayarlamak için:

Pozitif bir tamsayı belirtir. Bu durumda boyut piksel olarak verilecektir;

% sembolüyle pozitif bir tamsayı belirtin.

Tablonun veya hücrenin içeriği belirtilen boyutları aşarsa, tarayıcı tarafından yok sayılır ve içeriğin boyutlarına göre yeni boyutlar otomatik olarak seçilir.

) yatay olarak ve konumunu belirleme - masanın üstünde veya altında.

Varsayılan olarak, hücre içeriği yatay olarak sola hizalanır ve dikey olarak ortaya hizalanır.

Tablonun ve hücrelerin yüksekliği ve genişliği

Varsayılan boyutlar ( yükseklik ve genişlik) ve tablolar ve hücreler içeriklerinin boyutuna göre değişir.

Ancak hem tablonun hem de tek tek hücrelerinin yüksekliği ve genişliği, sırasıyla yükseklik ve genişlik nitelikleri kullanılarak açıkça ayarlanabilir.

Etiket

) yatay olarak align niteliğiyle ve dikey olarak valign niteliğiyle yapılır: align niteliği, satırların ve hücrelerin içeriklerinin sırasıyla sol, sağ, merkez ve genişliklerine göre hizalanmasını ayarlayan left , right , center ve justify değerlerini alır; top , alt ve orta değerlerini alan valign özniteliği, satırların ve hücrelerin içeriklerinin sırasıyla üst, alt ve ortalarına göre hizalanmasını ayarlar. align niteliği ayrıca başlığı hizalamaya da hizmet eder ( etiket

>

Örnekte görebileceğiniz gibi: sütunun hücrelerinden birinin genişliğini belirterek, tüm sütunun genişliğini ayarlarsınız; ve satırın hücrelerinden birinin yüksekliğini belirterek, tüm satırın yüksekliğini ayarlarsınız.

Tablo ve hücre sınırları

Tablonun ve hücrelerinin her birinin varsayılan olarak görünmeyen kendi sınırları vardır.

Etiketin sınır özelliği

sınırları görünür hale getirmenize ve kalınlıklarını ayarlamanıza olanak tanır. Bu, tablonun etrafındaki ve her hücrenin etrafındaki sınırları gösterecektir.

Kenar kalınlığı ( veya çerçeveler) piksel cinsinden belirtilir. border niteliğinin değeri pozitif bir tamsayıdır. border niteliği bir değer olmadan belirtilirse, kenarlık 1 piksel kalınlığında olacaktır.

Kenar kalınlığı sadece tablo için ayarlanır. Hücrelerin etrafındaki kenarlığın kalınlığı her zaman 1 pikseldir ( veya eksik).

Varsayılan olarak, kenarlık bir 3D efektiyle görüntülenir ve siyahtır.

bordercolor niteliği, sınırın rengini ayarlar ve 3B efektini kaldırır. Nitelik, tablo kenarlığının rengini ayarlamak için kullanılabilir ( etiket

), Teller ( etiket ) veya hücreler ( etiket - satır html tablosu
- sütun (hücre) html tablosu.

Şimdi tüm etiketleri tek bir tabloda birleştirmeye çalışalım. Bunu yapmak için iki satır ve üç sütundan oluşan bir html tablosu oluşturacağız:

Bu html tablosunu yapmak çok kolaydır. İlk olarak, içine gerekli sayıda satırı koyduğumuz tablonun etiketlerini koyalım (örneğimizde 2 satır):

). bordercolor özniteliği tüm tarayıcılar tarafından desteklenmez ve bu nedenle önerilmez. Kenarlığın rengini ayarlamak için stilleri kullanmak daha iyidir ( o zaten css'de). Kenarlık özelliği belirtilmedi. Bu nedenle, sınırlar yoktur. Tablo kenarlığı 3 piksel kalınlığındadır. Hücrelerin 1 piksel kalınlığında sınırları vardır! Kısmi kenarlık gösterimi Tablonun kenarlığı ve hücrelerin etrafındaki çerçeve kısmen görüntülenebilir. çerçeve etiketi özelliği tablonun kenarlığının nereye çizileceğini belirtir. Rules özelliği, hücre sınırlarının nasıl görüntüleneceğini belirtir. "500 piksel" çerçeve ="hsides" kuralları = "cols" > Kurulmuş yatay tablo sınırları Ve kenarlıklar görüntülenir sütunlar arasında Hücrelerin iç ve dış dolgusu Tabloları HTML'de biçimlendirirken, bazı bilgilerin görsel olarak sunulması ve uygun algılanması için hücre içinde ve dışında girintilerin kullanılması yararlı olabilir. Doldurma - hücre kenarlıklarından içeriklerine, etiketin cellpadding özelliği tarafından belirlenir . Dış dolgu - komşu hücrelerin sınırları arasındaki mesafe ve hücrelerin sınırlarından tablonun sınırına kadar olan mesafe, etiketin cellpacing özelliği tarafından belirlenir. . Öznitelik değerleri, mesafeyi piksel cinsinden belirten pozitif tam sayılardır. Hücre içeriğinden uzaklık sınırlarına 10 piksel Hücreler arası ve hücrelerden uzaklık tablo sınırına 25px Hücreleri birleştirme Tabloları HTML'de tasarlarken ve biçimlendirirken, genellikle bitişik hücreleri birleştirmek gerekir. Ve böyle bir ihtiyaç ortaya çıkarsa, o zaman etiketin colspan ve rowspan niteliklerini kullanmalısınız.	. colspan özelliği yatay olarak birleştirilecek hücre sayısını belirtir ve rowspan özelliği dikey olarak birleştirilecek hücre sayısını belirler. Tabloda birden çok satır varsa, her iki özellik de anlamlıdır. 1 2 3 4 1 2 3 4 Tablo arka planı. Tablo hücreleri arka plan HTML'de, tüm tablo için genel bir arka plan ve ayrıca seçilen tek bir hücre için bir arka plan ayarlamak mümkündür. Etiketin arka plan özelliği tablonun arka plan görüntüsü olacak bir görüntüyü belirtir. Öznitelik değeri, resim içeren dosyanın adresini belirtir - dosyanın mutlak veya göreli yolu (). bgcolor etiketi özelliği tablonun arka plan rengini ayarlar. Renk iki şekilde ayarlanabilir () Aynı öznitelikleri kullanarak, herhangi bir tablo hücresi için arka plan görüntüsünü ve arka plan rengini ayarlayabilirsiniz ( etiket , ve . Bunlardan herhangi biri, bir veya daha fazla tablo satırının bazı özelliklerini değiştirmek için kullanılabilir: bu yine satırlardaki hücrelerin içeriğinin yatay ve dikey olarak hizalanmasıdır - sırasıyla align ve valign niteliklerini kullanarak; ve bgcolor niteliğini kullanarak hücrelerin arka plan rengini ayarlama. Bu etiketleri kullanırken, sadece aralarındaki farkları belirleyen birkaç nüansın farkında olmalısınız. etiketler ve etiketinden önce yerleştirilmelidir , açılış tablosu etiketinden hemen sonra ). Koyu pembe, masanın arka plan rengidir. Tek bir hücrenin arka plan görüntüsü gökyüzüdür! Ayrıca etiketin cols niteliğinin varlığını da hatırlayın. tarayıcıya tablodaki sütun sayısını söyleyen . cols niteliğini kullanmak, tarayıcının tablonun içeriğini daha hızlı oluşturmasını sağlar. Tablo düzenleme Bu bölümde, aynı anda birkaç tablo öğesini düzenlerken kullanılan etiketleri ele alacağız. Bu etiketler iki gruba ayrılabilir. İlk grup etiketleri içerir ve . Neredeyse aynıdırlar ve bazı özellikleri ayarlamaya ve tablonun bir veya daha fazla sütununun özelliklerini değiştirmeye yararlar. Bu etiketlerden biri, etiketin hemen arkasına yerleştirilir. . Diyelim ki bu etiket . Etiketin span niteliğini kullanma align , valign veya width özniteliklerinin uygulanacağı sütun sayısını belirtin ( sütun hücrelerinin içeriğini yatay, dikey olarak hizalayın veya sütunların genişliğini ayarlayın). Eğer etiketteki span özelliği eksikse, birinin özellikleri - tablonun ilk sütunu değişecektir. Etiketi ikinci kez kullandığınızda özellikler aşağıdakiler için ayarlanmıştır ( sonraki - yayılma özelliği yoksa) tablo sütunları vb. "2" genişlik="70 piksel" > 1 2 3 4 5 1 2 3 4 5 İkinci etiket grubu da hemen hemen aynı etiketleri içerir. . Bir etikete yerleştirilen satırlar tablonun en üstünde sunulur ve etikete eklenen satırlar tablonun alt kısmında yer alacaktır. Her iki etiket de aynı tablo içinde yalnızca bir kez uygulanabilir. Etiket bir etiket içinde birden çok kez kullanılabilir . "doğru" bgcolor="#00FF33" > 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 1. HTML tabloları nedir ve neden gereklidir? html tabloları- bu, her html sayfasının ve buna bağlı olarak her sitenin en temel bileşenlerinden biridir. Örneğin, bir site sitesi tablolardan oluşur: resimler, metinler, bağlantılar, kayıt formları - her şey html tabloları kullanılarak birbirine göre yerleştirilir (aslında tüm site de büyük bir tabloda bulunur). 2. Html tablolarında hangi etiketler bulunur? etiketler, html tablosunu tanımlamak şu şekilde yazılır: Ancak tüm tabloların satır ve sütunlardan (hücrelerden) oluştuğunu bildiğimiz için, onlar için etiketler ayarlamanız gerekir:

Ardından, sütun etiketlerini kullanarak her satırı hücrelere ayırırız:

- hücre 1.1
- hücre 1.2
- hücre 1.3


- hücre 2.1
- hücre 2.2
- hücre 2.3

Aslında, yazıtlardaki ilk rakam satır numarası, ikincisi ise hücre numarasıdır (1x2 - ilk satır, ikinci hücre vb.).

3. Html tablolarının arka plan rengi nasıl ayarlanır?

Şimdi de tablonun arka planının veya her hücrenin ayrı ayrı nasıl ayarlandığını görelim.

Bu nedenle, arka planı ayarlamak için öznitelik kullanılır. bgcolor="background_color".

Örneğin, tüm tablo için bir renk belirlememiz gerekirse, bu şu şekilde yapılır:

bgcolor="background_color">

- hücre 1.1
- hücre 1.2
- hücre 1.3


- hücre 2.1
- hücre 2.2
- hücre 2.3

Örneğin, sarı bir plaka yapmak gerekirse, şunu yazarız:

Gerekirse bir satır için bir arka plan rengi ayarla html tablosu, ardından öznitelik bgcolor="background_color" etikete uygula

Tablo genişliğini ayarlamamız gerekiyor, ancak bazen tablo genişliğini değiştirmemiz gerekiyor. Ve bunu çözmemiz gerekiyor. tablonun genişliği nasıl değiştirilir. Tablonun genişliği piksel veya yüzde olarak değiştirilebilir... Şimdi tablonun genişliğini html olarak değiştireceğiz! En son üç sütun ve üç satırdan oluşan 500 piksel genişliğinde bir tablo yapmıştık! İşte bu tablonun kodu; Şimdi bir tablo veya sütunun genişliğini nasıl değiştireceğimizi anlamak için değiştirelim ve kodumuza bazı sayılar ekleyelim. tablo genişliği = "500" - 599 olarak değiştirin. Bu sayfa tablolar üzerine inşa edilmiştir ve metin alanının genişliği, yani. bu kelimelerin bulunduğu yer 600 piksele eşittir. Şunları yapabileceğiz: 2. sütunun genişliğini 200 piksel yapalım: 3 numaralı sütunun genişliğini 299 piksel yapalım: Ve bu kodu alıyoruz: masamıza bak Şimdi genişlik özniteliğinin değerini yarı = %50 olarak değiştirelim. %50 olan tablomuza bakıyoruz. Tablonun genişliğini nasıl değiştireceğiniz hakkında size söylemek istediklerim bu kadardı. Şimdi masa yüksekliğine geçelim! tarayıcıya tablonun tamamlandığını bildirir. Herhangi bir tablo sütunlardan ve satırlardan oluşur. Etiket
hücre üst üste. Buna göre, bir satırda kaç hücre bulunursa, tabloda o kadar çok sütun olacaktır. Etiket	ayrıca bir hücre oluşturur. Etiketten farkı	etiket tarafından oluşturulan hücre	bir başlık hücresidir: içeriği ortalanır ve metin ise tarayıcı onu kalın olarak görüntüler. Etiket tarafından oluşturulan hücrenin içeriği	varsayılan olarak sol kısmında bulunur. Etiket

bgcolor="#FFFF00"> bgcolor="#0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

Bu durumda öznitelik Hücre numarası beyaz rengi etiketin içindeki metne ayarlar.

Aynı şekilde o da her hücrenin rengi ayrı ayrı. Örneğin, 1.2 hücresinin rengini mavi olarak değiştirmek istiyorsanız, açılış etiketinin içinde bağlanmak bgcolor="background_color":

4. Html tablo hücrelerinin genişlik ve yükseklik boyutu nasıl ayarlanır?

Bu nedenle, hücrelerin genişliğini ve yüksekliğini manuel olarak ayarlamak için yükseklik ve genişlik özelliklerini kullanın. Tüm tablo için, bir satır için, bir hücre (sütun) için ayarlanabilirler. Yükseklik ve genişlik, piksel veya yüzde olarak ayarlanabilir. Bizim durumumuzda, sütunlar (hücreler) için genişlik ve yüksekliği piksel olarak ayarlayacağız.

yükseklik- hücrenin yüksekliğini belirleyen özellik

Genişlik- hücrenin genişliğini belirleyen bir özellik

Ve şimdi bir örnek için:

Şimdi hücrelerin yüksekliğini neden her satırda sadece bir kez belirlediğimizi açıklayacağım.

Bir satırda herhangi bir hücre için diğerlerinden daha büyük bir yükseklik ayarlarsanız, buna rağmen, satırınızın tüm hücreleri (sütunları) en büyüğüne eşit olacaktır. Ve her sıranın genişliği en iyi şekilde ayrı ayrı ayarlanır!

Tüm tablonun yüksekliğini ve genişliğini ayarlayabilirsiniz. Bu durumda, tüm hücreler (sütunlar) ve satırlar, bu parametreleri kendileri için kişisel olarak ayarlamazsanız (tablonun veya piksellerin toplam genişliğinin (yüksekliğinin) yüzdesi olarak) kendilerine verilen alanı eşit olarak paylaşırlar.

Ayrıca, çoğu zaman yükseklik, yükseklik ve genişlik genişliğini ayarlamanız gerekir. yüzde olarak:

hücre içeriği

Örneğimizde olduğu gibi bir hücre için yüzde 40'lık bir genişlik belirlersek, bu, hücrelerin geri kalanı için hala yüzde 60'ımız kaldığı anlamına gelir, yani. genişliklerinin toplamı yüzde 60'ı geçmemelidir. Her şey çok basit: toplamda sadece %100'ümüz var. Şunu dikkate alıyoruz: 100 - 40 = 60.

5. Html tablosundaki metin nasıl hizalanır?

Şimdi html tablomuzdaki metni nasıl sola, sağa ve ortaya hizalayacağımızı bulalım.

Bu öznitelik kullanılarak yapılır:

hizala="sola"- html tablosunun içindeki metni sola hizalar

hizala = "merkez"- html tablosunun metnini merkeze hizalar

hizala = "sağ"- html tablosunun içindeki metni sağa hizalar

Buna göre align niteliği de sağ ve sol değerleri alabilir. Bir etiketle kullanıldığında haklı çıkarmanın anlamı hizalama özelliği kabul edemez.

Örneğin, ortasına hizalanmış metin içeren bir tablonun html kodu şöyle görünür:

hizala = "merkez"> hizala="sola"> 1x1 hizala = "merkez">1.2 hizala = "sağ"> 1x3 hizala="sola">2.1 hizala = "merkez"> 2x2 hizala = "sağ">2.3

Bir özellik yazarak hizala = "merkez" açılışta

, html tablosunu tarayıcı sayfasının ortasına hizaladık.

Tarayıcıda aldığınız sonuç şudur:

1x1	1.2	1x3
2.1	2x2	2.3

Ve şimdi html tablosunun içindeki metnin nasıl üste veya alta hizalanacağına, yani hücrenin içeriğinin sadece tam ortasına (varsayılan olarak) nasıl yerleştirileceğine dair bir örneğe bakalım. ama aynı zamanda üstte veya altta.

Dikey hizalama şu nitelik tarafından belirlenir:

hizala="üst"- içerik hücrenin en üstüne yerleştirilecek

hizala = "orta"- içerik hücrede ortalanacak

hizala = "alt"- içerik hücrenin altına yerleştirilecek

Örneğimizde bu özelliklere bakalım:

hizala="üst"> 1x1 1.2 hizala="üst"> 1x3 hizala = "alt">2.1 2x2 hizala = "alt">2.3

Tarayıcıdaki özniteliklerin sonucuna bakarsak elde ettiğimiz şey budur. hizalamak ve valign:

1x1	1.2	1x3
2.1	2x2	2.3

6. Html tablosunun hücreleri ve sütunları nasıl birleştirilir?

Yazımızın bu bölümünde özelliklerden bahsedeceğiz. kol açıklığı ve satır aralığı.

kol açıklığı- verilen hücrenin kapsadığı sütun sayısını belirler

satır aralığı- bu hücrenin kapsadığı satır sayısını belirler

değerler kol açıklığı ve satır aralığı 2 veya daha fazla değer alabilir, yani. bir hücre iki veya daha fazla sütuna (satır) yayılabilir.

Şimdi örnekte 1x1 hücreyi iki sütuna (hücre) genişleteceğiz. Bunu yapmak için, 1x1 hücre için ayarlayarak colspan="2" niteliğini kullanacağız. Kod şöyle görünecek:

Gördüğünüz gibi, 1x1 hücre, iki hücrenin uzunluğunu kaplar. Buna göre uzunluğu, bu iki hücrenin (160 piksel) toplam uzunluğuna eşittir. 1x1 hücre için genişlik niteliğini ayarlamadık, ancak yapsaydık genişliği 160 piksele ayarlardık. Yine de, örneğimizde 1x3 hücre olmadığına dikkat edin, yani. ilk satırda sadece iki hücre var, neden - bunu daha önce tartışmıştık - colspan özelliği sayesinde 1x1 hücre iki hücreye eşittir.

colspan ve rowspan öznitelikleri çok dikkatli bir şekilde ele alınmalıdır. Bir hata sitenizin kapanmasına neden olabilir.

Ve şimdi colspan parametresiyle ilgilendiğimize göre, satır aralığı parametresini anlayalım. Çalışma prensibi burada aynıdır:

colspan="2"> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

Böylece, html tablolarının satır ve sütunlarındaki hücreleri birleştirmeyi öğrendik.

7. Girintiler nasıl kaldırılır, eklenir veya değiştirilir ve bir tablo için html çerçevesi nasıl ayarlanır?

Bu nedenle, daha önce, girintileri açıkça görülebilen hücreler arasında bir html tablosu oluşturduk. Bunları daha da görünür kılmak için tablomuza bir bordür ekleyelim. Bu, nitelikler kullanılarak yapılır:

border="kenarlığın piksel cinsinden genişliği"- sınır genişliğini ayarlar

bordercolor="kenarlık rengi"- kenarlık rengini ayarlar

Örneğin html tablomuzu 1 piksel genişliğinde siyah bir çerçeve yapalım.

Bu etiket için

nitelikler ekleyin:

Artık html tablosunun hücreleri arasındaki dolguyu ve hücrelerin iç kenarlarından metne olan dolguyu açıkça görebiliyoruz. Bu nedenle, bu girintileri sorunsuz bir şekilde yönetebiliriz. Nitelikler bunun içindir:

cellpacing="piksel olarak dolgu genişliği"- hücreler arası boşluk

cellpadding="piksel cinsinden dolgu genişliği"- hücrenin içindeki girinti (hücre kenarından metne, resme, bağlantıya...)

Örneğin, hücreler arasında 10 piksellik bir girinti yapalım ve hücrenin kenarından metne olan girintiyi 20 piksele çıkaralım. Şu şekilde yapılır:

hücre doldurma = "20"hücre aralığı = "10"> 1.1 1.2 2.1 2.2

Tarayıcıdaki sonuca bakarsak, hücreler arasındaki mesafenin ( hücre aralığı) html tablomuzun 10 piksele, metin ile hücrenin iç kenarı arasındaki mesafe 20 piksele yükseldi.

1.1		1.2
2.1	2.2

Girintileri tamamen kaldırmanız gerekirse, hücre doldurma = "0" ve hücre aralığı = "0".

8. Bir html tablosunu diğerinin içine nasıl ekleyebilirim?

Html tablolarını incelemenin son aşamasına yaklaşıyoruz. Şimdi bir tabloyu diğerinin içine nasıl yerleştireceğimizi öğreneceğiz.

Örnekte, 1.2 hücresinin içine bir satır ve iki sütundan oluşan yeni bir tablo ekleyeceğiz. İç html tablosunda 2 piksel genişliğinde ve hücre aralığı 0 piksel olan kırmızı bir kenarlık ayarlayacağız. Ayrıca, iç tabloyu hücrenin en üstüne yerleştireceğiz.

Bu çok basit bir şekilde yapılır:

1.1 3.1 3.2 2.1 2.2

Tablomuzun yeni dönüşümlerinin bir sonucu olarak olan budur (kırmızı hücreler, büyük bir tablonun içinde bulunan dahili bir tablodur):

1.1		3.1 3.2
2.1	2.2

Bu aşamada, bu makaleyi bitireceğiz. Bence başarılı oldu ve anlaşılması zor değil ve umarım artık tablolarla ilgili bir sorununuz olmaz.

CSS spesifikasyonu, tabloların tasarımı için sınırsız olanaklar sunar. Varsayılan olarak, bir tablo ve tablo hücrelerinin görünür kenarlıkları veya arka planları yoktur ve tablo içindeki hücreler birbirine yakın oturmaz.

Tablo hücrelerinin genişliği, içeriklerinin genişliğine göre belirlenir, bu nedenle tablo sütunlarının genişliği farklı olabilir. Bir satırdaki tüm hücrelerin yüksekliği aynıdır ve en uzun hücrenin yüksekliğine göre belirlenir.

Tablo Biçimlendirme

1. Tablo sınırları

Tablo ve içindeki hücreler varsayılan olarak tarayıcıda görünür kenarlıklar olmadan görüntülenir. Tablo kenarlıkları border özelliği tarafından belirlenir:

Tablo ( border-collapse: crash; /*hücreler arasındaki boşlukları kaldır*/ border: 1px düz gri; /*tabloyu 1px gri dış kenarlık olarak ayarla*/ )

Üstbilgi hücre sınırları her sütun, inci öğe için ayarlanmıştır:

Th (kenarlık: 1 piksel düz gri;)

Hücre sınırları td öğesi için tablo gövdeleri belirtilir:

Td (kenarlık: 1 piksel düz gri;)

Bitişik hücrelerin kenarlıklarının kalınlığı iki katına çıkmaz, böylece tüm tablo için kenarlıkları şu şekilde ayarlayabilirsiniz:

Th, td (kenarlık: 1 piksel düz gri;)

Bir tablonun dış kenarlığı, ona artırılmış bir genişlik verilerek vurgulanabilir:

Tablo (kenarlık: 3 piksel düz gri;)

Sınırlar kısmen ayarlanabilir:

/* tablo için 3px gri bir dış kenarlık belirle */ tablo (border-top: 3px düz gri; ) /* tablo gövdesi hücresi için 1px gri bir sınır belirle */ td (border-alt: 1px düz gri;)

Border özelliği hakkında daha fazla bilgi edinebilirsiniz.

2. Tablonun genişliği ve yüksekliği nasıl ayarlanır

Varsayılan masa genişliği ve yüksekliği hücrelerinin içeriğine göre belirlenir. Genişlik ayarlanmazsa, en geniş satırın (çizginin) genişliğine eşit olacaktır.

Tablo ve sütun genişlikleri genişlik özelliğini kullanarak ayarlayın. Tablo tablo (width: 100%;) olarak ayarlanmışsa, tablonun genişliği, bulunduğu konteyner bloğunun genişliğine eşit olacaktır.

Tablo ve sütunların genişliği genellikle px veya % olarak ayarlanır, örneğin:

Tablo (genişlik: 600 piksel;) inci (genişlik: %20;) td:ilk-çocuk (genişlik: %30;)

masa yüksekliği ayarlanmadı. satır yüksekliği tablolar, öğelere üst ve alt dolgu eklenerek değiştirilebilir ve . Yükseklik özelliği ile yüksekliğin sabitlenmesi önerilmez.

Th, td (dolgu: 10px 15px;)

3. Tablo arka planı nasıl ayarlanır

Varsayılan masa arka planı ve hücreler şeffaf. Tabloyu içeren sayfa veya bloğun arka planı varsa, tablo üzerinden gösterilir. Hem tablo hem de hücreler için arka plan ayarlanırsa, tablonun ve hücrelerin arka planının üst üste geldiği yerlerde, yalnızca hücrelerin arka planı görünür olacaktır. Bir bütün olarak tablonun arka planı ve hücreleri şunlar olabilir:
dolgu ,
,
.

4. Tablo sütunları

Tablo CSS modeli, esas olarak etiketi kullanılarak oluşturulan satırlara (satırlara) odaklanır.

. Pratikte, aşağıdaki şekillerde mümkün olan özel sütun biçimlendirmesinin gerekli olduğu zamanlar vardır:

etiketi kullanmak

Herhangi bir sayıda sütun için arka planı ayarlayabilirsiniz;

td:first-child , table td:last-child seçici tablosunu kullanarak, tablonun ilk veya son sütunu için stiller ayarlayabilirsiniz (tablo başlığının ilk hücresi hariç);

tablo seçiciyi td:nth-child (sütun seçim kuralı) kullanarak tablonun herhangi bir sütunu için stiller ayarlayabilirsiniz.

CSS seçicileri hakkında daha fazla bilgi edinebilirsiniz.

5. Bir tabloya başlık nasıl eklenir

etiketini kullanarak bir tabloya başlık ekleyebilirsiniz. ve caption-side özelliği kullanılarak tablonun önüne veya altına yerleştirilebilir. Metin hizalama özelliği, başlık metnini yatay olarak hizalamak için kullanılır. Miras.

...

Tablo No. 1

şirket	Q1	Q2	Q3	Q4

resim yazısı ( başlık tarafı: alt; metin hizalama: sağa; dolgu: 10 piksel 0; yazı tipi boyutu: 14 piksel; ) Pirinç. 2. Tablonun altında başlığın görüntülenmesine bir örnek

6. Hücre çerçeveleri arasındaki boşluk nasıl kaldırılır

Tablo hücre sınırları, varsayılan olarak küçük bir boşlukla ayrılır. Tablo için border-collapse: daraltmayı ayarlarsanız, boşluk kaldırılacaktır. Mülkiyet miras alınır.

Sözdizimi

Tablo (kenarlık-daralt: daralt;)
Pirinç. 3. Birleştirme ve bölme hücre kenarlıklarına sahip bir tablo örneği

7. Hücre sınırları arasındaki boşluk nasıl artırılır

border-spacing özelliğini kullanarak hücre sınırları arasındaki boşluğu değiştirebilirsiniz. Bu özellik bir bütün olarak tablo için geçerlidir. Miras.

Sözdizimi

Tablo (border-collapse: ayrı; border-spacing: 10px 20px;) tablo (border-collapse: ayrı; border-spacing: 10px;)
Pirinç. 4. Hücre çerçeveleri arasında artan boşluklara sahip bir tablo örneği

8. Boş tablo hücreleri nasıl gizlenir

Boş hücreler özelliği, boş hücreleri gizler veya gösterir. Yalnızca herhangi bir içerik içermeyen hücreleri etkiler. Hücre bir arka plana ayarlanmışsa ve tablo tabloya ayarlanmışsa (border-collapse: Daralt;), o zaman hücre gizlenmeyecektir. Miras.

şirket	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tablo ( border: 1px solid #69c; border-collapse: ayrı; boş hücreler: hide; ) th, td (border: 2px solid #69c;) Pirinç. 5. Boş bir tablo hücresini gizleme örneği

9. Tablo düzeni özelliği ile tablo düzeni düzeni

Bir tablo düzeninin düzeni, iki yaklaşımdan biriyle belirlenir: sabit düzen veya otomatik düzen. Bu durumda düzen, tablonun genişliğinin hücrelerin genişliği arasında nasıl dağıtıldığını ifade eder. Mülkiyet miras alınmaz.

Sözdizimi

Tablo (tablo düzeni: sabit;)

10. En İyi Masa Düzenleri

1. Yatay minimalizm

Yatay tablolar, metni yatay olarak okunan tablolardır. Her varlık ayrı bir satırdır. Bu tabloları, inci başlığın altına iki piksel kenarlık yerleştirerek minimalist tarzda şekillendirebilirsiniz.

çalışan	Aylık maaş	Bonus	süpervizör
Stephen C. Cox	$300	$50	Bob
Josephine Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A.Pentel	$175	$25	Annie

tablo ( yazı tipi ailesi: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; yazı tipi boyutu: 14 piksel; arka plan: beyaz; maksimum genişlik: %70; genişlik: %70; kenarlık daraltma: daralt; metin -align: sol; ) th ( yazı tipi ağırlığı: normal; renk: #039; kenarlık-alt: 2 piksel düz #6678b1; dolgu: 10 piksel 8 piksel; ) td ( renk: #669; dolgu: 9 piksel 8 piksel; geçiş: .3s doğrusal; ) tr:hover td (renk: #6699ff;)

Çok sayıda satır içeren bu tablo tasarımı, bunların okunmasını zorlaştırır. Bu sorunu çözmek için tüm td öğelerinin altına bir piksel kenarlık ekleyebilirsiniz.

Td ( kenarlık-alt: 1 piksel katı #ccc; renk: #669; dolgu: 9 piksel 8 piksel; geçiş: .3s doğrusal; )/*yukarıdaki gibi diğer kod*/

tr öğesine bir :hover efekti eklemek, minimalist tabloların okunmasını kolaylaştıracaktır. Fareyle bir hücrenin üzerine geldiğinizde, aynı satırdaki diğer hücreler aynı anda seçilir, bu da tablolarda birden fazla sütun varsa bilgileri takip etmeyi kolaylaştırır.

Th ( yazı tipi ağırlığı: normal; renk: #039; dolgu: 10 piksel 15 piksel; ) td ( renk: #669; kenarlık üst: 1 piksel katı #e8edff; dolgu: 10 piksel 15 piksel; ) tr:hover td (arka plan: #e8edff ;)

2. Dikey minimalizm

Bu tür tablolar nadiren kullanılsa da, dikey olarak yönlendirilmiş tablolar yine de bir sütun tarafından temsil edilen nesnelerin açıklamalarını sınıflandırmak veya karşılaştırmak için kullanışlıdır. Sütunları ayırmak için bir boşluk ekleyerek bunları minimalist bir tarzda şekillendirebilirsiniz.

Th ( yazı tipi ağırlığı: normal; kenarlık-alt: 2 piksel düz #6678b1; sağ kenar: 30 piksel düz #fff; sol kenar: 30 piksel düz #fff; renk: #039; dolgu: 8 piksel 2 piksel; ) td ( kenarlık- sağ: 30 piksel düz #fff; kenar-sol: 30 piksel düz #fff; renk: #669; dolgu: 12 piksel 2 piksel; )

3. "Kutulu" stil

Her türden tablo tasarlamak için en güvenilir stil, "kutulu" stildir. İyi bir renk şeması seçmek ve ardından tüm hücreler için arka plan rengini ayarlamak yeterlidir. Sınırlayıcı olarak sınırları belirleyerek çizgiler arasındaki farkı vurgulamayı unutmayın.

Th ( yazı tipi boyutu: 13 piksel; yazı tipi ağırlığı: normal; arka plan: #b9c9fe; kenarlık üst: 4 piksel düz #aabcfe; kenarlık alt: 1 piksel düz #fff; renk: #039; dolgu: 8 piksel; ) td ( arka plan : #e8edff; border-alt: 1px düz #fff; color: #669; border-top: 1px düz şeffaf; padding: 8px; ) tr:hover td (arka plan: #ccddff;)

En zor şey, sitenizle uyumlu bir şekilde uyum sağlayacak doğru renk şemasını bulmaktır. Site grafik ve tasarım yüklüyse, bu stili kullanmanız oldukça zor olacaktır.

Tablo ( yazı tipi ailesi: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; yazı tipi boyutu: 14 piksel; maksimum genişlik: %70; genişlik: %70; metin hizalama: merkez; kenarlık daralt: daralt ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th ( font-size: 13px; font-weight: normal; arka plan: #e8edff; border-right: 1px solid #9baff1; border- sol: 1 piksel düz #9baff1; renk: #039; dolgu: 8 piksel; ) td ( arka plan: #e8edff; kenar-sağ: 1 piksel düz #aabcfe; sol kenar: 1 piksel düz #aabcfe; renk: #669; dolgu: 8 piksel ; )

4. Yatay zebra

Zebra masası oldukça çekici ve rahat görünüyor. İsteğe bağlı arka plan rengi, insanların tabloyu okuması için görsel bir ipucu işlevi görebilir.

Th ( yazı tipi ağırlığı: normal; renk: #039; dolgu: 10 piksel 15 piksel; ) td ( renk: #669; kenarlık üstü: 1 piksel katı #e8edff; dolgu: 10 piksel 15 piksel; ) tr:nth-child(2n) ( arka plan: #e8edff;)

5. Gazete stili

Sözde gazete efektini elde etmek için tablo öğelerine kenarlıklar uygulayabilir ve içindeki hücrelerle oynayabilirsiniz. Hafif, minimalist bir gazete stili şöyle görünebilir: renk şemasıyla oynayın, kenarlıklar, dolgular, farklı arka planlar ve çizgi üzerinde fareyle üzerine gelme efekti ekleyin.

Tablo (kenarlık: 1 piksel düz #69c;) th ( yazı tipi ağırlığı: normal; renk: #039; kenarlık-alt: 1 piksel kesikli #69c; dolgu: 12 piksel 17 piksel; ) td ( renk: #669; dolgu: 7 piksel 17 piksel; ) tr:hover td (arka plan: #ccddff;)

Tablo (kenarlık: 1 piksel düz #69c;) th ( yazı tipi ağırlığı: normal; renk: #039; dolgu: 10 piksel; ) td ( renk: #669; kenarlık-üst: 1 piksel kesikli #fff; dolgu: 10 piksel; arka plan: #ccddff; ) tr:hover td (arka plan: #99bcff;)

Tablo (kenarlık: 1px katı #6cf;) th ( yazı tipi ağırlığı: normal; yazı tipi boyutu: 13px; renk: #039; metin dönüşümü: büyük harf; kenar-sağ: 1px katı #0865c2; kenarlık-üst: 1px katı #0865c2; kenar-sol: 1px düz #0865c2; kenar-alt: 1px katı #fff; dolgu: 20px; ) td (renk: #669; kenar-sağ: 1px kesikli #6cf; dolgu: 10px 20px; )

6. Tablo arka planı

Bir masa tasarlamanın hızlı ve benzersiz bir yolunu arıyorsanız, masanın temasıyla ilgili göz alıcı bir resim veya fotoğraf seçin ve onu masanın arka planı olarak ayarlayın.

Png") %98 %86 tekrarsız; ) th ( yazı tipi ağırlığı: normal; yazı tipi boyutu: 14 piksel; renk: #339; dolgu: 10 piksel 12 piksel; arka plan: beyaz; ) td ( renk: #669; kenarlık- üst: 1 piksel düz beyaz; dolgu: 10 piksel 12 piksel; arka plan: rgba(51, 51, 153, .2); geçiş: .3s; ) tr:hover td ( arka plan: rgba(51, 51, 153, .1); )

Tablonun boyutları, yüksekliği ve genişliği, hücrelerin içindekilere bağlı olarak otomatik olarak belirlenir. Hücreler ne kadar çok doldurulursa, tablonun boyutu o kadar büyük olur ve bunun tersi de geçerlidir.

Bununla birlikte, CSS'nin gücü, tam olarak gereken genişlik ve yüksekliği belirterek tabloyu HTML'de yeniden boyutlandırmanıza olanak tanır. Adil olmak gerekirse, tablo niteliklerinin istenen boyutları ayarlamanıza da izin verdiğine dikkat edilmelidir. Ancak şimdilik sadece CSS hakkında konuşacağız.

Her tablonun içeriğinden etkilenen kendi minimum genişliği ve minimum yüksekliği olduğu vurgulanmalıdır. Ve genişlik ve yükseklik değerlerini daha da küçük ayarlasanız bile hiçbir şey olmayacak. Tablonun kenarları minimumlarını geçmeyecek.

Tablonun genişliğini belirtmek için CSS özelliğini kullanmanız gerekir. Genişlik ve yüksekliği ayarlamak için özelliği kullanmanız gerekir. yükseklik.

Bir örnekte, şuna benziyor.

Tablo ( genişlik: 500 piksel; yükseklik: 100 piksel; )

Tarayıcıda sonuç:

Tam kod:

Boyut tablosu

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Tablo genişlik ve yükseklik değerleri hem mutlak değer (piksel olarak) hem de göreceli - yüzde olarak belirtilebilir. Örneğin, sırasıyla 20px ve %20.

Tablonun boyutlarını ayarlamak için yüzdeleri kullanırsanız, bunlar ana öğenin boyutlarına göre hesaplanacaktır. Örneğimiz hakkında konuşursak, tarayıcı penceresinden bahsediyoruz.

Bir değer daha var - otomatik. Ve özeldir, çünkü yardımı ile tablonun genişlik ve yüksekliğinin hesaplanması varsayılan olarak otomatik olarak gerçekleşir. Pratikte bu değeri belirtmek şöyle görünür.

Genişlik: otomatik;

yükseklik: otomatik;

Bir başka önemli noktaya da dikkatinizi çekmek isteriz. Yüksekliği yüzde olarak belirtmemek daha iyidir, çünkü kural olarak bu durumda çalışmazlar.

Bireysel hücre ve sütun boyutlarını belirtme

Tarayıcının, hücrelerin içeriğine göre sütunların genişliğini doğru bir şekilde ayarlamadığını düşünüyorsanız, hücrelerin ve sütunların boyutlarını kendiniz belirleme hakkınız vardır. Şimdi bir HTML tablosundaki bir hücrenin nasıl yeniden boyutlandırılacağı hakkında konuşacağız.

Hücre yeniden boyutlandırma, tablo boyutlarıyla aynı CSS özellikleri kullanılarak yapılır, yani: Genişlik ve yükseklik.

Hücrelere stil eklemek için iki seçenekten birini kullanabilirsiniz:

1. Hücrelere ayrı sınıf adları verin. Şöyle görünecek: class="cell-50px"

   Ondan sonra da bu sınıflar için stilleri uygulamalısınız.

2. Özelliği Etkinleştir stil, içinde gerekli CSS kodunun kaydedileceği.

Pratikte, ikinci seçenek şöyle görünür:

...

Bununla birlikte, hücrelerin boyutlarını tek tek değiştirmenin çok sık gerekli olmadığını belirtmek isteriz. Kural olarak, bu, bir tablonun sütunları için belirli bir genişlik ayarlamanın gerekli olduğu durumlarda yapılır. Bu durumda, görevin çözülmesi daha kolaydır. İlk satırın hücrelerinin genişliğini belirtmeniz yeterlidir.

Boyut tablosu

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Tarayıcıda sonuç:

Bir tabloda yazı tipi boyutu nasıl değiştirilir

Genellikle tablodaki metnin boyutunu değiştirme ihtiyacı vardır. Örneğin, başlık hücrelerinde. Bu, CSS özelliği ile yapılabilir. yazı Boyutu. Öğeler için yazı tipi boyutunu ayarlayalım :

Th ( yazı tipi boyutu: 30 piksel; )

Bu dersin bittiği yer burasıdır. Ev ödevini dikkatlice düşünmeni öneririm. Sadece dikkatlice inceleyin ve tartışın. Herşey gönlünce olsun!

 

---

Okumak:
Neden kan rüyası: rüya kitaplarından yorum Öfke nasıl yatıştırılır ve bunu yapmak neden önemlidir Bir kişinin öfkeli olması ne anlama gelir? Hangi milliyetin Manana adı Duyguları dizginlemeyi öğrenmek - bir psikologdan tavsiye, pratik öneriler Duygularınızı kontrol etme yeteneği Karşılıksız aşk ile ilgili sözler Bir kız için karşılıksız aşk hakkında mektuplar