Odróżnianie tabel od ich tła pomaga uwydatnić zawartość tabeli w stosunku do wszystkiego innego na stronie internetowej. Aby dodać tło tabeli, musisz wprowadzić zmiany w Arkusz Stylów Kaskadowych wspieranie Twojej strony internetowej.
Pierwsze kroki
Najlepszym sposobem dodania obrazu tła do tabeli jest użycie CSS tło własność. Aby przygotować się do efektywnego pisania CSS i uniknąć nieoczekiwanych błędów wyświetlania, otwórz obraz tła i zanotuj wysokość i szerokość. Następnie prześlij swój obraz do dostawcy usług hostingowych. Przetestuj adres URL obrazu; jednym z najczęstszych powodów, dla których obrazy się nie wyświetlają, jest literówka w adresie URL.
Wstaw blok stylu CSS w nagłówku dokumentu:
Napisz swój CSS jako tło na stole i umieść go w bloku stylu:
Umieść swoją tabelę w kodzie HTML:
komórka 1komórka 2
komórka 1komórka 2
Ustaw szerokość i wysokość tabeli, aby dopasować szerokość i wysokość obrazu.
Ustaw szerokość i wysokość tabeli, 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.
Umieść tło na jednym stole
Powyższe instrukcje ustawią ten sam obraz tła na każdej tabeli na stronie. Aby umieścić tło tylko na określonych stołach, użyj a klasa atrybut. Dodaj klasatło do dowolnej tabeli, na której chcesz mieć ten obraz tła. Ustaw szerokość i wysokość tych tabel.
Niech powtarza się obraz tła stołu
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ł kafelkowy na obu.
background: url("URL do obrazu") powtórz;
Domyślnie wartość powtarzania będzie kafelkowa, ale możesz również ustawić wartość powtarzania na.
powtórz-x
lub.
powtórz-y
do kafelkowania odpowiednio w poziomie lub w pionie.
Kolory tła komórki blokują obraz tła tabeli
Dowolne kolory tła ustawione w komórkach tabeli zastępują obraz tła w tabeli. Zachowaj więc ostrożność, używając kolorów tła w komórkach w połączeniu z obrazami tła tabeli.
Rozważania
Wszelkie obrazy, których używasz, muszą być objęte odpowiednią licencją; tylko dlatego, że możesz znaleźć zdjęcie w sieci, nie oznacza, że możesz je wykorzystać na własny użytek. Szanuj prawa autorskie!
Tła tabel odróżniają Twoje tabele od strony leżącej u ich podstaw. Jednak zastanów się dwa razy przed użyciem tej techniki. Wstawianie neutralnego obrazu może nie rozpraszać, ale skomplikowane obrazy mają być urocze (na przykład wstawianie zdjęcie kociaka za stolikiem wskazujące na adopcję zwierzaka) może wydawać się nieprofesjonalne i może wpływać na czytelność dane tabelaryczne.