Bir Web Sayfasındaki Bir Tablo için Görüntüyü Arka Plan Olarak Ayarlama

click fraud protection

Tabloları arka planlarından ayırmak, web sayfasındaki diğer her şeye göre tablonun içeriğini vurgulamaya yardımcı olur. Bir tablo arka planı eklemek için, üzerinde değişiklik yapmanız gerekir. basamaklı stil sayfası web sayfanızı desteklemek.

Greenwich Yarımadası Rejenerasyonunun bir parçasını oluşturan Modern Ofis binaları, Güney Doğu Londra, İngiltere
İnşaat Fotoğrafçılığı/Avalon / Getty Images

Başlarken

Bir tabloya arka plan resmi eklemenin en iyi yolu CSS kullanmaktır. arka fon Emlak. Kendinizi CSS'yi etkili bir şekilde yazmaya hazırlamak ve beklenmedik görüntü hatalarından kaçınmak için arka plan resminizi açın ve yükseklik ve genişliği not edin. Ardından resminizi barındırma sağlayıcınıza yükleyin. Resmin URL'sini test edin; resimlerin gösterilmemesinin en yaygın nedenlerinden biri, URL'de bir yazım hatası olmasıdır.

Belgenizin başına bir CSS stili bloğu ekleyin:


Masanızın arka planı için CSS'nizi yazın ve stil bloğunun içine koyun:

Tablonuzu HTML'ye yerleştirin:

hücre 1hücre 2
hücre 1hücre 2
Tablonun genişliğini ve yüksekliğini görüntünün genişliğine ve yüksekliğine uyacak şekilde ayarlayın.

instagram viewer

Tablonun genişliğini ve yüksekliğini görüntünün genişliğine ve yüksekliğine uyacak şekilde ayarlayın.

Tablo içeriğiniz görüntünün yüksekliğinden ve genişliğinden daha büyükse, arka plan görüntüsü yalnızca bir kez görüntülenecektir.

Sadece Bir Masaya Arka Plan Koyun

Yukarıdaki talimatlar, sayfadaki her tabloda aynı arka plan resmini ayarlayacaktır. Arka planı yalnızca belirli tablolara yerleştirmek için bir sınıf nitelik. Ekle sınıfarka fon o arka plan görüntüsüne sahip olmak istediğiniz herhangi bir tabloya. Bu tablolar için genişlik ve yüksekliği ayarlayın.

Tablo Arka Plan Resminin Tekrarlanmasına İzin Verin

Daha büyük tablolarda veya daha fazla içeriğe sahip tablolarda, tüm tablonun doldurulması için arka planın tekrarlanması gerekebilir. Görüntü y ekseninde, x ekseninde tekrarlanacak veya her ikisinde de döşenecek şekilde CSS'nizdeki değeri değiştirin.

arkaplan: url("URL'den resme" tekrarla; 

Varsayılan olarak, tekrar değeri döşenecektir, ancak yineleme değerini olarak da ayarlayabilirsiniz.

tekrar-x

veya.

tekrar-y

sırasıyla yatay veya dikey olarak döşemek için.

Hücre Arka Plan Renkleri Tablo Arka Plan Görüntüsünü Engeller

Herhangi bir arka plan rengi Tablo hücrelerinde ayarla, masadaki arka plan görüntüsünü geçersiz kılar. Bu nedenle, hücrelerinizde arka plan renklerini tablo arka plan görüntüleri ile birlikte kullanırken dikkatli olun.

Hususlar

Kullandığınız tüm görseller uygun şekilde lisanslanmış olmalıdır; Web'de bir fotoğraf bulabilmeniz, onu kendi kullanımınız için uygun hale getirebileceğiniz anlamına gelmez. Telif haklarına saygı gösterin!

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 resim eklemek dikkat dağıtıcı olmayabilir, ancak sevimli olması amaçlanan karmaşık resimler (örneğin, bir evcil hayvan sahiplenildiğini gösteren bir tablonun arkasındaki kedi yavrusu resmi) profesyonelce görünmeyebilir ve okunabilirliğini etkileyebilir. tablo verileri.

instagram story viewer