Jak ustawić tło tabeli w HTML?

Jak ustawić tło tabeli w HTML – porady i przykłady

Aby ustawić tło tabeli w HTML, obecnie zaleca się korzystanie ze stylów CSS, ponieważ starsze atrybuty HTML, takie jak bgcolor czy background, zostały uznane za przestarzałe. CSS pozwala na precyzyjne zarządzanie wyglądem tabel, poszczególnych wierszy i komórek oraz umożliwia wykorzystanie zarówno kolorów, jak i grafik jako tła. Poniżej znajdziesz przegląd wszystkich najważniejszych metod, instrukcje krok po kroku oraz rozbudowane przykłady gotowe do wykorzystania.

Ustawianie koloru tła całej tabeli przy użyciu CSS

Najbardziej uniwersalnym i zalecanym rozwiązaniem jest dodanie stylu CSS do znacznika <table>. Można użyć właściwości background-color do ustawienia dowolnego koloru (nazwy, wartości HEX lub RGB):

<table style="background-color: #f0f0f0; width: 400px; border: 1px solid #ccc;">
  <tr>
    <td>Kategoria</td>
    <td>Wartość</td>
  </tr>
  <tr>
    <td>Kawa</td>
    <td>10 PLN</td>
  </tr>
</table>

Możesz także dodać styl w nagłówku strony lub oddzielnym pliku CSS, nadając wybranej tabeli klasę:

<style>
  .moja-tabela {
    background-color: #e0ffe0;
    width: 500px;
    border: 2px solid #080;
  }
</style>
<table class="moja-tabela">
  <tr>
    <td>Imię</td>
    <td>Nazwisko</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Kowalska</td>
  </tr>
</table>

Kolor tła tylko dla wybranego wiersza lub komórki

Dzięki CSS możesz stylować nie tylko całą tabelę, ale także konkretne wiersze (<tr>) lub pojedyncze komórki (<td>, <th>). Przykład:

<table border="1" style="width: 300px;">
  <tr style="background-color: #ffee99;">
    <td>Poniedziałek</td>
    <td>Praca zdalna</td>
  </tr>
  <tr>
    <td>Wtorek</td>
    <td style="background-color: #99ccff;">Spotkanie w biurze</td>
  </tr>
</table>

W powyższym przykładzie pierwszy wiersz ma jasnożółte tło, a jedna komórka w drugim wierszu – jasnoniebieskie.

Ustawienie tła na podstawie obrazka

Możesz ustawić grafikę jako tło tabeli, wiersza lub komórki:

<table style="background-image: url('tlo.png'); width: 400px; height: 150px;" border="1">
  <tr>
    <td>Produkt</td>
    <td>Cena</td>
  </tr>
  <tr>
    <td>Herbata</td>
    <td>8 PLN</td>
  </tr>
</table>

Również do pojedynczego elementu:

<td style="background-image: url('komorka.png');">Opis</td>

Wsparcie dla starszych przeglądarek – atrybuty HTML (niezalecane)

Atrybuty bgcolor i background były powszechnie stosowane w starszych wersjach HTML:

<table bgcolor="#cc3300" border="1">
  <tr>
    <td>Kolumna 1</td>
    <td>Kolumna 2</td>
  </tr>
</table>

lub

<table background="tlo.jpg">
  <tr>
    <td>Test</td>
  </tr>
</table>

Obecnie jednak zaleca się wyłącznie stosowanie CSS do stylowania tła, ponieważ korzystanie z tych atrybutów jest niezgodne z nowoczesnymi standardami i może nie być prawidłowo obsługiwane przez przeglądarki.

Przykład kompleksowy – różne typy tła w jednej tabeli

<table style="background-color: #eef; width: 400px; border: 1px solid #aaa;">
  <tr>
    <th style="background-color: #88f; color: #fff;">Nazwa</th>
    <th style="background-color: #88f; color: #fff;">Miasto</th>
  </tr>
  <tr>
    <td style="background-image: url('city.png');">Warszawa</td>
    <td>Kraków</td>
  </tr>
  <tr style="background-color: #ffc;">
    <td>Gdańsk</td>
    <td>Wrocław</td>
  </tr>
</table>

Podsumowanie – praktyczne wskazówki

najlepiej używaj CSS (background-color, background-image) wewnątrz atrybutów style lub w osobnych klasach,
możesz stylować całą tabelę, wybrany wiersz lub komórkę,
grafikę jako tło ustawiasz przez background-image,
nie używaj atrybutów bgcolor i background – są one przestarzałe.

Przestrzeganie współczesnych standardów zapewni kompatybilność i estetyczny wygląd Twoich tabel we wszystkich nowoczesnych przeglądarkach.

Jak ustawić tło tabeli w HTML?