Sposób zmiany kolorów tła części tabeli na stronie internetowej zmieniał się z biegiem lat, staje się łatwiejszy i mniej pracochłonny dzięki wprowadzeniu arkuszy stylów.
Starsza metoda używała atrybutu bgcolor do zmiany koloru tła tabeli. Można go również użyć do zmiany koloru wiersza tabeli lub komórki tabeli. Ale atrybut bgcolor został wycofany na rzecz arkuszy stylów, więc nie jest to optymalny sposób manipulowania kolorem tła tabeli.
Lepszym sposobem zmiany koloru tła jest dodanie właściwości background-color właściwości stylu do tabeli, wiersza lub tagu komórki.
Spowoduje to zmianę koloru tła całej tabeli:
Aby zmienić kolor pojedynczego wiersza, wstaw właściwość koloru tła w
etykietka:
Możesz zmienić kolor pojedynczej komórki, dodając atrybut do
etykietka:
|
Możesz również zastosować kolory tła do nagłówków tabeli lub | tag, w ten sam sposób: | Zmień kolor tła za pomocą arkuszy stylów
Jeśli nie chcesz dodawać do tabeli koloru tła właściwości stylu, istnieją alternatywne sposoby ustawiania koloru tła. Na przykład możesz ustawić style w arkuszu stylów na HEAD dokumentu HTML lub ustawić je w zewnętrznym arkuszu stylów. Zmiany te w HEAD lub w zewnętrznym arkuszu stylów mogą wyglądać jak te dla tabel, wierszy i komórek:
table {background-color: # ff0000; } tr {background-color: yellow; } td {background-color: # 000; } Ustawianie koloru tła kolumny
Najlepszym sposobem ustawienia koloru tła dla kolumny jest utworzenie klasy stylów, a następnie przypisanie tej klasy do komórek w tej kolumnie. Utworzenie klasy pozwala przypisać tę klasę do komórek w określonej kolumnie przy użyciu jednego atrybutu.
CSS:
td.ColColor {background-color: blue; } HTML:
| komórka 1 | komórka 2 | | komórka 1 | komórka 2 |
Jedną z istotnych zalet kontrolowania kolorów tła za pomocą arkusza stylów jest możliwość późniejszej zmiany wyboru koloru. Zamiast przechodzić przez dokument HTML i wprowadzać zmiany do każdej pojedynczej komórki, możesz dokonać pojedynczej zmiany w wyborze koloru w CSS i natychmiast zostanie zastosowany do każdej instancji, w której używana jest klasa = "ColColor". Oszczędza to ogromną ilość czasu i znacznie zmniejsza szanse na błędy, takie jak brak zmiany koloru komórki.
Nawet jeśli nigdy wcześniej nie zmieniłeś kolorów tła tabeli w dokumencie internetowym, możesz skopiować powyższe przykłady i samodzielnie eksperymentować z tą metodą. Szybko odkryjesz, jak łatwo można zmieniać kolory za pomocą tagów stylu, zwłaszcza arkuszy stylów, jeśli pracujesz z dużymi witrynami. Wypróbuj różne przedstawione opcje i wybierz tę, która jest dla ciebie najbardziej wygodna.
|
