Mengatur Gambar sebagai Latar Belakang untuk Tabel di Halaman Web

Membedakan tabel dari latar belakang mereka membantu untuk menekankan isi tabel relatif terhadap segala sesuatu yang lain di halaman web. Untuk menambahkan latar belakang tabel, Anda harus membuat perubahan pada lembar bergaya susun mendukung halaman web Anda.

Mulai

Cara terbaik untuk menambahkan gambar latar belakang ke tabel adalah dengan menggunakan CSS Latar Belakang Properti. Untuk mempersiapkan diri Anda menulis CSS secara efektif dan untuk menghindari gangguan tampilan yang tidak terduga, buka gambar latar belakang Anda dan catat tinggi dan lebarnya. Kemudian unggah gambar Anda ke penyedia hosting Anda. Uji URL untuk gambar; salah satu alasan paling umum mengapa gambar tidak ditampilkan adalah karena ada kesalahan ketik pada URL.

Masukkan blok gaya CSS di kepala dokumen Anda:

Tulis CSS Anda untuk latar belakang di meja Anda dan letakkan di dalam blok gaya:

Tempatkan tabel Anda di HTML:

sel 1 sel 2
sel 1 sel 2
Atur lebar dan tinggi tabel agar sesuai dengan lebar dan tinggi gambar.

Atur lebar dan tinggi tabel agar sesuai dengan lebar dan tinggi gambar.

Jika isi tabel Anda lebih besar dari tinggi dan lebar gambar, gambar latar belakang hanya akan ditampilkan sekali.

Letakkan Latar Belakang di Hanya Satu Meja

Instruksi di atas akan mengatur gambar latar belakang yang sama pada setiap tabel di halaman. Untuk menempatkan latar belakang hanya pada tabel tertentu, gunakan a kelas atribut. Tambahkan kelasLatar Belakang ke tabel mana pun Anda ingin memiliki gambar latar belakang itu. Atur lebar dan tinggi untuk tabel tersebut.

Biarkan Gambar Latar Belakang Tabel Berulang

Tabel yang lebih besar, atau tabel dengan lebih banyak konten, mungkin perlu memiliki latar belakang yang berulang agar seluruh tabel terisi. Ubah nilai di CSS Anda sehingga gambar berulang pada sumbu y, sumbu x, atau ubin pada keduanya.

latar belakang: url("URL ke gambar") ulangi; 

Secara default, nilai pengulangan akan diberi ubin, tetapi Anda juga dapat mengatur nilai pengulangannya.

ulangi-x

atau.

ulangi-y

untuk ubin horizontal atau vertikal, masing-masing.

Warna Latar Belakang Sel Memblokir Gambar Latar Belakang Tabel

Warna latar belakang apa saja diatur pada sel tabel menimpa gambar latar belakang di atas meja. Jadi berhati-hatilah saat menggunakan warna latar belakang pada sel Anda dalam kombinasi dengan gambar latar belakang tabel.

Pertimbangan

Latar belakang tabel membedakan tabel Anda dari halaman yang mendasarinya. Namun, pikirkan dua kali sebelum menggunakan teknik ini. Menyisipkan gambar netral mungkin tidak mengganggu, tetapi gambar rumit dimaksudkan untuk menjadi lucu (misalnya, menyisipkan gambar anak kucing di belakang meja yang menunjukkan adopsi hewan peliharaan) mungkin tampak tidak profesional dan dapat memengaruhi keterbacaan itu data tabel.