BLOGCZEJNalpha

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.

https://cdn.pixabay.com/photo/2012/04/02/17/06/spreadsheets-24956_960_720.png

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.

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).

https://cdn.pixabay.com/photo/2013/07/12/19/18/paper-154502_960_720.png

Znacznik

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



Lewa komórkaPrawa komórka


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


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%


image.png

Ok, a do czego mi to potrzebne?

Oczywiście można w 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 ;)

KOMENTARZE