Jak utworzyć tabelę w HTML: Przewodnik dla początkujących

Zawartość:

• 
  : tworzenie tabeli

• 
  : praca z wierszami

• : dodawanie komórek

• : nadawanie nazw kolumnom

• : nagłówek

• 
  : treść główna

• 
  : stopka

• 
  : Dodawanie nagłówka

• Atrybuty Colspan i Rowspan: Scalanie komórek
• Co warto przeczytać

Tabela to uporządkowany zbiór danych, podzielony na wiersze i kolumny. Na przecięciu tych wierszy i kolumn znajdują się komórki zawierające ważne informacje, takie jak tekst lub wartości liczbowe. Tabele są skutecznym narzędziem do wizualizacji danych i uproszczenia ich odbioru, co czyni je niezbędnymi w różnych dziedzinach, w tym w badaniach naukowych, raportach biznesowych i materiałach edukacyjnych. Korzystanie z tabel pozwala użytkownikom szybko znaleźć i przeanalizować niezbędne informacje, znacznie poprawiając użyteczność pracy z danymi.

W początkach Internetu strony internetowe tworzono za pomocą tabel. Jednak obecnie istnieją nowocześniejsze i wygodniejsze narzędzia do tworzenia układów, takie jak Flexbox i Grid, które umożliwiają tworzenie responsywnych i złożonych układów. Niemniej jednak tabele nadal są przydatne do wizualnej prezentacji i strukturyzacji danych na stronach internetowych. Ich użycie pomaga poprawić odbiór informacji i uporządkować treść.

Tworzenie tabeli w HTML nie jest trudne, ponieważ język ten udostępnia wszystkie niezbędne tagi. W tym artykule szczegółowo omówimy, jak tworzyć tabele z wykorzystaniem danych z najnowszych filmów Marvela z udziałem Spider-Mana. Omówimy funkcjonalność tagów i ich atrybuty, aby można było skutecznie wykorzystywać je w projektach. Zrozumienie podstaw pracy z tabelami HTML pomoże Ci organizować i prezentować informacje w bardziej uporządkowany i przyjazny dla użytkownika sposób.

Treść jest ważnym elementem każdego tekstu, ponieważ pomaga czytelnikom szybko poruszać się po materiale. Prawidłowo sformatowana treść poprawia komfort użytkowania i ułatwia lepsze zrozumienie informacji. Ustrukturyzowana treść pozwala czytelnikom łatwo znaleźć potrzebne sekcje i artykuły. Dotyczy to zwłaszcza treści internetowych, gdzie uwaga użytkowników może być ograniczona.

Aby zoptymalizować tekst pod kątem SEO, ważne jest nie tylko prawidłowe ustrukturyzowanie treści, ale także użycie słów kluczowych związanych z tematem. Pomoże to zwiększyć widoczność strony w wyszukiwarkach i przyciągnąć odbiorców docelowych.

Co więcej, kluczowe znaczenie ma również dbanie o to, aby informacje były istotne dla zainteresowań czytelników. Regularna aktualizacja treści i dodawanie nowych danych pomaga utrzymać zainteresowanie materiałem i promuje jego dystrybucję.

Dostarczając wysokiej jakości treści, możesz nie tylko poprawić swoją pozycję w wyszukiwarkach, ale także zbudować zaufanie użytkowników. Przejrzysta i logiczna prezentacja informacji sprawia, że ​​tekst jest bardziej atrakcyjny i informacyjny dla czytelników.

• : tworzenie tabeli
• : praca z wierszami
• : dodawanie komórek
• : nadawanie nazw kolumnom
• : dodawanie nagłówka
• : wyróżnianie głównej treści
• : dodawanie stopki
• : dodawanie nagłówka
• Atrybuty colspan i rowspan: scalanie komórek
• Co warto przeczytać dalej

: tworzenie tabeli

Aby utworzyć tabelę w HTML, należy użyć dwóch głównych znaczników

Jeśli zapiszemy plik i otworzymy go w przeglądarce, nie zobaczymy niczego. Tabela nie została jeszcze utworzona, ponieważ nie dodaliśmy do niej wierszy ani kolumn. Aby wyświetlić tabelę w przeglądarce, należy poprawnie ustrukturyzować kod HTML, dodając odpowiednie znaczniki.

: praca z wierszami

Zacznijmy wypełniać tabelę danymi. Najpierw utworzymy wiersze za pomocą sparowanego znacznika . Każdy wiersz tabeli będzie zawierał komórki, które dodamy za pomocą znacznika . Uporządkuje to informacje w sposób uporządkowany, poprawiając zrozumiałość danych i komfort użytkownika. Prawidłowe użycie znaczników HTML nie tylko ułatwia wizualizację informacji, ale także pomaga zoptymalizować stronę pod kątem wyszukiwarek.

Obecnie mamy trzy wiersze, ale to jeszcze nie tworzy kompletnej tabeli. Główną wadą jest brak kolumn, które są niezbędne do uporządkowania danych i lepszego zrozumienia informacji. Aby utworzyć kompletną tabelę, musimy dodać odpowiednie kolumny, co pomoże uporządkować dane w czytelny sposób.

: dodawanie komórek

Każdy wiersz tabeli składa się z komórek, które są tworzone za pomocą pary znaczników <td> umieszczonych wewnątrz znacznika <tr>. Skrót «td» oznacza «dane tabelaryczne». Korzystanie z tych znaczników pozwala na uporządkowanie informacji w sposób ustrukturyzowany, co upraszcza odbiór danych i przyczynia się do lepszej optymalizacji treści pod kątem SEO. Prawidłowe użycie znaczników tabelarycznych usprawnia nawigację po stronie i czyni ją bardziej dostępną dla wyszukiwarek.

Utwórzmy tabelę HTML, która będzie zawierać listę filmów o Spider-Manie należących do Marvel Cinematic Universe. W tabeli wymienimy tytuł filmu w języku rosyjskim, jego oryginalny tytuł oraz rok premiery. Pomoże to lepiej uporządkować informacje i uprości wyszukiwanie danych na temat tych filmów.

Kod HTML tabeli będzie wyglądał następująco:

<table>
<thead>
<tr>
<th>Tytuł (rosyjski)</th>
<th>Tytuł oryginalny</th>
<th>Rok wydania</th>
</tr>
</thead>
<tbody>
<tr>
<td>Spider-Man</td>
<td>Spider-Man</td>
<td>2002</td>
</tr>
<tr>
<td>Spider-Man 2</td>
<td>Spider-Man 2</td>
<td>2004</td>
</tr>
<tr>
<td>Spider-Man 3</td>
<td>Spider-Man 3</td>
<td>2007</td>
</tr>
<tr>
<td>Spider-Man: Powrót do domu</td>
<td>Spider-Man: Powrót do domu</td>
<td>2017</td>
</tr>
<tr>
<td>Spider-Man: Daleko od domu</td>
<td>Spider-Man: Daleko od domu</td>
<td>2019</td>
</tr>
<tr>
<td>Spider-Man: Bez drogi do domu</td>
<td>Spider-Man: Bez drogi do domu</td>
<td>2021</td>
</tr>
</tbody>
</table>

Ta tabela pomoże widzom szybko znaleźć informacje o filmach związanych ze Spider-Manem i poznać kolejność ich premier.

Możesz skopiować kod, aby uniknąć konieczności wpisywania go w całości:

Tabela zawiera wiersze i kolumny zawierające informacje o Filmy. Każdy wiersz reprezentuje osobny film, a kolumny zawierają kluczowe dane, takie jak tytuł, gatunek, rok premiery, reżyser i ocena. Taka struktura ułatwia analizę i porównywanie różnych filmów, zapewniając użytkownikom wygodny dostęp do potrzebnych informacji.

Jeśli powtórzysz kod przedstawiony w artykule i zauważysz, że tabela wyświetla się inaczej w Twojej przeglądarce, nie martw się - Przyczyna leży w stylach CSS. Aby uzyskać taki sam wygląd tabeli, jak w przykładzie, utwórz plik style.css w tym samym folderze, co dokument HTML. Następnie skopiuj i wklej poniższy kod do tego pliku:

Nie zapomnij dodać stylów. Aby to zrobić, dodaj odpowiednią linię do pliku HTML. Aby zrozumieć CSS i sposób działania tego kodu, zapoznaj się z naszym artykułem o podstawach układu.

Pamiętaj, że liczba komórek w każdym wierszu musi być taka sama. Niedopełnienie tego warunku może spowodować uszkodzenie układu tabeli, co negatywnie wpłynie na odbiór informacji i ogólną czytelność treści. Dlatego ważne jest monitorowanie struktury tabeli, aby zapewnić prawidłowe wyświetlanie danych.

: Nadawanie nazw kolumnom

W naszej tabeli pierwszy wiersz niczym się nie różni od pozostałych — zawiera komórki danych. Jednak ten wiersz zawiera nagłówki kolumn, a nie informacje o filmie. Aby odzwierciedlić to w kodzie HTML, należy użyć odpowiednich elementów wskazujących na nagłówki tabeli. Pomoże to ulepszyć strukturę danych i zoptymalizować stronę pod kątem wyszukiwarek.

Aby poprawnie sformatować tabelę, należy umieścić nagłówki kolumn w tagach parowanych w pierwszym wierszu. Zapewnia to poprawne wyświetlanie i strukturę danych, co poprawia odbiór informacji. Użycie tagów parowanych pomaga stworzyć przejrzystą i zrozumiałą tabelę, co jest szczególnie ważne dla optymalizacji SEO, ponieważ wyszukiwarki uwzględniają strukturę zawartości HTML podczas indeksowania stron. Prawidłowe użycie tagów nie tylko poprawia percepcję wizualną, ale także przyczynia się do lepszych pozycji w wyszukiwarkach.

Treści otrzymują standardowy styl, w tym wyrównanie do środka i pogrubienie czcionki. Zapewnia to atrakcyjność wizualną i podkreśla kluczowe elementy tekstu. Stosowanie takich stylów pomaga poprawić czytelność i zrozumienie, co jest ważne zarówno dla użytkowników, jak i wyszukiwarek. Prawidłowy styl treści poprawia jej skuteczność i może pozytywnie wpłynąć na SEO, ponieważ pomaga podkreślić ważne punkty i poprawić strukturę strony.

: nagłówek

Stworzyliśmy tabelę i wypełniliśmy ją danymi, które są łatwe do zrozumienia dla użytkowników. Jednak wyszukiwarki i programy nie mogą interpretować znaczenia informacji w komórkach. Aby poprawić zrozumienie zawartości tabeli zarówno dla wyszukiwarek, jak i czytników ekranu, możesz dodać znaczniki semantyczne. Znaczniki te nie zmieniają wyglądu tabeli, ale znacząco pomagają wyszukiwarkom poprawnie indeksować informacje, a czytnikom ekranu poprawnie odczytywać dane. Używanie znaczników semantycznych jest ważnym krokiem w optymalizacji treści i zwiększaniu jej dostępności.

Jednym ze znaczników semantycznych w HTML jest <header>. Ten znacznik służy do tworzenia i grupowania elementów nagłówka, które obejmują nagłówki kolumn i inne ważne elementy. Znacznik <header> musi znajdować się wewnątrz bloku <body> i zawierać co najmniej jeden blok <h1>, <h2> lub inny blok nagłówka, aby zapewnić uporządkowaną i dostępną treść. Prawidłowe użycie znacznika <header> Tag To pomaga poprawić SEO, ponieważ wyszukiwarki lepiej indeksują strony z przejrzystą hierarchią nagłówków.

Stworzymy nagłówek, który pomoże wyszukiwarkom i czytnikom ekranu rozpoznawać nagłówki kolumn tabeli, odróżniając je od zwykłych komórek. Poprawi to dostępność treści i zwiększy jej widoczność w wyszukiwarkach, pomagając użytkownikom lepiej zrozumieć informacje. Prawidłowy projekt nagłówka to ważny aspekt tworzenia stron internetowych, który poprawia SEO i użyteczność.

Teraz, gdy czytnik ekranu odczytuje zawartość tabeli, najpierw odczytuje nagłówek kolumny, a następnie jej zawartość. Poprawia to zrozumienie informacji przez użytkowników korzystających z narzędzi ułatwień dostępu i sprawia, że ​​dane w tabeli są bardziej ustrukturyzowane i zrozumiałe. W ten sposób użytkownicy będą mogli szybciej poruszać się po informacjach i znaleźć potrzebne dane.

: main content

Owiń kluczowe dane tabeli tagiem semantycznym <main>. Ten tag znajduje się bezpośrednio po nagłówku i wskazuje główną sekcję z ważnymi informacjami. Użycie tego tagu pozwala wyszukiwarkom i czytnikom ekranu lepiej zrozumieć, że ten obszar zawiera najważniejsze informacje dla użytkowników. Poprawia to indeksowanie witryny i zapewnia wygodniejszy dostęp do treści osobom niepełnosprawnym.

Jeśli nie określisz tego wyraźnie, przeglądarka zrobi to automatycznie. Zaleca się jednak ręczne dodanie informacji w celu dokładniejszego wyświetlania i poprawy SEO. Pomoże to wyszukiwarkom lepiej indeksować witrynę i zwiększyć jej widoczność.

Tag nie wpływa na wygląd tabeli, ale zapewnia szereg funkcji. Umożliwia strukturyzację informacji, nadając elementom tabeli znaczenie semantyczne. Ułatwia to zarówno użytkownikom, jak i wyszukiwarkom zrozumienie danych. Ponadto tag promuje dostępność dla osób niepełnosprawnych, usprawniając nawigację i odbiór informacji. Użycie tego tagu może również pozytywnie wpłynąć na SEO, ponieważ wyszukiwarki preferują strony o przejrzystej strukturze i poprawności semantycznej. Dlatego prawidłowe użycie tego znacznika odgrywa znaczącą rolę w optymalizacji tabel pod kątem treści internetowych.

• Dostosuj przewijanie strony tabeli. Teraz jej główne komórki będą przewijane niezależnie od nagłówków kolumn, które będą umieszczone na samej górze.
• Pokaż czytnikowi ekranu, gdzie znajdują się główne informacje w tabeli.

: footer

Tabele HTML mogą zawierać stopkę, która zazwyczaj służy do wyświetlania sum obliczonych na podstawie danych w komórkach tabeli. Na przykład, jeśli tabela zawiera informacje o wynagrodzeniach pracowników, stopka może wyświetlać średnią pensję lub całkowite wynagrodzenie. Pozwala to użytkownikom łatwo zrozumieć ważne statystyki i upraszcza analizę prezentowanych informacji. Prawidłowe użycie stopki w tabelach HTML sprawia, że ​​treść jest bardziej uporządkowana i użyteczna dla użytkowników.

Stopkę można zdefiniować za pomocą semantycznego znacznika

Pamiętaj, że tabela może zawierać tylko jeden blok.

Struktura tabeli ze stopką jest przedstawiona następująco:

: dodanie nagłówka

Dodanie tytułu do tabeli poprawi jej odbiór i pomoże użytkownikowi szybko zrozumieć jej zawartość. Można to osiągnąć za pomocą sparowanego znacznika <caption>. Przeglądarka wyświetli tekst zawarty w tym znaczniku bezpośrednio nad tabelą, dzięki czemu informacje będą bardziej dostępne i uporządkowane.

Nagłówki odgrywają kluczową rolę dla użytkowników z dysfunkcjami wzroku. Czytniki ekranu najpierw ogłaszają nagłówki, a następnie przechodzą do głównej treści. Dzięki temu użytkownicy mogą szybko ocenić, czy informacje są interesujące i zdecydować, czy kontynuować czytanie, czy pominąć określone sekcje strony internetowej. Prawidłowo ustrukturyzowane nagłówki nie tylko poprawiają dostępność, ale także przyczyniają się do lepszego zrozumienia treści.

Style CSS służą do formatowania tekstu w HTML. Style te pozwalają określić wygląd, rozmiar, kolor czcionki i inne cechy wizualne, takie jak odstępy między wierszami, wcięcia i wyrównanie. Prawidłowe użycie stylów CSS nie tylko poprawia wizualne postrzeganie treści, ale także pomaga użytkownikom lepiej zrozumieć informacje. Optymalizacja formatowania tekstu za pomocą CSS pozwala tworzyć atrakcyjniejsze i łatwiejsze w odbiorze strony internetowe.

Aby dodać tytuł do tabeli, użyj znacznika HTML <caption>. Ten znacznik umożliwia utworzenie nagłówka tabeli, dzięki czemu staje się ona bardziej zrozumiała i łatwiejsza do odczytania. Prawidłowe użycie znacznika <caption> poprawia strukturę kodu HTML i przyczynia się do optymalizacji SEO, ponieważ wyszukiwarki mogą lepiej indeksować zawartość strony. Przykład użycia znacznika <caption> Tag wygląda następująco:

<table>
<caption>Tytuł tabeli</caption>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
<tr>
<td>Dane 1</td>
<td>Dane 2</td>
</tr>
</table>

Pamiętaj, że prawidłowo sformatowane tabele z nagłówkami nie tylko poprawiają odbiór informacji przez użytkownika, ale także przyczyniają się do Aby poprawić pozycję Twoich treści w wyszukiwarkach.

Tytuł tabeli jest teraz wyświetlany nad kolumnami i wierszami. To ulepszenie pozwala użytkownikom szybko poruszać się po zawartości tabeli i lepiej zrozumieć prezentowane informacje. Czytelny tytuł pomaga wyróżnić główny temat danych, co sprawia, że ​​interakcja z tabelą jest wygodniejsza i efektywniejsza.

Atrybuty Colspan i Rowspan: scalanie Komórki

Scalanie komórek i kolumn w tabelach HTML jest niezbędne do uporządkowania danych. Osiąga się to za pomocą atrybutów colspan i rowspan, które są stosowane do znaczników i . Atrybut colspan umożliwia łączenie komórek z dwóch lub więcej kolumn, podczas gdy rowspan łączy komórki z dwóch lub więcej wierszy. Wartość tych atrybutów określa liczbę komórek do połączenia. Użycie colspan i rowspan pomaga tworzyć bardziej ustrukturyzowane i zrozumiałe tabele, co poprawia odbiór informacji przez użytkownika i może pozytywnie wpłynąć na optymalizację SEO strony.

Dodajmy do naszej tabeli nazwiska reżyserów i producentów filmowych. Dane te są takie same dla wszystkich trzech filmów, dlatego łączymy komórki z nazwiskami, stosując atrybut rowspan do znacznika. Dzięki temu informacje będą wyświetlane bardziej kompaktowo, a tabela będzie bardziej czytelna.

Teraz tabela wygląda tak:

Co czytaj

Układ tabel w HTML jest stosunkowo prosty, ale wymaga dbałości o szczegóły i precyzji. Dzięki podstawowej znajomości HTML można skutecznie organizować dane na stronie internetowej, tworząc czytelne tabele. Aby uzyskać szczegółowe informacje i najlepsze praktyki dotyczące układu tabel, zalecamy zapoznanie się z zasobami takimi jak MDN Web Docs. Ten portal oferuje szczegółowy opis każdego znacznika HTML i jego funkcji, co może pomóc w uniknięciu typowych błędów i osiągnięciu wysokiej jakości prezentacji danych. Tabele utworzone w czystym HTML często wyglądają nieatrakcyjnie i monotonnie. Jednak style CSS mogą znacznie poprawić ich wygląd. Korzystanie z CSS pozwala na pracę z kolorami, obramowaniami, czcionkami i różnymi efektami, przekształcając standardowe tabele w bardziej estetyczne elementy. Aby uzyskać szczegółowe informacje i praktyczne zalecenia dotyczące stylizowania tabel za pomocą CSS, zapoznaj się z tym przewodnikiem zespołu DigitalOcean. Ten przewodnik pomoże Ci opanować podstawowe techniki i triki, które sprawią, że Twoje tabele będą nie tylko funkcjonalne, ale także atrakcyjne wizualnie.

Dowiedz się więcej o programowaniu i kodowaniu na naszym kanale Telegram. Subskrybuj, aby być na bieżąco z ciekawymi treściami i przydatnymi wskazówkami!

Przeczytaj także:

• HTML: Co to jest i jak działa?
• Test: Jak dobrze znasz historię przeglądarki?
• HTML, CSS i standardy internetowe: możliwości, błędy programistów i nieznane funkcje