Gunakan properti latar belakang CSS untuk menambahkan latar belakang gambar ke tabel
Membedakan tabel dari latar belakang mereka membantu untuk menekankan isi tabel relatif terhadap semua yang lain di halaman web. Untuk menambahkan latar belakang tabel, Anda harus men-tweak style sheet cascading (CSS) yang mendukung halaman web Anda.
Mulai
Cara terbaik untuk menambahkan gambar latar belakang ke meja adalah menggunakan properti latar belakang CSS. Untuk mempersiapkan diri Anda untuk menulis CSS secara efektif dan untuk menghindari gangguan tampilan yang tidak terduga, buka gambar latar belakang Anda dan buat catatan tinggi dan lebar.
Lalu 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 di URL.
Setelah Anda menyelesaikan langkah itu, letakkan blok gaya CSS di kepala dokumen Anda:
- Tulis CSS Anda untuk latar belakang di atas meja Anda dan letakkan di dalam blok gaya:
table {background: url (" URL to image ") no-repeat; }
- Tempatkan meja Anda di HTML:
sel 1
sel 2
sel 1
sel 2
- Atur lebar dan tinggi meja agar sesuai dengan lebar dan tinggi gambar.
width: 400px; height: 500px; "> ...
Jika isi tabel Anda lebih besar dari tinggi dan lebar gambar, gambar latar belakang hanya akan ditampilkan sekali.
Letakkan Latar Belakang di Satu Meja
Instruksi di atas akan mengatur gambar latar belakang yang sama pada setiap tabel di halaman.
Jika Anda ingin meletakkan latar belakang hanya pada tabel tertentu, Anda perlu menggunakan atribut kelas.
- Ubah CSS Anda untuk dibaca:
table.background {background: url (" URL to image ") no-repeat; }
- Tambahkan latar belakang kelas ke tabel mana pun Anda ingin memiliki gambar latar belakang itu. Atur lebar dan tinggi untuk tabel-tabel itu.
class = "background" style = "width: 400px; height: 500px;> ...
Biarkan Gambar Latar Belakang Tabel Berulang
Tabel yang lebih besar, atau tabel dengan lebih banyak konten, mungkin harus memiliki pengulangan latar belakang sehingga seluruh tabel terisi. Ubah nilai dalam CSS Anda sehingga gambar diulang pada sumbu y, sumbu x, atau ubin pada keduanya.
background: url (" URL to image ") ulangi ;
Secara default, nilai pengulangan akan digolongkan, tetapi Anda juga dapat mengatur nilai pengulangan untuk mengulang-x atau mengulang-y ke petak secara horizontal atau vertikal.
Warna Latar Belakang Sel Blok Gambar Latar Belakang Meja
Warna latar apa pun yang disetel pada sel tabel akan mengesampingkan 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 meja akan mengatur tabel Anda terpisah dari halaman yang mendasari. Namun, pikirkan dua kali sebelum menggunakan teknik ini. Memasukkan gambar yang netral mungkin tidak mengganggu, tetapi gambar yang rumit dimaksudkan untuk menjadi lucu (misalnya, memasukkan gambar kucing di belakang meja yang menunjukkan adopsi hewan peliharaan) mungkin tampak tidak profesional dan dapat mempengaruhi pembacaan data tabular .
Setiap gambar yang Anda gunakan harus berlisensi dengan benar; hanya karena Anda dapat menemukan foto di Web tidak berarti Anda dapat menggunakannya untuk digunakan sendiri.
Hormati hak cipta!
- Atur lebar dan tinggi meja agar sesuai dengan lebar dan tinggi gambar.