Css tablosunda girinti. Hücrelerdeki kenar boşlukları

Merhaba. Bir eleman olarak tablonun, onu birçok bloğa aşina olandan büyük ölçüde ayıran kendine has özellikleri vardır. Bugün tablo hücreleri arasındaki mesafenin css ile nasıl yazıldığından bahsetmek istiyorum.

Blok modeli ile farklılıklar

Bloklar arasındaki mesafeyi ayarlamak için genellikle harici dolgu kullanılır, ancak hücreler söz konusu olduğunda bu işe yaramaz. Hücreler dahili olarak doldurulabilir ancak harici olarak doldurulamaz.

Bu küçük bir felaket gibi görünüyor, ancak varsayılan olarak tablodaki hücreler uçtan uca değil, her zaman ihtiyaç duyulmayan küçük girintilerle yerleştirilmiştir. Onları nasıl kaldırabilirim?

Border-spacing özelliği

Kurtarmaya bir özellik gelir ve css'de özellikle tablo verileri için kullanılır - sınır aralığı. Adından da anlaşılacağı gibi, her hücreden boş alanı (dolguyu) tanımlar.

Önemli bir nokta: tüm tablonun sınır aralığı ayarlaması gerekir. Yani, bunun gibi:

Tablo (
Kenarlık aralığı: 0;
}

Bu kural ile hücreler arasındaki mesafeyi kaldırıyoruz ve şimdi birbirlerine sıkıca bastırılıyorlar. Buna göre, gerekirse bu mesafeyi piksel cinsinden ayarlayabilirsiniz.

Bir özelliğin bir tablo seçicide ayarlanması biraz alışılmadık olabilir, ancak bu tabloya özgü bir özellik, sadece hatırlamanız gerekir. Tablo ayrıca border-collapse: collapse olarak ayarlanmışsa özellik çalışmaz. Bu durumda, hücrelerin dolgusu otomatik olarak kaldırılır ve kenar boşluklarına gerek yoktur.

Hücrelerin dolgusunu ayarlamanın kullanımdan kaldırılmış yolu

Daha önce bunun için etikete

dolguyu tanımlayan hücre aralığı niteliğini ekledi, ancak bugün bu önerilmez. Bu, kodu karmaşık hale getirir ve modern web geliştirme standartlarına uygun değildir.

Buradaki önemli nokta, dolgu malzemesinin bir öğenin görünümünü ifade etmesi ve html'nin bu durum için tamamen uygun olmamasıdır. Bundan css'nin sorumlu olması gerektiği standartlara göre kesindir.

Gördüğünüz gibi css'de tablo hücreleri arasındaki mesafe tamamen kaldırılabilir veya özelliği kullanarak bunu kontrol edebilirsiniz. border-spacing... Hepsi bugün için. Site kurma konusuyla ilgileniyorsanız, sitedeki yeni materyallerden haberdar olmak için abone olun.

Sayfadaki metin bilgileri, bağlantılar, resimler, başlıklar gibi birçok öğe stil oluşturma yöntemini düşündük, ancak bunların hepsi henüz yeterli değil. Makalelerimde genellikle tablolar gibi HTML öğeleri kullanırım çünkü çoğu durumda önemli bilgileri düzenlemeye ve sunmayı kolaylaştırmaya yardımcı olur.

Bu makalede, size HTML tablolarını şekillendirmenin inceliklerini tanıtacağım ve bu hedeflere ulaşmak için tasarlanmış yeni CSS özelliklerini öğreneceksiniz.

Köprü metni biçimlendirme dili HTML, bize CSS stillerini tablolarla çalışmak üzere tasarlanmış on benzersiz etikete bağlamak için çok sayıda fırsat sağladı, daha fazla çalışmadan önce bunları tekrarlamanızı öneririm:

(Tablonun "Altbilgisi") arka plan rengi - mercan, eleman için (Tablo "baş") arka plan rengini ayarlayın gümüş.

Öğeler için

elementin içinde (tablo gövdesi) üzerine gelindiğinde arka plan rengi değişikliğini ayarla (sözde sınıf: vurgulu) c beyaz renk başına haki (tüm satır vurgulanmıştır).

Örneğimizin sonucu:

Şekil: 153 Tablolardaki Satırlara Stil Verme Örneği

Aşağıdaki örnek, tablo hücrelerine (özellik) köşe yuvarlamanın nasıl uygulanacağını gösterir.

) alt dolguyu 19 piksel olarak ayarladık. Umarım düzensiz sayılarla kafanız karışmaz :)

Örneğimizin sonucu:

Hücreler arasındaki boşluk

Yukarıdaki örnekten sonra, tüm tablo hücreleri arasında bir boşluk olduğunu fark etmiş olabilirsiniz. Tablo hücreleri arasındaki boşluğun nasıl kaldırılacağına veya artırılacağına bakalım.

Komşu hücrelerin sınırları arasındaki mesafeyi ayarlamak için, CSS özelliğini (sınır aralığı) kullanmanız gerekir.

sınır aralığı: 30px 10px;

1	2	3
2
3

sınır aralığı: 0;

1	2	3
2
3

sınır aralığı: 0.2em;

1	2	3
2
3

Bu örnekte biz:

• float: sol). Kayan elemanlar konusunu kaçırdıysanız, bu eğitimde her zaman konuya geri dönebilirsiniz - "".
• Ek olarak, tablolar için 30px'lik bir sağ kenar boşluğu belirledik ve tabloların dikey hizalamasını belirledik (elemanın üstü, en uzun elemanın üstü ile hizalı). Bu yazıda bu mülke ayrıntılı olarak geri döneceğiz.

) - kalın.

Tablo hücreleri için (başlık ve veri hücreleri), # F50 onaltılık renkli 1 piksellik bir düz kenarlık belirledik ve tüm kenarlar için dolguyu 19 piksele ayarladık.

Sınıflı ilk tablo için .ilk sınıflı ikinci tablo için tablo hücreleri (border-spacing özelliği) arasındaki aralığı 30px 10px olarak ayarladık .ikinci sıfıra eşit, sınıflı üçüncü tablo için .üçüncü 0.2em'e eşit.

Dikkatinizi, border-spacing özelliğinde yalnızca bir uzunluk değeri belirtilmişse, aralığı hem yatay hem de dikey olarak gösterdiği ve iki uzunluk değeri belirtilmişse, ilkinin yatay mesafeyi ve ikinci düşeyinin belirlediğine dikkatinizi çekerim. Bitişik hücrelerin sınırları arasındaki mesafe CSS birimlerinde (px, cm, em, vb.) Belirtilebilir. Negatif değerlere izin verilmez.

Örneğimizin sonucu:

Tablo hücrelerinin etrafındaki kenarlıkları görüntüleme

Söyleyebilirsin: - bu nedenle, 0 değerine sahip border-spacing özelliğini kullanarak hücreler arasındaki boşluğu kaldırdık, ancak şimdi neden kesişen hücrelerin sınırlarına sahibiz?

Bir hücrenin alt sınırının, altındaki hücrenin üst sınırına eklenmesi, hücrelerin yanlarında da benzer bir durum oluşması nedeniyle çift bordür oluşur ve bu tablonun gösterilmesi açısından mantıklıdır, ancak neyse ki tarayıcıya şunu söylemenin bir yolu vardır. hücre sınırlarının böylesine arsız davranışını görmek istemiyoruz.

Bunu yapmak için, border-collapse CSS özelliğini kullanmanız gerekir. İşin garibi, daraltma değeriyle border-collapse özelliğini kullanmak, hücreler arasındaki boşluğu kaldırmanın ve aralarında çift kenarlık kalmamasının en iyi yoludur.

0 olarak ayarlanan border-spacing özelliğini ve daraltılacak şekilde ayarlanan border-collapse özelliğini kullanırken sınır davranışının bir karşılaştırmasını düşünün:

sınır aralığı: 0;

1	2	3
2
3

border-collapse: collapse;

1	2	3
2
3

Bu örnekte biz:

• Tablolarımızı float ve sola hizalı (float: left) yaptık, sağ dolgusunu 30px olarak ayarladık.
• Tablo adı için ayarlayın (etiket

) - kalın.

Tablo hücreleri (başlık ve veri hücreleri) için, # F50 hex ile 5px katı bir kenarlık belirledik ve 50px sabit genişlik ve 75px yükseklik ayarladık.

Sınıflı ilk tablo için .ilk tablo hücreleri arasındaki aralığı sıfıra (border-spacing: 0;) ve sınıfın bulunduğu ikinci tablo için .ikinci border-collapse özelliğini, mümkün olduğunda hücre kenarlıklarını bir araya getiren daraltılacak şekilde ayarlayın.

Örneğimizin sonucu:

Boş hücrelerin davranışı

CSS kullanarak, bir tablodaki boş hücreler için kenarlıkların ve arka planların görüntülenip görüntülenmeyeceğini ayarlayabilirsiniz. Bu davranıştan boş hücreler özelliği sorumludur ve önceki örneklerden fark etmiş olabileceğiniz gibi, varsayılan olarak boş hücreleri görüntüler.

Bir örneğe geçelim:

boş hücreler: göster;

1	2	3
2		☺
3	☺

boş hücreler: gizle;

1	2	3
2		☺
3	☺

Bu örnekteki boş hücreler özelliğinin nasıl çalıştığını anlamak çok basittir, eğer gizlenecek şekilde ayarlanmışsa, boş hücreler ve içlerindeki arka plan, gösterilecek şekilde ayarlanmışsa (varsayılan olarak), o zaman görüntüleneceklerdir.

Tablo başlığı konumu

Tabloları şekillendirmek için başka bir basit özelliğe bir göz atalım - tablo başlığının konumunu (tablonun üstünde veya altında) ayarlayan başlık tarafı. Varsayılan olarak, resim yazısı tarafı özelliği, resim yazısını tablonun üstüne yerleştiren üste ayarlanmıştır. Başlığı tablonun altına yerleştirmek için alt değeri olan özelliği kullanmanız gerekir.

Bu özelliği kullanmanın bir örneğini görelim:

Tablonun yukarısına doğru

İsim	Fiyat
Bir balık	350 ruble
Et	250 ruble

Tablonun altındaki başlık

İsim	Fiyat
Bir balık	350 ruble
Et	250 ruble

Bu örnekte, oluşturduk iki sınıftablo başlığının konumunu kontrol eden. Birinci sınıf ( .topCaption) tablo başlığını üstüne koyar, onu ilk tabloya ve ikinci sınıfa uyguladık ( .bottomCaption) tablo başlığını altına yerleştirir, ikinci tabloya uyguladık. Sınıf .topCaption varsayılan bir resim yazısı tarafı özelliğine sahiptir ve gösteri amacıyla oluşturulmuştur.

Örneğimizin sonucu:

Yatay ve dikey hizalama

Çoğu durumda, tablolarla çalışırken, başlık ve veri hücreleri içindeki içeriğin hizalamasını ayarlamanız gerekecektir. Metin hizalama özelliği, herhangi bir metin bilgisine benzer şekilde yatay hizalama için kullanılır. Bu özelliğin metin için kullanımını "" makalesinin başlarında tartışmıştık.

Hücrelerdeki içeriğin hizalamasını ayarlamak için, metin hizalama özelliğine sahip özel anahtar sözcükler kullanmanız gerekir. Aşağıdaki örnekte bu mülkün anahtar kelimelerinin uygulamasını ele alalım.

Değer	Açıklama
ayrıldı	Hücre metnini sola hizalar. Bu varsayılandır (metin yönü soldan sağa ise).
sağ	Hücre metnini sağa hizalar. Bu varsayılandır (metnin yönü sağdan sola ise).
merkez	Hücre metnini ortaya hizalar.
haklı çıkarmak	Her satırın aynı genişliğe sahip olması için satırları uzatır (hücre metnini genişliğe sığacak şekilde uzatır).

Bu örnekte, oluşturduk dört sınıfhücrelerde farklı yatay hizalamalar ayarlayan ve bunları tablo satırlarına uygulayan. Hücredeki değer, metin hizalama özelliğinin değeriyle eşleşir

Örneğimizin sonucu:

Yatay hizalamaya ek olarak, dikey hizalama özelliğini kullanarak tablo hücrelerinde dikey hizalama da tanımlayabilirsiniz.

Tablo hücreleriyle çalışırken, bu özelliğin yalnızca aşağıdaki değerlerinin * kullanıldığını lütfen unutmayın:

* - Bir tablo hücresine uygulanan sub, super, text-top, text-bottom, length ve% değerleri, bir temel değer kullanıyormuş gibi davranacaktır.

Bir kullanım örneğini ele alalım:

Değer	Açıklama
temel	Hücrenin taban çizgisini ebeveynin taban çizgisine hizalar. Bu varsayılandır.
üst	Hücrenin içeriğini dikey olarak üste hizalar.
orta	Hücrenin içeriğini ortada dikey olarak hizalar.
alt	Hücrenin içeriğini dikey olarak alta hizalar.

Bu örnekte, oluşturduk dört sınıf, hücrelerde farklı dikey hizalamalar ayarlayan ve bunları tablo satırlarına uygulayan. Hücredeki değer, o satıra uygulanan dikey hizalama özelliğinin değeriyle eşleşir.

Tarayıcıya göre tablo düzeni yerleştirme algoritması

CSS, varsayılan olarak tarayıcının otomatik tablo düzeni algoritmasını kullanır. Bu durumda sütun genişliği, bölünmeyen en geniş hücre içeriği tarafından belirlenir... Tarayıcının son düzenini belirlemeden önce tablodaki tüm içeriği okuması gerektiğinden, bu algoritma bazı durumlarda yavaş olabilir.

Tablo düzeninin yerleşim türünü tarayıcı ile değiştirmek için otomatik üzerinde sabitsabit değerle tablo düzeni CSS özelliğini kullanmanız gerekir.

Bu durumda, yatay yerleşim yalnızca şunlara bağlıdır: hücrelerin içeriğinden değil, tablonun genişliğinden ve sütunların genişliğinden. Tarayıcı, ilk satır alındıktan hemen sonra tabloyu görüntülemeye başlar. Sonuç olarak, sabit algoritma, bu tür bir tablonun düzenini otomatik sürümü kullanmaktan daha hızlı oluşturmanıza olanak tanır. Büyük tablolarla çalışırken, performansı artırmak için sabit bir algoritma kullanabilirsiniz.

Bu özelliğin uygulamasına aşağıdaki örnekle bakalım:

tablo düzeni: otomatik;

İsim	2009	2010	2011	2012	2013	2014	2015	2016
Buğday	125	215	2540	33287	695878	1222222	125840000	125

masa düzeni: sabit;

İsim	2009	2010	2011	2012	2013	2014	2015	2016
Buğday	125	215	2540	33287	695878	1222222	125840000	125

Bu örnekte biz:

Tablo satırlarını ve sütunlarını şekillendirme

"" Makalesinde tablonun satırlarını ve sütunlarını şekillendirme yöntemlerine zaten kısmen değindik. Bu makalede, değerleri kullanarak tablolardaki satır stillerini değiştirmenize olanak tanıyan bir grup sözde sınıfı kullanmaya baktık. hatta (hatta) ve garip (garip) veya temel matematik formülü.

Önceki teknikleri tekrar gözden geçirelim ve tablolardaki satırlara ve sütunlara stil vermenin yeni yollarını keşfedelim. Örneklere geçelim.

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

Bu örnekte biz:

Örneğimizin sonucu:

Tablo satırlarını şekillendirme seçeneklerine bakacağımız bir sonraki örneğe geçelim.

Hizmet	Ücret
Miktar	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

Bu örnekte biz:

• Tablonun genişliğini ana elemanın genişliğinin% 100'ü olarak ayarladık ve başlık ve veri hücreleri için 1 piksellik bir katı sınır belirledik.
• Öğe için yüklendi

Etiket	Açıklama
. Tablonun içeriğini tanımlar. Tablonun adını belirtir. Tablonun başlık hücresini tanımlar. Bir tablodaki bir satırı tanımlar. Tablonun veri hücresini tanımlar. Grup başlığını tablodaki (tablo başlığı) içermek için kullanılır. Tablonun "gövdesini" içermekteydi. Tablonun "altbilgisini" (altbilgi) içermek için kullanılır. Bir etiket içindeki her sütun için belirtilen sütun özelliklerini tanımlar Bir tablodaki bir grup sütun tanımlar. Tablo girintileriyle çalışma Tablo girintileri 1 2 3 4 2 3 4 Bu örnekte biz: Dış dolgu ile yatay merkezleme tekniğini kullanarak masayı merkeze yerleştirin (kenar boşluğu: 0 otomatik). Tablo adı için (etiket

1	2	3	4	5

Bu örnekte biz:

• Tabloyu doldurma ile ortaladı, başlık hücrelerinin genişliğini ve yüksekliğini 50px olarak belirledi ve belirlendi şeffaf kenarlık 5 piksel.
• Başlık hücresinin üzerine gelindiğinde (sözde sınıf: hover) arka planı aldığını buldum mavi renkler, portakal metin rengi, kenarlık portakal renkler 5 piksel ve% 100 yarıçap.
• Şeffaf kenarlık üzerine gelindiğinde görüntülenecek olan sınır için yer ayırmak için gereklidir, bu yapılmazsa masa "zıplar".

Örneğimizin sonucu:

Aşağıdaki örnek, HTML öğelerinin kullanımına değinmektedir ve ve onların stilleri.

Başvuru numarası	Hizmet	fiyat, ovmak.	Toplam
1	Şarkı söyleme	6 000	6 000
2	bulaşık yıkama	2 000	2 000
3	Temizlik	1 000	1 000
4	Dırdır	1 500	1 500
5	Okuma	3 000	3 000

Bu örnekte biz:

Örneğimizin sonucu:

Evet, anlaşılması oldukça zor olan ve CSS'de ileri düzeyde bilgi gerektiren son örnek, bu ders çerçevesinde detaylı çalışma için planlanan ilerideki konulara değinirken.

Önceki örnekte, HTML öğesinin Yalnızca bir CSS özelliği, arka plan rengi uygulayabilirsiniz, ancak bu öğenin üzerine gelindiğinde arka plan rengini (: hover sözde sınıfı) doğrudan ayarlayamazsınız. Bu örnekte, sadece CSS kullanarak bir tablo sütununun nasıl vurgulanacağına bakacağız.

Başvuru numarası	Hizmet	fiyat, ovmak.	Toplam
1	Şarkı söyleme	6 000	6 000
2	bulaşık yıkama	2 000	2 000
3	Temizlik	1 000	1 000
4	Dırdır	1 500	1 500
5	Okuma	3 000	3 000

Bu örnekte biz:

• Tablomuzu ana öğenin% 100'ünü kaplayacak şekilde ayarladık, tablo hücreleri ana öğenin% 25'ini kaplar ve düz 1 piksellik yeşil kenarlığa sahiptir, başlıklar ve veri hücreleri 45 piksel yüksekliğindedir. Değeriyle border-collapse özelliğini kullanarak hücreler arasındaki boşluğu kaldırdık .
• Ve böylece, sözde öğeden sonra :: kullanarak, her öğeden sonra içerik ekleyin Üzerinde gezinme. :: after sözde elemanı zorunlu olarak content özelliği ile birlikte kullanılır, bu sayede arka plan rengine sahip bir blok eleman eklediğimiz için orman yeşili ve sahip mutlak konumlandırma.
• Buradaki mutlak konumlandırma, öğeyi atasının belirtilen kenarına göre kaydırmak için gerekliyken, atanın varsayılan statik dışında bir konum değerine sahip olması gerekir, aksi takdirde sayı tarayıcı penceresinin belirtilen kenarına göreceli olacaktır, bu nedenle ayarladık göreceli konumlandırma (göreceli).
• Oluşturduğumuz bloğumuz için konumlandırılan elemanın üst kenardan ofset yönünü gösteren top özelliğini ve konumlandırılan elemanın alt kenardan ofset yönünü gösteren bottom özelliğini belirledik. Her iki özellik için de 0 değeri belirtildi, bu nedenle blok tablonun altından ve üstünden öğeyi tamamen işgal edecek, bu bloğun genişliği% 25 olarak ayarlandı, bu değer hücrenin kendi genişliğine karşılık gelir.
• Ve bu blok için belirlediğimiz son özellik: "-1" değerine sahip z-endeksi, konumlandırılan elemanların sırasını şu şekilde belirler: z ekseni... Bu özellik, metnin bu bloğun önünde olması ve arkasında olmaması için gereklidir, sıfırdan daha küçük bir değer ayarlamazsanız, blok metni kapatacaktır.

Örneğimizin sonucu:

Çalışmanın bu aşamasında öğeleri konumlandırma sürecini anlamazsanız, cesaretiniz kırılmasın, bu anlaşılması zor bir konudur, biz de dikkate almadık, ancak bunu "CSS'de konumlandırma öğeleri" eğitiminin bir sonraki makalesinde kesinlikle ele alacağız.

Konuyla ilgili sorular ve görevler

Bir sonraki konuya geçmeden önce Alıştırma Aktivitesini tamamlayın:

Uygulamayı tamamlamakta herhangi bir zorluk yaşarsanız, örneği her zaman ayrı bir pencerede açabilir ve hangi CSS'nin kullanıldığını görmek için sayfayı inceleyebilirsiniz.

2016-2020 Denis Bolshakov, site çalışmaları ile ilgili görüş ve önerilerinizi [email protected] adresine gönderebilirsiniz.

Sizinle birlikte HTML tablolarının çerçevetarayıcılar bunları varsayılan olarak göstermez. Ancak hepsi bu kadar değil, her bir tablo hücresinde ayrıca hücre sınırı... Ancak hepsi bu kadar değil, özel etiket niteliklerini kullanarak

Hücreler arasındaki ve hücrelerden tablo kenarlığına kadar olan aralığı değiştirebilir, ayrıca hücrelerin kenarlıklarından içeriklerine kadar dolgu yapabilirsiniz.

HTML tablo çerçevesi, hücre kenarlıkları, boşluk ve dolgu.

İçin böylece çerçeve oluşturma HTML tabloları ve hücrelerinin sınırları yalnızca bir etiket özelliği kullanılır

- sınır. Öznitelik değeri, negatif olmayan tam sayılardır (varsayılan olarak sıfır), bu, piksel cinsinden boyut anlamına gelir. Ancak dikkat, boyut sadece tablonun sınırında değişir, hücrelerin sınırlarında her zaman değişmez.

...

Degisim icin hücreler arası mesafe (sınırları) ve hücrelerden çerçeveye etiketteki tablolar

hücre aralığı niteliği uygulanır. Değerleri, yalnızca mesafeleri piksel cinsinden ölçen sayılar olabilir.

...

Dahili ayarlamak için hücre sınırlarından içeriğine dolgu etikette gerekli

hücre dolgusu özelliğini kullanın. Ve değerleri piksel boyutlarını temsil eden sayılardır.

...

Tarayıcıların varsayılan olarak hücre aralığı ve hücre dolgusu için küçük (iki piksel) değerler ayarladığını unutmayın, bu nedenle aralıkları tamamen kaldırmak için nitelikleri sıfıra (0) ayarlayın.

HTML tablolarının kenarlıkları, sınırları ve dolgusu örneği

Hücre 1.1	Hücre 1.2	Hücre 1.3
Hücre 2.1	Hücre 2.2	Hücre 2.3
Hücre 3.1	Hücre 3.2	Hücre 3.3

Yalnızca kenarlık ve hücre kenarlıkları ayarlanmış tablo:

Hücre 1.1	Hücre 1.2	Hücre 1.3
Hücre 2.1	Hücre 2.2	Hücre 2.3
Hücre 3.1	Hücre 3.2	Hücre 3.3

Tarayıcıdaki sonuç

Değişen girinti ve mesafelere sahip tablo:

Doğal olarak, hücreler arası dolguyu ve boşlukları değiştirmek için tablodaki hücrelerin sınırlarını ve kenarlıklarını çizmeye gerek yoktur.

HTML sözdizimine göre, tarayıcılar tablonun ve hücrelerinin boyutlarına hücre aralığı ve hücre dolgusu değerleri ekler. Örneğin, hücre genişliğini 100 piksel olarak ayarlarsanız ve hücre dolgusu \u003d "10" - tarayıcılar genişliğe 20 piksel ekler (solda ve sağda her biri 10) ve bu 120 piksel olur. Genel olarak, yol boyunca anlayacaksınız.

Konudan sapma veya sayfanın kenarlarındaki dolgunun nasıl kaldırılacağı

Başlangıçta, tüm tarayıcılar HTML sayfalarının kenarlarında genellikle gereksiz olan küçük kenar boşlukları ayarlar, bu nedenle şimdi bunları nasıl kaldıracağınızı öğreneceksiniz. Genel olarak, bu bilgi ders kitabının başına yerleştirilmelidir, ancak orada sizin için pek yararlı olmaz.

Bir seferde etiket Sayfanın her bir tarafı için bu kenar boşluklarının boyutunu belirleyen dört özellik vardı: üst kenar boşluğu (üst), sağ kenar boşluğu (sağ), alt kenar boşluğu (alt) ve sol kenar boşluğu (sol). Bu özellikler artık kullanımdan kaldırılmıştır, bu nedenle stilleri (CSS) uygulayacağız. Bu nedenle, sayfanın kenarları boyunca dolgunun aralığını değiştirmenin birkaç yolu vardır, size iki tane göstereceğim ve CSS öğrenmeye karar verirseniz üçüncüsünü öğreneceksiniz.

Birinci yöntem. B etiketi stil niteliğini aşağıdaki değerlerle belirtin:

style \u003d "margin: 0"\u003e ... - HTML sayfasının tüm kenarlarındaki girintileri aynı anda kaldırır.

style \u003d "margin: üst sağ alt sol">... - her iki taraf için saat yönünde girinti miktarını ayarlar. Tipik olarak piksel boyutları kullanılır, örneğin: style \u003d "margin: 5px 3px 4px 5px"\u003e ...

İkinci ve daha uygun yol. Etikette

Ödev.

Bu derste de her şeyi ayrıntılı olarak açıklamayacağım - sadece genel noktaları. Tamlık için örneğin sonucuna bakın.

1. Her biri bir satır ve üç sütun içeren üç tablo oluşturun.
2. İlk tabloda, sayfanın Üstbilgisini veya "üstbilgisini" (HTML belgesinin "üstbilgisiyle" karıştırılmamalıdır), ikinci - sol ve sağ menülerin yanı sıra ana içeriği (içerik) üçüncü - Altbilgi veya sayfanın altbilgisine yerleştirin.
3. Her tablonun ilk ve son sütununun genişliğinin sabitlenmesine izin verin.
4. Önemli. Bir etiket kullanın sadece sayfanın "başlığında" dört yatay menü düğmesi oluşturmak için. Diğer durumlarda, resimler arka planda olsun ve tabloların ikinci hücrelerinde genellikle yalnızca renkler kullanılır ve ilk ve son tabloda # 99FF99 olur.
5. Sayfa içeriği metninin tablo hücresinin her iki yanında hizalanmasına ve başlığın ortalanmasına izin verin.
6. Tablo hücreleri arasındaki boşlukların yanı sıra hücre girintilerine gelince, bunları nerede tamamen kaldırmanız gerektiğini ve nerede artırmanız gerektiğini kendiniz düşünün.

CSS özelliği, masa tasarımı için sınırsız olanaklar sunar. Varsayılan olarak, tablo ve tablo hücrelerinin görünür kenarlıkları ve arka planları yoktur ve tablo içindeki hücreler birbirine bitişik değildir.

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.

Tabloları biçimlendirme

1. Tablo sınırları sınırı

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

Tablo (border-collapse: collapse; / * hücreler arasındaki boş alanları kaldırın * / border: 1px düz gri; / * tablo için 1px'lik bir dış kenarlık ayarlayın * /)

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

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

Hücre kenarlıkları tablo gövdeleri td öğesi için ayarlanmıştır:

Td (sınır: 1px düz gri;)

Bitişik hücrelerin kenarlıklarının genişliği iki katına çıkmaz, böylece tüm tablonun kenarlıklarını aşağıdaki şekilde ayarlayabilirsiniz:

Th, td (sınır: 1px düz gri;)

Tablonun dış kenarlığı, genişliğe artırılarak seçilebilir:

Tablo (sınır: 3px düz gri;)

Sınırlar kısmen ayarlanabilir:

/ * tablo için 3px gri bir dış kenarlık ayarlayın * / table (border-top: 3px solid gray;) / * tablo gövde hücresi için 1px gri bir sınır ayarlayın * / td (border-bottom: 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 belirtilmezse, en geniş satırın (satır) genişliğine eşit olacaktır.

Tablo ve Sütun Genişliği width özelliğini kullanarak ayarlayın. Bir tablo için tablo (genişlik:% 100;) belirtilmişse, bu durumda tablonun genişliği, içinde bulunduğu konteyner bloğunun genişliğine eşit olacaktır.

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

Tablo (genişlik: 600px;) th (genişlik:% 20;) td: birinci-çocuk (genişlik:% 30;)

Masa yüksekliği ayarlanmadı. Satırların yüksekliği tablolar, öğelere üst ve alt dolgu eklenerek değiştirilebilir ve ... Yükseklik özelliğini kullanarak yüksekliğin sabitlenmesi tavsiye edilmez.

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

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

Varsayılan masa arka planı ve hücreler şeffaftır. Tabloyu içeren sayfa veya bloğun bir arka planı varsa, tablo boyunca parlayacaktır. Arka plan hem tablo hem de hücreler için ayarlanmışsa, tablonun ve hücrelerin arka planının çakıştığı 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ı

CSS tablo modeli, esas olarak etiket kullanılarak oluşturulan dizelere (satırlara) odaklanır.

... Pratikte, aşağıdaki şekillerde mümkün olan özel sütun biçimlendirmesine ihtiyaç duyduğunuz zamanlar vardır:

etiketi kullanarak

İstediğiniz sayıda sütun için arka planı ayarlayabilirsiniz;

td: birinci-alt, tablo td: son-alt seçici tablosunu kullanarak, tablonun ilk veya son sütununa stil verebilirsiniz (tablo başlığının ilk hücresi hariç);

tablo seçiciyi kullanarak td: nth-child (sütun seçim kuralı), tablodaki herhangi bir sütunun stilini belirleyebilirsiniz.

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

5. Tablo başlığı nasıl eklenir?

Etiketini kullanarak tabloya bir başlık ekleyebilirsiniz. ve caption-side özelliği ile 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 1

şirket	Q1	S2	S3	Q4

başlık (başlık tarafı: alt; metin hizalama: sağ; dolgu: 10px 0; yazı tipi boyutu: 14px;) Şekil: 2. Başlığın tablonun altında görüntülenmesine bir örnek

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

Varsayılan olarak, tablo hücrelerinin sınırları küçük bir boşlukla ayrılır. Tablo için border-collapse: collapse ayarını yaparsak, boşluk kaldırılacaktır. Özellik miras alınır.

Sözdizimi

Tablo (border-collapse: collapse;)
Şekil: 3. Birleştirme ve bölünmüş hücre kenarlıkları içeren bir tablo örneği

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

Kenarlık aralığı özelliğini kullanarak hücre kenarlıkları arasındaki mesafeyi 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;)
Şekil: 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 içerik içermeyen hücreleri etkiler. Bir hücre için bir arka plan belirtilirse ve bir tablo için tablo (border-collapse: collapse;) belirtilirse, hücre gizlenmez. Miras.

şirket	Q1	S2	S3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tablo (sınır: 1px katı # 69c; sınır-daraltma: ayrı; boş hücreler: gizle;) th, td (sınır: 2px katı # 69c;) Şekil: 5. Boş bir tablo hücresini gizlemeye bir örnek

9. table-layout özelliğini kullanarak düzen tablosu 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ığı anlamına gelir. Özellik miras alınmaz.

Sözdizimi

Tablo (tablo düzeni: sabit;)

10. En İyi Masa Düzenleri

1. Yatay minimalizm

Yatay tablolar, metnin yatay olarak okunduğu tablolardır. Her varlık ayrı bir çizgidir. Th başlığının altına iki piksellik bir kenarlık yerleştirerek tabloları minimalist bir tarzda şekillendirebilirsiniz.

Çalışan	Maaş	Bonus	Süpervizör
Stephen C. Cox	$300	$50	Bob
Josephin 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: 14px; arka plan: beyaz; maks. genişlik:% 70; genişlik:% 70; kenarlık daraltma: daraltma; metin -align: left;) th (yazı tipi ağırlığı: normal; renk: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px;) td (renk: # 669; dolgu: 9px 8px; geçiş: .3s doğrusal;) tr: vurgulu td (renk: # 6699ff;)

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

Td (border-bottom: 1px solid #ccc; color: # 669; padding: 9px 8px; geçiş: .3s doğrusal;) / * kodun geri kalanı - yukarıdaki örnekte olduğu gibi * /

Tr öğesine bir: hover efekti eklemek minimalist tarzda tabloların okunmasını kolaylaştırır. Fare imlecini bir hücrenin üzerine getirdiğinizde, aynı satırın geri kalanı aynı anda vurgulanır, bu da tabloların birden çok sütuna sahip olması durumunda bilgilerin kaydını tutmayı kolaylaştırır.

Th (yazı tipi ağırlığı: normal; renk: # 039; dolgu: 10px 15px;) td (renk: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (arka plan: # e8edff ;)

2. Dikey minimalizm

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

Th (yazı tipi ağırlığı: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; renk: # 039; dolgu: 8px 2px;) td (kenarlık- sağ: 30px katı #fff; border-left: 30px katı #fff; renk: # 669; dolgu: 12px 2px;)

3. "Kutu" stili

Her türden masayı dekore etmek için en güvenilir stil, sözde "kutu" stilidir. İyi bir renk düzeni seçmek ve ardından tüm hücreler için arka plan rengini ayarlamak yeterlidir. Kenarlıkları ayırıcı olarak belirleyerek çizgiler arasındaki farkı vurgulamayı unutmayın.

Th (yazı tipi boyutu: 13px; yazı tipi ağırlığı: normal; arka plan: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; renk: # 039; dolgu: 8px;) td (arka plan : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: hover td (arka plan: #ccddff;)

En zor şey, sitenizle uyumlu bir şekilde harmanlanacak renk şemasını bulmaktır. Site grafik ve tasarım yüklü ise bu stili kullanmanız oldukça zor olacaktır.

Tablo (yazı tipi ailesi: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; yazı tipi boyutu: 14px; maks. Genişlik:% 70; genişlik:% 70; metin hizalama: merkez; kenarlık daraltma: daraltma ; 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: 1px katı # 9baff1; renk: # 039; dolgu: 8px;) td (arka plan: # e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; renk: # 669; dolgu: 8px ;)

4. Yatay zebra

Zebra masası oldukça çekici ve kullanışlı görünüyor. Tamamlayıcı arka plan rengi, insanların tabloyu okuması için görsel bir ipucu görevi görebilir.

Th (yazı tipi ağırlığı: normal; renk: # 039; dolgu: 10px 15px;) td (renk: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) 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, minimal bir gazete stili şöyle görünebilir: renk düzeniyle oynayın, kenarlıklar ekleyin, dolgular, farklı arka planlar ve bir çizgi üzerinde gezinirken: fareyle üzerine gelme efekti ekleyin.

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

Tablo (kenarlık: 1px düz # 69c;) th (yazı tipi ağırlığı: normal; renk: # 039; dolgu: 10px;) td (renk: # 669; kenarlık-üst: 1px kesikli #fff; dolgu: 10px; arka plan: #ccddff;) tr: vurgulu 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; kenarlık-sağ: 1px katı # 0865c2; border-top: 1px katı # 0865c2; border-left: 1px solid # 0865c2; border-bottom: 1px solid #fff; padding: 20px;) td (renk: # 669; border-right: 1px dashed # 6cf; padding: 10px 20px;)

6. Tablo arka planı

Masanızı şekillendirmenin hızlı ve benzersiz bir yolunu arıyorsanız, masanın temasıyla ilgili çekici bir resim veya fotoğraf seçin ve masanın arka planı olarak ayarlayın.

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

Tabloların kendisi oldukça "zayıf" görünüyor, ayrıca tarayıcılar tabloların bazı özelliklerini kendi yöntemleriyle, özellikle de çerçeveleriyle gösteriyor. Ancak bu eksiklikler, stillerin gücü kullanılarak kolayca düzeltilebilir. Aynı zamanda, tablo tasarımına yönelik araçlar büyük ölçüde genişletilmiştir, bu da tabloları site tasarımına başarıyla yerleştirmenize ve tablo şeklindeki verileri daha net bir şekilde sunmanıza olanak tanır.

Hücre arka plan rengi

Aynı anda tüm tablo hücrelerinin arka plan rengi, TABLE seçicisine uygulanan arka plan özelliği aracılığıyla ayarlanır. Bunu yaparken, özellikle öğelerin özelliklerinin kalıtımını, stil kullanma kurallarını hatırlamalısınız. Arka plan özelliği miras alınmasa da, hücreler için varsayılan arka plan değeri şeffaftır, yani saydamlık, böylece hücreler için de arka plan dolgu efekti elde edilir. TABLE ile aynı anda TD veya TH seçicisinin rengini ayarlarsanız, bu renk hücrenin arka planı olarak ayarlanacaktır (örnek 2.3).

Örnek 2.3. Arka plan rengi

Başlık 1	Başlık 2
Hücre 3	Hücre 4

Bu örnekte, hücreler için mavi bir arka plan rengi alacağız (etiket ) ve başlıkta kırmızı (etiket ). Bunun nedeni, TH seçici için stilin tanımlanmamış olmasıdır, bu nedenle üst öğenin arka planı, bu durumda TABLO seçicisi "gözden geçirilir". Ve seçicinin TD rengi açıkça belirtilir, böylece hücreler mavi ile "doldurulur".

Bu örneğin sonucu Şekil 1'de gösterilmektedir. 2.4.

Şekil: 2.4. Arka plan rengini değiştir

Hücrelerdeki kenar boşlukları

Kenar boşluğu, hücre içeriğinin kenarı ile sınırı arasındaki mesafedir. Genellikle etiketin hücre dolgusu niteliği bu amaç için kullanılır.

... Kenar boşluğu değerini hücrenin tüm kenarlarında piksel cinsinden tanımlar. Dolgu stili özelliği, Örnek 2.4'te gösterildiği gibi TD seçicisine eklenerek kullanılabilir.

Örnek 2.4. Tablolardaki alanlar

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Başlık 1	Başlık 2
Hücre 3	Hücre 4

Bu örnekte, gruplama seçicileri kullanılarak, alanlar TD ve TH seçici için eşzamanlı olarak ayarlanır. Örnek sonuç Şekil 2'de gösterilmiştir. 2.5.

Şekil: 2.5. Hücrelerdeki alanlar

Doldurma stili özelliği tablo hücrelerine uygulanırsa, etiketin hücre dolgusu niteliğinin eylemi

yok sayıldı.

Hücreler arasındaki mesafe

Hücreler arasındaki aralığı değiştirmek için etiketin hücre aralığı özelliğini uygulayın.

... Bu özelliğin etkisi, hücrelerin etrafındaki kenarlıklar kullanıldığında veya hücreleri sayfanın arka planından farklı bir renkle doldurulduğunda açıkça görülebilir. Kenarlık aralığı stili özelliği, hücre aralığının yerini alır ve hücrelerin sınırları arasındaki mesafeyi ayarlar. Bir değer, hücre kenarlıkları arasındaki hem dikey hem de yatay aralığı ayarlar. Bu özelliğin iki değeri varsa, o zaman ilki yatay mesafeyi (yani hücrenin soluna ve sağına) ve ikincisi dikey mesafeyi (üst ve alt) tanımlar.

Sınır aralığı özelliği, yalnızca daraltma değerine sahip TABLO seçici için sınır daraltma özelliği ayarlanmamışsa etkilidir (örnek 2.5).

Örnek 2.5. Hücre sınırları arasındaki mesafe

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Leonardo	5	8
Raphael	4	11
Michelangelo	24	9
Donatello	2	13

Bu örneğin sonucu Şekil 1'de gösterilmektedir. 2.6.

Şekil: 2.6. Kenar boşluğu kullanırken tablo görünümü

Sürüm 7'ye kadarki ve sürüm 7 dahil olmak üzere Internet Explorer, border-spacing özelliğini desteklemez, bu nedenle tablolar, tablolar için varsayılan hücre aralığını (genellikle 2px) kullanır.

TABLE seçicisine daraltma değerine sahip bir sınır daraltma özelliği eklediğinizde, hücre aralığı özelliği yok sayılır ve kenarlık aralığı değeri temizlenir.

Kenarlıklar ve çerçeveler

Varsayılan olarak, tabloda başlangıçta sınır yoktur ve etiketin border niteliği kullanılarak eklenir.

... Tarayıcılar böyle bir sınırı farklı şekillerde görüntüler, bu nedenle bu özelliği hiç belirtmemek ve sınırların çizimini stillere bırakmak daha iyidir. Stillerle doğrudan ilişkili iki yönteme bakalım.

Cellspacing niteliğini kullanma

Etiketin hücre aralığı özniteliğinin

tablo hücreleri arasındaki mesafeyi ayarlar. Tablonun ve hücrelerin farklı bir arka plan rengi kullanılırsa, hücreler arasında, rengi tablonun rengiyle eşleşen ve kalınlık, piksel cinsinden hücre aralığı özelliğinin değerine eşit olan bir çizgi ızgarası görünecektir. Yukarıdaki Örnek 2.3 bu etkiyi göstermektedir, bu yüzden tekrar etmeyeceğim.

Sınırlı bir kapsamı olduğundan, bunun sınır oluşturmak için pek uygun bir yol olmadığını unutmayın. Bu şekilde, doğru yerlerde dikey veya yatay çizgiler değil, yalnızca tek renkli bir ızgara elde edebilirsiniz.

Border özelliğini uygulama

Kenarlık stili özelliği, öğenin etrafındaki kenarlık rengini, stilini ve kalınlığını aynı anda ayarlar. Farklı kenarlarda ayrı çizgiler oluşturmanız gerektiğinde, türevleri kullanmak daha iyidir - border-left, border-right, border-top ve border-bottom, bu özellikler sırasıyla sol, sağ, üst ve alt kenarlığı tanımlar.

Border özelliğini TABLE seçicisine uygulayarak, tablonun etrafına bir bütün olarak bir sınır ekliyoruz ve TD veya TH seçicisine hücrelerin etrafına bir sınır ekliyoruz (örnek 2.6).

Örnek 2.6. Çift kenarlık eklemek

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Başlık 1	Başlık 2
Hücre 3	Hücre 4

Bu örnek, tablonun etrafında çift siyah bir kenarlık ve her hücre etrafında düz beyaz bir kenarlık kullanır. Örnek sonuç Şekil 2'de gösterilmiştir. 2.7.

Şekil: 2.7. Masa ve hücrelerin etrafındaki sınır

Lütfen hücrelerin birleştiği yerde çift çizgilerin oluştuğunu unutmayın. Etiketin hücre aralığı özelliğinin eylemi nedeniyle tekrar elde edilirler.

... Bu öznitelik örnek kodun hiçbir yerinde görünmese de, tarayıcı bunu varsayılan olarak kullanır. Eğer sorarsan , o zaman çift değil, tek satırlar, ancak iki kat kalınlık elde ederiz. Bu özelliği değiştirmek için, TABLE seçicisine eklenen daraltma değeriyle birlikte border-collapse style özelliğini kullanın (örnek 2.7).

Örnek 2.7. Tek bir çerçeve oluşturmak

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Başlık 1	Başlık 2
Hücre 3	Hücre 4

Bu örnek, hücreler arasında düz yeşil bir çizgi ve masanın etrafında siyah düz bir çizgi oluşturur. Tablodaki tüm kenarlıklar aynı kalınlıktadır. Örnek sonuç Şekil 2'de gösterilmiştir. 2.8.

Şekil: 2.8. Masa etrafında kenarlık

Hücrelerin içeriğini hizalama

Varsayılan olarak, tablo hücresindeki metin sola hizalanır. Bu kuralın bir istisnası etiketidir , hizalamanın ortalandığı bir başlığı tanımlar. Hizalamayı değiştirmek için metin hizalama stili özelliğini kullanın (örnek 2.8).

Örnek 2.8. Hücrelerin içeriğini yatay olarak hizalama

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Başlık 1	Hücre 1	Hücre 2
Başlık 2	Hücre 3	Hücre 4

Bu örnekte, etiketin içeriği sola hizalıdır ve etiketin içeriği - merkezinde. Örneğin sonucu aşağıda gösterilmiştir (Şekil 2.9).

Şekil: 2.9. Hücrelerdeki metni hizalama

Bir hücredeki dikey hizalama, aksi belirtilmedikçe her zaman ortalanır. Bu, özellikle hücrelerin içeriğinin farklı yükseklikteki tablolar için her zaman uygun değildir. Bu durumda, hizalama, Örnek 2.9'da gösterildiği gibi, dikey hizalama özelliği kullanılarak hücrenin üst kenarına ayarlanır.

Örnek 2.9. Hücrelerin içeriğini dikey olarak hizalama

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Başlık 1	Başlık 2
Hücre 1	Hücre 2

Bu örnek başlık yüksekliğini ayarlar 40 piksel olarak ve metin alta hizalanır. Örnek sonuç Şekil 2'de gösterilmiştir. 2.10.

Şekil: 2.10. Hücrelerdeki metni hizalama

Boş hücreler

Tarayıcılar, içinde hiçbir şey olmadan bir hücreyi farklı şekilde görüntüler. Bu durumda "Hiçbir şey", hücreye resim veya metin eklenmediği ve boşluğun hesaba katılmadığı anlamına gelir. Doğal olarak, hücrelerin görünümü ancak etraflarında bir sınır oluşturulduğunda farklılık gösterir. Görünmez bir bordür kullanıldığında, hücrelerin görünümü, içlerinde bir şey olsun veya olmasın aynıdır.

Eski tarayıcılar, boş görünüm hücrelerinin arka plan rengini göstermiyordu bu nedenle, hücrenin içeriksiz bırakılması, ancak arka plan renginin görüntülenmesi gerektiğinde, hücrenin içine ayrılmaz bir boşluk () eklendi. Özellikle hücre yüksekliğini 1-2 piksel olarak ayarlamanız gerektiğinde, boşluk her zaman uygun değildir, bu nedenle tek piksellik saydam görüntüler yaygın olarak kullanılmaktadır. Aslında, böyle bir resim sizin takdirinize bağlı olarak ölçeklenebilir, ancak web sayfasında hiçbir şekilde görüntülenmez.

Neyse ki, tek pikselli çizimler ve bunlara dayalı her türlü ara parça çağı geçti. Tarayıcılar, hücre içeriği olmadan tablolarla yeterince iyi çalışır.

Boş hücreler özelliği, boş hücrelerin görünümünü kontrol etmek için kullanılır; gizlenecek şekilde ayarlandığında, boş hücrelerdeki kenarlık ve arka plan görüntülenmez. Bir satırdaki tüm hücreler boşsa, satırın tamamı gizlidir. Aşağıdaki durumlarda hücre boş kabul edilir:

• hiç sembol yok;
• hücre yalnızca bir satır besleme, sekme karakteri veya boşluk içerir;
• görünürlük gizli olarak ayarlandı.

Bölünemez bir alan eklemek, görünür içerik olarak algılanır, yani hücre artık boş olmayacaktır (örnek 2.10).

Örnek 2.10. Boş hücreler

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Leonardo	5	8
Raphael		11
Michelangelo	24
Donatello		13

Safari tarayıcısındaki tablo görünümü Şekil 2'de gösterilmektedir. 2.11a. IE7 tarayıcısındaki aynı tablo Şekil 2'de gösterilmektedir. 2.11b.

ve. Tarayıcıda Safari, Firefox, Opera, IE8, IE9

b. IE7 tarayıcısında

Şekil: 2.11. Boş hücreli tablo görünümü