Tabela HTML

<table>

Kolejnym sposobem prezentowania i grupowania danych w języku Html jest tabela. Sposób prezentowania danych w tabeli html jest taki sam jak w każdej innej tabeli, którą znamy z życia codziennego.Tabele tworzymy przy użyciu elementu <table>.

<table>
 
</table>

Tabela HTML – Wiersz

<tr>

Jednak, żeby tabela powstała, musimy do niej dodać jeszcze wiersze oraz umieścić tam komórki. Wiersze do tabeli dodajemy poprzez element <tr> (ang. table row – wiersz tabeli).

<table>
  <tr></tr>
</table>

Tabela HTML – Komórka

<td>

Żeby nasza tabela była kompletna i poprawnie wyświetlała dane, należy jeszcze dodać do niej komórki. Komórki tabeli dodajemy poprzez element <td> (ang. table data, table cell – dane tabeli, komórka tabeli). Do rozwijania skrótu td powszechnie używa się table cell, jednak nazwa pochodzi od table data.

<table>
  <tr>
    <td>Treść</td>
  </tr>
</table>

Jeszcze jedna uwaga. Na ekranie nie pokaże się wam taka ramka, gdyż wszystkie tabele na tej stronie zostały lekko sformatowane przy użyciu CSS, aby ułatwić wam zrozumienie i poznanie tabeli w html. Formatowania tabel przy użyciu CSS, będziemy się uczyć na kolejnym kursie poświęconym w całości formatowaniu przy użyciu języka CSS.

Treść umieszczamy zawsze w elemencie <td>. Element ten podobny jest trochę do kolumny. Jednak nie zapisujemy jej raz tak jak ma to miejsce w przypadku wiersza, tylko musimy za każdym razem dodać tyle komórek (kolumn) do wiersza ile aktualnie nam potrzeba.

<table>
  <tr>
    <td>1 wiersz 1 kolumna</td>
    <td>1 wiersz 2 kolumna</td>
  </tr>
  <tr>
    <td>2 wiersz 1 kolumna</td>
    <td>2 wiersz 2 kolumna</td>
  </tr>
</table>

Nagłówek Tabeli HTML

<th>

Mamy już treść tabeli. Przydałoby się jeszcze oznaczyć czego dotyczą nasze dane. W tym celu posłużymy się nagłówkiem tabeli. Nagłówek taki uzyskujemy poprzez zastosowanie elementu <th> (ang. table heading). Element ten stosujemy tak jak zwykłą komórkę tabeli, czyli <td>. Nagłówki również umieszczamy w wierszach tabeli, czyli elementach <tr>.

1. Nagłówek Kolumny

<table>
  <tr>
    <th>Nagłówek kolumny</th>
  </tr>
  <tr>
    <td>wiersz</td>
  </tr>
 </table>

2. Nagłówek Kolumny i Wiersza

<table>
  <tr>
    <th></th>
    <th>Nagłówek kolumny</th>
  </tr>
  <tr>
    <th>Nagłówek Wiersza</th>
    <td>wiersz</td>
  </tr>
 </table>

Tabela HTML – Zasięg

scope

Do naszego nagłówka tabeli warto dodać atrybut scope (zasięg), który informuje nas, którego zakresu danych. dany nagłówek dotyczy. Wartość atrybutu scope dla kolumn to col.

<table>
  <tr>
    <th scope="col">Nagłówek kolumny</th>
  </tr>
  <tr>
    <td>wiersz</td>
  </tr>
</table>

Skoro oznaczyliśmy już kolumny nagłówkami tabeli, warto by oznaczyć również nasze wiersze. Dodamy również atrybut scope do nagłówków wierszy i przyjmie on wartość row (wiersz). W pierwszym wierszu dodamy najpierw pusty element, żeby przesunąć nagłówki kolumn na właściwe miejsce.

<table>
  <tr>
    <th></th>
    <th scope="col">Nagłówek kolumny</th>
  </tr>
  <tr>
    <th scope="row">Nagłówek wiersza</th>
    <td>wiersz</td>
  </tr>
</table>

Jak widzicie prawidłowe poskładanie tabeli wymaga nie lada wyobraźni przestrzennej, gdyż pogubić się w tych wszystkich wierszach, kolumnach i nagłówkach nie jest trudno.

Tabela HTML – Łączenie komórek

W przypadku, gdy jedna komórka odnosi się do więcej niż jednego nagłówka, możemy dokonać połączenia kilku komórek w jedną, żeby kilkukrotnie nie powtarzać jej wartości. Łączenie nie jest jednak najlepszym określeniem, w przypadku tabeli html. W zasadzie nie dokonujemy łączenia komórek, a zwiększenia ich rozpiętości w pionie lub poziomie.

Łączenie Komórek Kolumnami (w poziomie)

colspan

W celu zwiększenia rozpiętości poziomej komórki używamy atrybutu colspan (ang. column span – rozpiętość kolumnowa komórki). Atrybut ten przyjmuje wartości liczbowe, tzn. przekazujemy tam jaką rozpiętość kolumnową (czyli w poziomie) ma posiadać dana komórka tabeli.

1. Przykład z zastosowaniem atrybutu colspan

<table>
  <tr>
    <th></th>
    <th>Poniedziałek</th>
    <th>Wtorek</th>
  </tr>
  <tr>
    <th>18:00</th>
    <td>Kręgle</td>
    <td>Polo</td>
  </tr>
  <tr>
    <th>20:00</th>
    <td colspan="2">Basen i Sauna</td>
  </tr>
 </table>

2. Przykład z zastosowanie atrybutu colspan i scope

<table>
  <tr>
    <th></th>
    <th scope="col">Poniedziałek</th>
    <th scope="col">Wtorek</th>
    <th scope="col">Środa</th>
    <th scope="col">Czwartek</th>
    <th scope="col">Piątek</th>
  </tr>
  <tr>
    <th scope="row">18:00</th>
    <td>Kręgle</td>
    <td>Polo</td>
    <td colspan="2">Golf</td>
    <td>Krykiet</td>
  </tr>
  <tr>
    <th scope="row">20:00</th>
    <td colspan="4">Basen i Sauna</td>
    <td>Impreza</td>
  </tr>
 </table>

Łączenie Komórek Wierszami (w pionie)

rowspan

Rozpiętość komórek możemy podawać nie tylko w poziomie, ale również w pionie, łącząc kolejne wiersze. W tym celu posłużymy się atrybutem rowspan (ang. row span – rozpiętość wierszowa komórki). Atrybut ten działa analogicznie do poprzedniego, tylko tym razem zwiększając rozpiętość komórki w pionie.

1. Przykład z zastosowaniem atrybutu rowspan

<table>
  <tr>
    <th></th>
    <th>Rodzaj</th>
  </tr>
  <tr>
    <th>Sharknado</th>
    <td rowspan="3">Horror</td>
  </tr>
  <tr>
    <th>Shartopussy</th>
  </tr>
  <tr>
    <th>Piranha 3DD</th>
  </tr>
</table>

2. Przykład z zastosowaniem atrybutu rowspan i scope

<table>
  <tr>
    <th></th>
    <th scope="col">Rodzaj</th>
    <th scope="col">Główny bohater</th>
    <th scope="col">Krótki opis</th>
  </tr>
  <tr>
    <th scope="row">Sharknado</th>
    <td rowspan="3">Horror</td>
    <td>Rekin</td>
    <td>Wirujące szczęki</td>
  </tr>
  <tr>
    <th scope="row">Sharktopussy</th>
    <td>Zmutowany rekin</td>
    <td>Macki, dużo macek</td>
  </tr>
  <tr>
    <th scope="row">Piranha 3DD</th>
    <td>Pirania</td>
    <td>Ostre rwanie</td>
  </tr>
 </table>

Tabela HTML – Sekcje

Każdą tabele można podzielić na trzy sekcje, które definiują nagłówek, ciało, a także stopkę tabeli. Taki podział może przydać się nam przy formatowaniu tabeli, gdy będziemy do niej dodawać zasady CSS. Jednak nie jest on konieczny do wprowadzenia. Jest to raczej kwestia semantyczna.

<table>
  <thead>
    <tr>
      <th scope="col">Rok</th>
      <th scope="col">Przychody</th>
      <th scope="col">Koszty</th>
      <th scope="col">Zysk</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">2013</th>
      <td>200'000</td>
      <td>150'000</td>
      <td>50'000</td>
    </tr>
    <tr>
      <th scope="row">2014</th>
      <td>500'000</td>
      <td>300'000</td>
      <td>200'000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Razem</th>
      <td>700'000</td>
      <td>450'000</td>
      <td>250'000</td>
    </tr>
  </tfoot>
</table>

To by było na tyle z tabel, jeśli chodzi o czysty html.