HTML i CSS dla początkujących (część 08): Tabele (02)

Najpierw chciałbym pokazać, jak połączyć komórki wzdłuż rzędu kolumnowo. Dzięki temu uzyskuje się, że jedna kolumna w danym wierszu rozciąga się na wiele kolumn.

Przykład:

<table border="1">
   <tr>
      <th colspan="2">Terminy</th>
   </tr>
   <tr>
      <td>11.4.2014</td>
      <td>12.4.2012</td>
   </tr>
   <tr>
      <td>13.4.2014</td>
      <td>14.4.2014</td>
   </tr>
   <tr>
      <td>15.4.2014</td>
      <td>16.4.2014</td>
   </tr>
</table>

Przed załączeniem th zamieszcza się element. Dzięki temu elementowi oznacza się komórki nagłówka. Przeglądarki zazwyczaj prezentują te komórki pogrubione i wyśrodkowane. A oto rezultat w przeglądarce:

Wewnątrz jednego komórkowego th ustawia się atrybut colspan. Jako wartość oczekiwana jest liczba kolumn, które mają być objęte przez daną komórkę. Koniecznie zwróćcie uwagę, że podana liczba kolumn jest poprawna, w przeciwnym razie rezultat może być nieładny. W przykładzie ta oznaczająca nagłówek przez th ma się rozciągać przez dwie kolumny. W pozostałych dwóch wierszach znowu znajdują się po dwie komórki w każdym.

Uwaga dotycząca łączenia wierszy. Podczas faz rozwoju przydzielcie tabelom ramkę (border). W ten sposób zawsze widzicie od razu, czy łączenie działa tak, jak chcieliście.

Łączenie komórek w kolumnie wierszowo

Przy użyciu atrybutu rowspan, kilka komórek w kolumnie może być połączonych. Dotycząca komórka rozciąga się wówczas wewnątrz kolumny na kilka wierszy. Tutaj również przedstawiamy przykład:

<table border="1">
   <tr>
      <th rowspan="2">Kolor</th>
      <td>Niebieski</td>
   </tr>
   <tr>
      <td>Zielony</td>
   </tr>
   <tr>
      <th rowspan="2">Rozmiar</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

W przeglądarce prezentuje się to następująco:





Atrybutowi rowspan przypisuje się wartość liczbową. Ostatecznie to determinuje liczbę wierszy wewnątrz kolumny, przez które ma się rozciągnąć komórka. Tutaj także oczywiście należy zwrócić uwagę, by liczba podanych wierszy była poprawna.

Łączenie komórek jednocześnie wierszowo i kolumnowo

Oba atrybuty rowspan i colspan można złączyć. Dzięki temu można zdefiniować komórki, które rozciągną się jednocześnie na kilka wierszy i kolumn. Można to również najlepiej pokazać na przykładzie.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Mieszkanie</th>
      <td>5 pokoi</td>
   </tr>
   <tr>
      <td>154 m2</td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Miejsce parkingowe</td>
      <td>Podłogowe ogrzewanie</td>
   </tr>
</table>

Pogląd w przeglądarce przedstawia się następująco:





Podczas łączenia obu atrybutów należy oczywiście również zachować ostrożność, aby ostatecznie liczba komórek była poprawna.

Opisywanie tabel

Bardzo interesującą możliwość nadania zrozumiałości tabelom oferuje element caption. Za jego pośrednictwem można dodać nagłówek lub legendę do tabeli. Zawartość caption jest wyświetlana na zewnątrz tabeli, chociaż definicja znajduje się wewnątrz tabeli.

Tutaj typowe zastosowanie dla caption:





Powyżej tabeli wyświetlany jest nagłówek tabeli. Domyślnie nagłówek jest wyśrodkowany na górze tabeli. Oczywiście można to indywidualnie zmienić za pomocą CSS.

Element caption jest definiowany bezpośrednio za wstępnym <table>.

Oto pełna składnia poprzedniego przykładu:

<table border="1">
   <caption>Dane medialne</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Temat</th>
         <th>Odsłony</th>
         <th>Tendencja</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">Na dzień czerwiec 2014</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12.245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11.546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Tworzenie tabel

W poprzednich wersjach HTML istniało wiele atrybutów do formatowania tabel. Oto kilka przykładów rzeczy, które można regulować za pomocą atrybutów. (Oczywiście przeglądarki nadal obsługują te atrybuty. W HTML5 jednak nie powinny być już one używane).

• Ramki zewnętrzne

• Ramki wewnętrzne

• Szerokość i wysokość

• Linie siatki

• Wyrównanie zawartości komórek

• Kolory

• Obrazy tła

Widzicie, że wszystko można kontrolować za pomocą odpowiednich atrybutów HTML. Poniższy przykład pokazuje tabelę, w której te możliwości zostały w pełni wykorzystane:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Jeden</td>
      <td width="200" bgcolor="#00ffff">Dwa</td>
      <td width="200">Trzy</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Cztery<</td>
      <td bgcolor="#996666">Pięć</td>
      <td bgcolor="#003333">Sześć</td>
   </tr>
 </table>

Spojrzenie na wynik daje pożądany efekt.

Ale nawet jeśli wygląda to tak, jak powinno, to składnia z tym związana jest wszystko inne niż efektywna. Lepiej jest kontrolować właściwości tabel za pomocą CSS. Dzięki nowym właściwościom CSS można nie tylko zastąpić stare atrybuty nową składnią. Możliwe są także dodatkowe funkcjonalności. Na przykład, można teraz łatwo kolorować w zmiennych kolorach wiersze tabeli.

W poprzednich czasach HTML i CSS czasami trzeba było wykonywać potężne acrobacje kodowe dla takiego wyniku. Konsekwentne korzystanie z możliwości, które obecnie oferuje CSS, pozwala na łatwe osiągnięcie takiego efektu.

tr:nth-child(even) {
   background-color: #fd9d5d;
}
 tr:nth-child(odd) {
   background-color: #c0f390;
}
 table {
   border-spacing: 0px;
}

Jak już kilkakrotnie wspominałem, szczegółowo omówię CSS w ramach tej serii.