Różnicowanie tabel od ich tła pomaga podkreślić zawartość tabeli w stosunku do wszystkich innych elementów na stronie. Aby dodać tło tabeli, dostosuj kaskadowy arkusz stylów (CSS) do swojej strony internetowej.
Pierwsze kroki
Najlepszym sposobem dodania obrazu tła do tabeli jest użycie CSS
tło
własność. Aby przygotować się do napisania arkusza CSS i uniknąć niespodziewanych problemów z wyświetlaniem, otwórz obraz tła i zanotuj wysokość i szerokość. Następnie prześlij swój obraz do swojego dostawcy hostingu. Przetestuj adres URL obrazu; Jednym z najczęstszych powodów, dla których obrazy nie są wyświetlane, jest to, że w adresie URL występuje literówka. Po zakończeniu tego kroku umieść blok stylu CSS w nagłówku dokumentu:
table {background: url (" URL do obrazu ") no-repeat;} Ustaw szerokość i wysokość stołu, aby dopasować szerokość i wysokość obrazu. Jeśli zawartość tabeli jest większa niż wysokość i szerokość obrazu, obraz tła zostanie wyświetlony tylko raz. Powyższe instrukcje ustawią ten sam obraz tła na każdej tabeli na stronie. Jeśli chcesz umieścić tło tylko w określonych tabelach, musisz użyć znaku a klasa
table.background {background: url (" URL do obrazu ") no-repeat;} Większe tabele lub tabele z większą zawartością mogą wymagać powtórzenia tła, aby wypełnić całą tabelę. Zmień wartość w CSS, aby obraz powtarzał się na osi Y, osi X lub był układany na obu. background: repeat ("URL to image") powtórzyć;
Domyślnie wartość powtórzenia będzie wyświetlana w postaci kafelków, ale można również ustawić wartość powtarzania na repeat-x
lub repeat-y Wszelkie kolory tła ustawione w komórkach tabeli będą zastępować obraz tła w tabeli. Należy więc zachować ostrożność podczas używania kolorów tła w komórkach w połączeniu ze zdjęciami tła tabeli. Tła tabel ustawiają tabele na oddzielne strony. Zanim jednak skorzystasz z tej techniki, zastanów się dwa razy. Wstawianie neutralnego obrazu może nie rozpraszać uwagi, ale skomplikowane zdjęcia, które mają być urocze (na przykład wstawienie zdjęcia kotka za stołem wskazującego na adopcje zwierząt domowych) mogą wydawać się nieprofesjonalne i mogą wpływać na czytelność danych tabelarycznych. Każdy używany obraz musi posiadać odpowiednią licencję; tylko dlatego, że możesz znaleźć zdjęcie w sieci, nie oznacza, że możesz je dostosować do własnego użytku. Szanuj prawa autorskie!
komórka 1 komórka 2 komórka 1 komórka 2 …
Umieść tło na jednej tabeli
class = "background" style = "width: 400px; height: 500px;> …
Niech obraz w tle tabeli powtórzy się
ułożyć poziomo lub pionowo.
Kolory tła komórki Zablokuj obraz tła tabeli
Rozważania
