Tabela, TR, TD - HTML

Tabelki ... kto ich nie lubi? Mogą służyć do ładnego wyświetlania danych statystycznych na przykład. Chociaż w HTML różne funkcje pełniły (np. menu) to czasem potrafią uratować nam tyłek. Dzisiaj poznamy podstawowe tagi odpowiedzialne za tworzenie tabel.

<table>

Znacznik table jest podstawowym znacznikiem określającym tabelę. Nie wiem czy sam w sobie coś robi, ale to on określa początek i koniec tabeli.

<table>
</table>

<tr>

TR oznacza wiersz tabeli. (a dokładniej początek i koniec wiersza). To w nim ustalamy ile mamy możliwych do dyspozycji komórek tabeli (poprzez ich wywoływanie).

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

<td>

Znacznik <td> określa bezpośrednio komórkę tabeli, a w nim zapisujemy zawartość.

Lewa komórka

Prawa komórka

<table>
<tr><td>Lewa komórka</td><td>Prawa komórka</td></tr>
</table>

Jak widzimy - mamy na jednej wysokości dwie komórki - więc tabela działa.

Czy na pewno działa?

Jeśli wkleimy ten kod do notatnika, zapiszemy i uruchomimy w przeglądarce to nie zauważymy żadnej tabeli. Jest to spowodowane tym, że domyślnie tabela ma 0 pikseli. Możemy użyć rozszerzenia tabeli zwane border. Jest ono już w zasadzie niepraktykowane (i może zniknąć potencjalnie z dnia na dzień), jednakże nie bawiliśmy się jeszcze CSSem [jeśli będziemy się nim bawić], więc na razie można tego użyć ;)

Funkcja ta nie działa na Steem / Busy

<table border=1>
<tr><td>Lewa komórka</td><td>Prawa komórka</td></tr>
</table>

Może nam wydawać się, że tabelka jest brzydka, gdyż nie jest na rozciągnięcia w poziomie. Można użyć (też najlepiej CSSa do tego, ale o tym kiedy indziej) - width=100%

<table border=1 width=100%>
<tr><td>Lewa komórka</td><td>Prawa komórka</td></tr>
</table>

Ok, a do czego mi to potrzebne?

Oczywiście można w <jakiś> sposób zaprezentować dane. Ale skupmy się nawet na Steem, wiele osób używa tabeli do tego by podzielić coś w tekście na dwa miejsca. Na przykład mają po lewej stronie tekst po Polsku, a po drugiej po Angielsku.

Dzięki tabeli na Steem można wrzucić dwa obrazki obok siebie (albo więcej - ale też należy pamiętać, że ekrany nie są duże). Kiedyś w ten sposób tworzyło się menu (Strona główna, O nas) i na upartego można, chociaż Bootstrap robi to wyśmienicie, a przy tym dopasowuje rozmiar do ekranów (np. telefonu komórkowego).

Ale to podstawy HTMLa i warto znać tabelę mimo wszystko ;)