CSS masa hücrelerinde girintiler. Konudan çekin veya sayfanın kenarlarında girintileri nasıl çıkarılır?
Bir vücut masası var. Vücut satır ve sütunlardan oluşur. Tablo doğrultusunda doldurulur.
Her etiket
Yeni bir dize oluşturur. Sonraki Yuvalanmış
Sütunlar oluşturulur. Çok fazla sütun oluşturabilirsiniz. Bu durumda, her satırdaki sütun sayısını izlemeniz gerekir. Örneğin, ilk satırda 5 sütun varsa, aşağıdaki satırlarda 5 sütun olmalıdır. Aksi takdirde, masa yeller. Hücreleri birleştirmek mümkündür.
HTML'de bir masa nasıl yapılır
Bir örnek verelim, HTML kodu:
Örnek tablo
Sütun 1.
Sütun 2.
Hücreye dikkat etmek
. Yatay hücreleri birleştirmek için COLSPAN özel özniteliğini kullanıyoruz. Sayısal değeri, birleşmiş sütun sayısını gösterir. Ayrıca bu özniteliğin bir analoğu var: Etiket
(Tablo başlığı), Colspan'ı da kaydetmeniz gerekir. Sonuç aynı olacak. Ancak genellikle normal TD'yi kullanır.
Şimdi tüm etiket niteliklerini ayrıntılı olarak düşünün
.
Nitelikler ve Etiket Özellikleri
Açılış etiketine
Çeşitli özellikleri reçete edebilirsiniz.
1. ALIGN \u003d "Parametre" özelliği - Tablo hizalamasını ayarlar. Aşağıdaki değerleri alabilir:
Bu özellik sadece tabloya değil, aynı zamanda masanın bireysel tablolarına da uygulanabilir.
veya dizeleri
. Böylece, farklı hücrelerde, hizalama farklı olacaktır.
Örneğin
...
...
...
2. Mülkiyet arka plan \u003d "URL" - arka plan çizimi ayarlar. URL yerine, arka plan görüntüsünün adresi yazılmalıdır.
Misal
Örnek tablo
Sütun 1.
Sütun 2.
Sonraki sayfaya dönüştürülür:
İncelenen örnekte, arka plan görüntüsü IMG klasöründe (HTML sayfası ile aynı dizinde) bulunur ve görüntünün FON.GIF olarak adlandırılır. Lütfen stil eklediğimiz etikette \u003d "renk: beyaz;" . Arka plan neredeyse siyah olduğundan, metin arka plan ile birleşmiyor, metin beyazı yaptık.
3. özellik bgcolor \u003d "renk" - tablonun renk arka plan ayarlar. Bir renk olarak, tüm paletten herhangi birini seçebilirsiniz (bkz. Kodlara ve Başlıklar HTML Renkleri)
4. Sınır \u003d "Numara" Özelliği - Tablo çerçevesinin kalınlığını ayarlar. Önceki örneklerde, Border \u003d "1" olarak işaret ettik, bu da çerçevenin kalınlığı - 1 piksel anlamına gelir.
5. BorderColor \u003d "Renk" Özelliği - Çerçevenin rengini ayarlar. Sınır \u003d "0" ise, çerçeve olmaz ve çerçevenin rengi anlamlı olmaz.
7. CELLSPACING özelliği \u003d "Numara" - pikseldeki hücreler arasındaki mesafe.
8. Cols \u003d "Number" özelliği sütun sayısıdır. Belirtmezseniz, tarayıcının kendisi sütun sayısını belirler. Tek fark, bu parametrenin özelliklerinin masayı hızlandırması muhtemel olmasıdır.
9. özellik çerçevesi \u003d "parametre" - Tablodaki sınırları nasıl gösterilir. Aşağıdaki değerleri alabilir:
boşluk - sınır çizmeyin
sınır - masa etrafındaki sınır
yukarıda - Masanın üst kenarındaki sınır
aşağıda - masanın altından sınır
hSIDES - Yalnızca yatay sınırlar ekleyin (masanın üstü ve altı)
vsides - Sadece dikey kenarlıklar çizin (tablodan sola ve sağa)
rHS - sadece masanın sağ tarafında kenarlık
lhs - sadece masanın sol tarafında sınır
10. Yükseklik \u003d "Numara" özelliği - Tablonun yüksekliğini ayarlar: piksellerde veya yüzde olarak.
11. Özellik kurallar \u003d "parametre" - hücreler arasındaki sınırları gösterecek. Aşağıdaki değerleri alabilir:
hepsi - Hatta her hücre masasının etrafında çizer
gruplar - çizgi, etiketlerle oluşturulan gruplar arasında görüntülenir. , , ,
veya
cOLS - Sütunlar arasında çizgi sergileniyor
yok - Bütün sınırlar gizlendi
satırlar - Sınır, etiket yoluyla oluşturulan masanın sıraları arasında çizilir.
12. Genişlik \u003d "Numara" Özelliği - Tablonun genişliğini ayarlar: piksel veya yüzde olarak.
13. Sınıf Emlak \u003d "Sınıf Adı" - Tablonun ait olduğu sınıfın adını belirleyebilirsiniz.
14. Stil özelliği \u003d "Stiller" - Stiller her tablo için ayrı ayrı ayarlanabilir.
Şimdi kendinizi masaya bırakmanın ve masa hücrelerinin niteliklerini göz önünde bulundurmanın zamanı geldi. Bu özellikler keşif etiketinde yazmanız gerekir.
.
Nitelikler ve Özellikler
ve
1. Özellik align \u003d "parametre" - ayrı bir tablo hücresinin hizalamasını ayarlar. Aşağıdaki değerleri alabilir:
sol - sol kenara tesviye
merkez - Merkez Hizalaması
sağ kenarda sağ - Hizalama
2. arka plan \u003d "URL" özelliği - hücre arka plan görüntüsünü ayarlar. URL yerine, arka plan görüntüsünün adresi yazılmalıdır.
3. bgcolor \u003d "renk" özelliği - hücre arkaplanının rengini ayarlar.
4. BorderColor \u003d "Renk" Özelliği - Hücre çerçevesinin rengini ayarlar.
5. Char \u003d "Letter" Özelliği - Hizalama yapmanız gereken harfi ayarlar. Hizalama niteliği değeri karakter olarak kurulmalıdır.
6. ColSpan \u003d "Number" özelliği - Kombine yatay hücre sayısını ayarlar.
7. Yükseklik \u003d "Numara" özelliği - Tablonun yüksekliğini ayarlar: piksel veya yüzde%.
8. Genişlik \u003d "Numara" Özelliği - Tablonun genişliğini ayarlar: piksel veya yüzde%.
9. ROWSPAN \u003d "Numara" özelliği - Birleşik dikey hücre sayısını ayarlar.
Üst - Hücrenin içeriğini çizginin üst kenarında hizalayın
orta - ortadaki hizalama
alt kenarda alt-hizalama
temel - Temel Hizalama
Not 1.
Etiket için
Aynı parametreler için mevcuttur
. Bir etiket için parametreler
hiyerarşik olarak herkese uygulanacak
içinde
Tablodaki hücrelerin sınırlarını nasıl yapıştırılmamış
Sınır (hücrelerin kenarlığı) kullanılması durumunda ve hücreler arasında sıfır girintiler, hala yapıştırırlar ve bir çift sınır ortaya çıkar. Kaçınmak için, Stiller tablosuna kayıt yaptırmanız gerekir. Border-çöküş: Daralt:
...
Sevgili Reader, şimdi HTML masa etiketi hakkında daha fazla bilgi edindiniz. Şimdi bir sonraki derse gitmenizi tavsiye ederim.
CSS, yalnızca masanın sınırının stilini değil, aynı zamanda bireysel hücrelerin sınırlarının stilini de yüklemenizi sağlar. Her hücre sınırları olduğu için, daha sonra komşu hücreler arasında sınır, sınır elde edilir. Ancak komşu hücrelerin sınırlarını birinde birleştirmek için bir fırsat var. Bunun için bir sınır çöküşü özelliği var. Değerler alır:
sınır Daralt: Ayrı - Her hücrenin kendi sınırı vardır (varsayılan)
sınır Daralt: Çökme - Toplam sınır
sınır çökmesi: devralma - değer ebeveyn elemanından alınır
Örneğin, bir tablo oluşturun ve sayfada olacak tüm tabloların hücrelerinin çerçevesini ayarlayın. İlk başta, masanın nasıl görüneceğini görmek için hiçbir şey değiştirmeyeceğiz: