Tworzenie tabeli w HTML

W tabelach wygodnie jest umieścić dane połączone ze sobą przez pewne zależności. Do tworzenia tabel w HTML używane są specjalne znaczniki HTML. Za ich pomocą można skonstruować tabelę o dowolnej złożoności. Ponadto praktyka układu tabelarycznego jest bardzo powszechna, dzięki czemu można pięknie i wygodnie umieszczać elementy na stronie internetowej.

Tworzenie pierwszej tabeli

Otwórz edytor tekstu w zwykły sposób, utwórz pusty plik HTML i wklej następujący kod między tagami:

  1 
  2 
  3 
  4 
  5 
  6 

Zapisz dokument. Otwórz plik. Jeśli nigdzie nie ma literówek, przeglądarka wygeneruje następujący wynik:

Przełóżmy opisany kod:

1. Tagi ogłosić przeglądarce, że konieczne jest utworzenie tabeli.
2. Atrybut border definiuje granice tabeli, a parametr 1 ich grubość w pikselach.
3. Z pomocą ustaw wiersze tabeli.
4. Liczba tagów określa liczbę kolumn.
5. Liczby między znacznikami są zawartość komórek.

Jeśli chcesz zostawić komórkę pustą, powinieneś napisać w niej niewidzialną postać, taką jak spacja, i nie pozostawiać jej bez żadnej zawartości. Jest to konieczne do prawidłowego wyświetlania pustej komórki we wszystkich przeglądarkach. Niektóre z nich mogą zniekształcić wynik, jeśli nie zostanie to zrobione.

Zawartość komórek może być absolutnie dowolnym elementem HTML: liczbami, tekstem, obrazami, tabelami, a nawet całymi stronami. Najważniejsze to nie tylko wiedzieć, jak zrobić tabelę w HTML, ale także obserwować zagnieżdżanie tagów.

Ustaw rozmiar

Powyższy przykład dał mały stolik, niewygodny dla wizualnej percepcji. Możesz dostosować rozmiar tabeli do wymaganych parametrów, używając dwóch atrybutów:

1. width - ustawia szerokość.
2. wysokość - ustawia wysokość.

Wartości tych atrybutów mogą być pikselami lub wartościami procentowymi. Niektóre przeglądarki nie działają poprawnie z wartościami procentowymi dotyczącymi atrybutu wysokości. Dlatego powinieneś przetestować swój kod w kilku najczęstszych:

• IE.
• Mozilla Firefox.
• Opera.
• Konqueror.
• Safari.

Jeśli ekran jest nieprawidłowy, należy zmienić wartość wysokości tabeli w procentach o wartość w pikselach. Wybór na korzyść pikseli może również wynikać z faktu, że użytkownik witryny może wejść z urządzenia, które ma mały monitor (telefon komórkowy). Tekst w tabeli HTML na monitorze telefonu zostanie dostosowany do jego rozmiaru. A jeśli ustawione są procenty, tabela będzie tak mała, że ​​nie będzie można jej odczytać.

Używając atrybutów width i height ustawmy wymiary: szerokość tabeli HTML wynosi 300, a wysokość 200 pikseli:

  1 
  2 
  3 
  4 
  5 
  6 

W rezultacie przeglądarka wyświetli tabelę o potrzebnych wymiarach:

Pozycjonowanie

Znaczenie tej akcji polega na zlokalizowaniu zarówno zawartości komórek, jak i lokalizacji samej tabeli na stronie internetowej. Jednak technologia HTML w tabelach umieszczonych na stronie internetowej jest ograniczona do ich położenia po lewej stronie (domyślnie), w środku i po prawej stronie za pomocą atrybutu wyrównania i wartości niezbędnych do tego celu:

Składnia jest następująca:

  ... 

W przyszłości, ucząc się technologii CSS, nauczysz się, jak pozycjonować elementy dokumentów internetowych w pionie.

Aby ustawić położenie zawartości komórki, te same atrybuty z tymi samymi wartościami są stosowane do znacznika. :

  ...   ... 
  zawartość komórki 

Umieść nasz stolik po prawej stronie i wyrównaj zawartość jego komórek w środku:

  1 
  2 
  3 
  4 
  5 
  6 

Wynik powinien być następujący:

Łączenie ciągów

Aby utworzyć kilka komórek wiersza w jednej komórce, używany jest atrybut colspan o wartości równej liczbie scalanych komórek. Następujące znaczniki są usuwane w kodzie. wraz z ich zawartością. Liczba tagów do usunięcia równy wartości atrybutu colspan minus jeden.

Rozważ tę zasadę na przykładzie. Załóżmy, że musisz utworzyć tabelę na środku strony z dowolnymi liczbami o rozmiarze 4 kolumn i 3 wiersze. Następnie połącz komórki 2 i 3 poziomo w drugim rzędzie, aby przeglądarka wygenerowała następujący wynik:

Poniższy kod implementuje tę tabelę w dokumencie internetowym:

  11 
  20 
  4 
  14 
  58 
  36 
  80 
  19 
  10 
  15 
  29 

Zwróć uwagę na kod HTML w tabeli, w którym łączą się dwie komórki:

  58   36   80 

Ponieważ wartość parametru colspan wynosi 2, 1 tag został usunięty. po nim (2 - 1 = 1) z całą zawartością. Gdyby konieczne było połączenie trzech komórek, usunięto by 2 znaczniki. .

Dołącz do kolumn

Komórki pionowe są łączone za pomocą atrybutu rowspan. Wartość liczbowa określa liczbę komórek, które mają zostać przycięte pionowo. W tym temacie przedstawiono największe trudności dla uczniów.

Poniższa metoda jest najłatwiejsza do zrozumienia: utwórz tabelę i policz numery komórek o różnych numerach. Na przykład:

Kod tabeli będzie następujący:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 

Pozbądźmy się liczb dwucyfrowych, łącząc kolumny z liczbami 6 i 10, 7 i 11, 8 i 12. Pozostaw numery w połączonych pionowo komórkach: 6, 7 i 8.

Połącz 6 i 10. W tagu zawierające cyfrę 6, należy przepisać: i struktura 10 usunąć w ogóle. Podobnie, musisz zrobić dla pozostałych par liczb. W wyniku tego kod zostanie przekształcony w następujący sposób:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 

Przeglądarka powinna utworzyć tabelę, której potrzebujemy:

Wskazówka: dopóki nie uzyskasz automatycznego działania podczas łączenia kolumn, użyj tej metody używając liczb, zastępując je żądanymi danymi.

Zawartość komórki

Jak wspomniano powyżej, elementy komórek mogą być dowolnymi elementami HTML. Na przykład w tabeli wygodna będzie realizacja prostego stołu z owocami i ich kwiatami:

Jak widać, komórki w tej tabeli zawierają tekst, obrazy i wypełnienie tła. Elementy komórki mają zastosowanie i wszystkie znaczniki HTML będą działać. Tabela może również zawierać hiperlinki we wszystkich ich postaciach (tekst, linki do obrazów itp.).

Konieczne jest zwłaszcza ustalenie wypełnienia komórek kolorem: ponieważ są puste, nie zawierają żadnych danych, należy zarejestrować pustą przestrzeń: . W takim przypadku szerokość komórki może nie odpowiadać wymaganej. I prawie zawsze tak się dzieje. W tym przypadku do tego tagu Atrybut width zostanie zastosowany z wymaganą wartością: .

Aby uzyskać poprawne wyświetlanie koloru zastosowanego do tekstu lub tła, w języku HTML są tak zwane bezpieczne kolory. Tabela ich kodów znajduje się na wielu stronach. Bezpieczny kolor HTML nie oznacza, że ​​może on zaszkodzić komputerowi, ale oznacza, że ​​będzie on wyświetlany na konsoli użytkownika do przyszłej witryny tak, jak zamierzałeś, bez zniekształceń.

Nagłówki tabel

Często pojawia się potrzeba nagłówka tabeli. Odbywa się to za pomocą specjalnej pary tagów. . Jest umieszczony zaraz po tagu.

W przeglądarce ta tabela będzie wyglądać następująco:

Oprócz nazw tabel należy używać nazw kolumn lub wierszy za pomocą tagu. . Tekst w tabeli HTML zawarty między tymi tagami zostanie wyświetlony pogrubioną czcionką. Do tego tagu stosujemy poziomy łączący atrybut komórki colspan. Zmieńmy powyższą tabelę jako przykład, wprowadzając zmiany do kodu:

  Tabela z numerami 
  Nawet 
  Dziwne 
  2 
  1 
  4 
  3 
  6 
  5 

W rezultacie przeglądarka wyświetli nagłówek z nagłówkiem kolumny:

Aby utworzyć nagłówki boczne, gdy są elementami określonej kolumny, tag znajduje się zaraz po tagu przed pierwszym tagiem .

Dokument internetowy układu tabeli

Jest to najpopularniejszy sposób tworzenia stron internetowych. Istotą układu tabeli jest umieszczenie elementów na stronie witryny w komórkach za pomocą tabel. Jednocześnie są pobierane oddzielne części witryny (stopka, nagłówek, treść), które z kolei mogą również być komórkami. W praktyce układ tabeli jest wykonywany w większości przypadków zgodnie z następującym algorytmem:

• projektant stron internetowych przygotowuje układ strony;
• za pomocą edytorów graficznych lub innego oprogramowania poszczególne elementy układu (przyciski, obrazy) są odcięte i stają się niezależne;
• programista internetowy tworzy tabelę elementów serwisu zgodnie z zamierzeniami projektanta, pozostawiając puste komórki;
• programista sieciowy odtwarza obraz strony z wyciętych elementów za pomocą języków znaczników i języków programowania, monitorując funkcjonalność i funkcjonalność każdego z nich.

Układ tabeli witryny pozwala pięknie i logicznie budować zawartość (treść), aby zapewnić odwiedzającego, który odwiedził witrynę. Ma jednak dwie minusy:

1. Wymaga dużej ilości kodu.
2. To sprawia, że ​​strona jest cięższa i zmniejsza prędkość jej ładowania.

Czasami jednak, aby spełnić zadanie techniczne przy ścisłym pozycjonowaniu elementów, układ HTML w tabeli staje się jedynym rozwiązaniem.