Nastavitev slike kot ozadja za tabelo na spletni strani

Anonim

Razlikovanje tabel iz njihovega ozadja pomaga poudariti vsebino tabele glede na vse ostalo na spletni strani. Če želite dodati ozadje tabel, boste morali prilagoditi kaskadni slogovni list (CSS), ki podpira vašo spletno stran.

Začetek

Najboljši način dodajanja ozadja v tabelo je uporaba CSS

ozadje

nepremičnine. Če se želite pripraviti, da učinkovito napišete CSS in da se izognete nepričakovanim zaslonom, odprite sliko v ozadju in si zapišite višino in širino. Nato prenesite sliko na svojega ponudnika gostovanja. Preizkusite URL za sliko; eden od najpogostejših razlogov, zaradi katerih se slike ne prikazujejo, je, ker v URL-ju obstaja vtipka. Ko končate ta korak, vstavite slogovni blok CSS v glavo vašega dokumenta:

  1. Napišite svoj CSS za ozadje na svoji mizi in jo vstavite v slogovni blok:

    tabela {ozadje: url (" URL za sliko ") brez ponavljanja;}

    1. Postavite svojo tabelo v HTML:

    2. celica 1

    3. celica 2

    6. celica 1

    7. celica 2

  2. Nastavite širino in višino tabele tako, da ustrezata širini in višini slike.

    … ​​

Če je vsebina vaše mize večja od višine in širine slike, se slika ozadja prikaže samo enkrat.

Postavite ozadje na samo eno tabelo

Zgornja navodila bodo nastavili enako sliko ozadja v vsaki tabeli na strani. Če želite postaviti ozadje le na določene tabele, morate uporabiti

razred

  1. atribut. Spremenite svoj CSS, da se glasi:

    table.background {background: url (" URL za sliko ") brez ponavljanja;}

  2. Dodaj razred ozadje v katero koli tabelo, ki jo želite imeti za ozadje. Nastavite širino in višino za te tabele.

    class = "background" style = "širina: 400px; višina: 500px;> …

Naj ponovi sliko ozadja tabele

Večje mize ali tabel z več vsebinami bodo morda morali ponoviti ozadje, tako da se celotna tabela napolni. Spremenite vrednost v svojem CSS-ju, tako da se slika ponovi na osi y, x-osi ali je označena na obeh.

ozadje: URL ("URL za sliko") ponovi;

Privzeto bo ponovljena vrednost označena, vendar lahko ponastavite vrednost nastavite tudi na

ponovite-x

ali

ponovi-y

na ploščice vodoravno ali navpično.

Barve ozadja celice blokirajo sliko ozadja tabele

Vsaka barva ozadja, ki je nastavljena na celicah tabele, bo prekrivala sliko ozadja na mizi. Bodite previdni pri uporabi barv ozadja v celicah v kombinaciji s slikami ozadja tabele.

Premisleki

Ozadja tabele bodo nastavile vaše tabele poleg osnovne strani. Vendar pa pred uporabo te tehnike dvakrat premislite. Vstavljanje nevtralne slike morda ne bo moteče, vendar zapletene slike, ki naj bi bile luštne (na primer vstavljanje slike mačk za tabelo, ki kaže na posestva za hišne ljubljenčke), se lahko zdijo neprofesionalne in lahko vplivajo na čitljivost tabelarnih podatkov.

Vsaka slika, ki jo uporabljate, mora biti pravilno licencirana; samo zato, ker lahko najdete fotografijo na spletu, to ne pomeni, da ga lahko prilagodite za lastno uporabo. Upoštevajte avtorske pravice!

Izbira Urednika