Tablolara görüntü arka planı eklemek için CSS arka plan özelliğini kullanın
Tabloları arka planlarından ayırt etmek, web sayfasındaki diğer her şeye göre tablonun içeriğini vurgulamaya yardımcı olur. Tablo arka planı eklemek için web sayfanızı destekleyen basamaklı stil sayfasını (CSS) değiştirmeniz gerekir.
Başlamak
Bir tabloya arka plan resmi eklemenin en iyi yolu, CSS arka plan özelliğini kullanmaktır. Kendinizi CSS'yi etkili bir şekilde yazmaya ve beklenmedik görüntü bozukluklarından kaçınmaya hazırlamak için arka plan resminizi açın ve yükseklik ve genişlik hakkında bir not alın.
Ardından resminizi barındırma sağlayıcınıza yükleyin. Resmin URL'sini test edin; Resimlerin görüntülenmemesinin en yaygın nedenlerinden biri URL’de yazım hatası olmasıdır.
Bu adımı tamamladıktan sonra, belgenizin başına CSS stil bloğu koyun:
- Masanızdaki arka plan için CSS'nizi yazın ve stil bloğunun içine yerleştirin:
tablo {background: url (" image to URL ") tekrarlama; }
- Masanızı HTML’ye yerleştirin:
hücre 1
hücre 2
hücre 1
hücre 2
- Görüntü genişliğini ve yüksekliğini eşleştirmek için tablonun genişliğini ve yüksekliğini ayarlayın.
width: 400px; height: 500px; ">…
Tablo içeriğiniz görüntü yüksekliğinden ve genişliğinden daha büyükse, arka plan resmi yalnızca bir kez görüntülenir.
Sadece bir masaya bir arka plan koy
Yukarıdaki talimatlar, sayfadaki her tabloda aynı arka plan resmini ayarlayacaktır.
Arka planı yalnızca belirli tablolara koymak isterseniz, bir sınıf özelliği kullanmanız gerekir.
- Okumak için CSS'nizi değiştirin:
table.background {background: url (" image to URL ") tekrarlama; }
- Arka plan görüntüsüne sahip olmak istediğiniz herhangi bir tabloya sınıf arka planı ekleyin. Bu tabloların genişliğini ve yüksekliğini ayarlayın.
class = "background" style = "width: 400px; height: 500px;>…
Tablo Arkaplan Resmini Tekrar Edin
Daha fazla tablo veya daha fazla içeriğe sahip tablolar, arka planın tekrarlanmasını gerektirebilir, böylece tüm tablo doldurulur. CSS'nizdeki değeri değiştirin, böylece görüntü y ekseninde, x ekseninde tekrarlanır veya her ikisinde de döşenir.
background: url (" image to URL ") tekrar eder ;
Varsayılan olarak, yineleme değeri döşenecektir, ancak aynı zamanda tekrarlama değerini tekrarlı olarak x'e veya tekrarlı olarak yatay veya dikey olarak döşemek üzere ayarlayabilirsiniz.
Hücre Arka Plan Renkleri Tablo Arka Plan Görüntüsünü Engelle
Tablo hücrelerinde ayarlanan herhangi bir arka plan rengi , tablodaki arka plan resmini geçersiz kılar. Bu nedenle, tablo arka plan görüntüleri ile birlikte hücrelerinizde arka plan renkleri kullanırken dikkatli olun.
hususlar
Tablo arka planları, tablolarınızı alttaki sayfadan ayırır. Ancak, bu tekniği kullanmadan önce iki kez düşünün. Nötr bir görüntü eklemek dikkat dağıtıcı olmayabilir, ancak sevimli olması amaçlanan karmaşık resimler (örneğin, evcil hayvanın benimsemelerini gösteren bir masanın arkasına bir kedinin resmini ekleme) profesyonelce görünmeyebilir ve tablo verilerinin okunabilirliğini etkileyebilir.
Kullandığınız herhangi bir görüntü uygun şekilde lisanslanmış olmalıdır; Web'de bir fotoğraf bulabileceğiniz için kendi kullanımınız için uygun olabileceğiniz anlamına gelmez.
Telif haklarına saygı gösterin!
- Görüntü genişliğini ve yüksekliğini eşleştirmek için tablonun genişliğini ve yüksekliğini ayarlayın.