Zacznij korzystać z HTML: Tabele

HTML, skrót od HyperText Markup Language. Jest to standard, który służy jako odniesienie do tworzenia stron internetowych w różnych jej wersjach, definiuje podstawową strukturę i kod (tzw. kod HTML) do definiowania zawartości strony internetowej, takiej jak tekst, obrazy, filmy, m.in. Aby zacząć rozumieć, jak zdefiniowana jest struktura tego języka, w tym samouczku zaczniemy od poznania etykiet, za pomocą których obsługiwane są tabele, które są bardzo przydatne podczas budowania struktur głównie biuletynów i mailingów.
Celem tego samouczka jest wyjaśnienie, które pomoże projektantom graficznym zrozumieć w najprostszy możliwy sposób strukturę i logikę dokumentów HTML zdobyć podstawową wiedzę, która pozwoli im generować pliki w tym języku.

Wymagania

- Posiadaj edytor kodu, taki jak Dreamweaver CS6, Notatnik ++, Wysublimowany tekst m.in. dostępne w Internecie.
- Zainstalować przeglądarkę internetową, taką jak Chrome, Firefox, Opera, Safari, Edge lub Internet Explorer.
Krok 1: Znajomość etykiet do tworzenia tabel
tą etykietą definiujemy początek tabeli w strukturze HTML.
pozwala na stworzenie wiersza dla tabeli
reprezentują nagłówek kolumn, te kolumny składają się z komórek.
<>> to reprezentacja komórek, które będą znajdować się w wierszach tabeli.
To są wszystkie etykiety, które będziemy potrzebować do tworzenia tabel, w kolejnym kroku dowiemy się, jak są deklarowane w kodzie i jaka jest ich kolejność.
Krok 2: Logiczna deklaracja etykiet.
Ważne jest, aby wiedzieć, że w HTML zdecydowana większość tagów musi być otwarta, czyli właśnie wtedy, gdy je deklarujemy, a także muszą być zamknięte, poniższy przykład ilustruje tę koncepcję:

Jak widać, każda etykieta musi mieć swoje otwarcie i zamknięcie. Różnią się głównie ukośnikiem „/”, którym etykieta zamyka się. Za każdym razem, gdy tworzony jest tag, obowiązkowe jest zadeklarowanie jego zamknięcia w ten sam sposób.
Krok 3: Hierarchiczna deklaracja etykiet.
Metka Jest to pierwsza deklarowana, która wskazuje na utworzenie tabeli, a co za tym idzie rozpoczęcie tworzenia komórek, które będą zawierały informacje do wyświetlenia.
Tabele składają się z kolumn i wierszy.

Dbając o hierarchiczną kolejność, jaką musi mieć każda etykieta, utworzymy tabelę i wprowadzimy wiersze, które będą potrzebne dla tabeli na poniższym obrazku:

Kod w tabeli powinien wyglądać tak:

Chociaż wiersze tabeli są już zdefiniowane, konieczne jest utworzenie komórek tworzących kolumny tabeli. Poniższy obrazek ilustruje tę koncepcję:

Kod w tabeli powinien wyglądać tak:

Krok 4: Dodawanie zawartości do komórek
Każdy tag [kolor = # 7030a0] [/ color] jest odpowiednikiem komórki w naszej tabeli, więc tutaj można dodać informacje. Zmienimy się w pierwszej etykiecie [kolor = # 44546a] [/ color] zadeklarowany wiersz all [color = # 7030a0] [/ color] według tagów nagłówka [color = # 002060][/Kolor]. W [kolor = # 7030a0][/ color] z pozostałych wierszy dodajemy przykładową treść. Kod HTML To powinno wyglądać tak:

 
 
 
Przedmiot
 
Nazwa
 
Nazwisko
 

 
 
1
 
Pedro
 
Róże
 

 
 
2
 
Jan
 
Źródła
 

Krok 5: Zapisz dokument w HTML i wyświetl plik
W programie do edycji kodu przechodzimy do menu Plik / Zapisz jak zapisujemy dokument w formacie .html

Później otwieramy dokument w wybranej przez nas przeglądarce:

Utworzona przez nas tabela powinna wyglądać jak na poniższym obrazku.

Do tej pory poznaliśmy nazwę i funkcję etykiet HTML do budowania tabel, ich hierarchicznego porządku, ich logicznego rozmieszczenia i dodawania do nich treści. Jesteśmy teraz gotowi do dodania atrybutów graficznych do tabel.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt