Samouczek HTML

Strona główna HTML Wprowadzenie do HTML Edytory HTML Podstawy HTML Elementy HTML Atrybuty HTML Nagłówki HTML Akapity HTML Style HTML Formatowanie HTML Cytaty HTML Komentarze HTML Kolory HTML HTML CSS Linki HTML Obrazy HTML Ulubione HTML Tabele HTML Listy HTML Blok HTML i wbudowany Klasy HTML Identyfikator HTML Ramki HTML HTML JavaScript Ścieżki plików HTML Nagłówek HTML Układ HTML HTML Responsywne Kod komputerowy HTML Semantyka HTML Przewodnik po stylach HTML Jednostki HTML Symbole HTML Emotikony HTML Zestaw znaków HTML Kodowanie adresu URL HTML HTML a XHTML

Formularze HTML

Formularze HTML Atrybuty formularza HTML Elementy formularza HTML Typy danych wejściowych HTML Atrybuty wejściowe HTML Atrybuty formularza wejściowego HTML

Grafika HTML

Płótno HTML HTML SVG

Media HTML

Media HTML Wideo HTML Dźwięk HTML Wtyczki HTML HTML YouTube

API HTML

Geolokalizacja HTML Przeciągnij/upuść HTML Magazyn sieciowy HTML HTML Web Workers HTML SSE

Przykłady HTML

Przykłady HTML Quiz HTML Ćwiczenia HTML Certyfikat HTML Podsumowanie HTML Dostępność HTML

Odniesienia HTML

Lista znaczników HTML Atrybuty HTML Globalne atrybuty HTML Obsługa przeglądarki HTML Zdarzenia HTML Kolory HTML Płótno HTML HTML audio/wideo Dokumenty HTML Zestawy znaków HTML Kodowanie adresu URL HTML Kody językowe HTML Wiadomości HTTP Metody HTTP Konwerter PX na EM Skróty klawiszowe

Tabele HTML


Tabele HTML pozwalają programistom sieciowym na porządkowanie danych w wierszach i kolumnach.


Przykład

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Zdefiniuj tabelę HTML

Tabela w HTML składa się z komórek tabeli wewnątrz wierszy i kolumn

Przykład

Prosta tabela HTML:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Komórki tabeli

Każda komórka tabeli jest zdefiniowana za pomocą znacznika <td>i .</td>

td oznacza dane tabeli.

Wszystko pomiędzy <td>i </td>jest zawartością komórki tabeli.

Przykład

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Uwaga: elementy danych tabeli są kontenerami danych tabeli.
Mogą zawierać wszelkiego rodzaju elementy HTML; tekst, obrazy, listy, inne tabele itp.



Wiersze tabeli

Każdy wiersz tabeli zaczyna się od <tr>i kończy </tr>znacznikiem.

tr oznacza rząd tabeli.

Przykład

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Możesz mieć dowolną liczbę wierszy w tabeli, po prostu upewnij się, że liczba komórek jest taka sama w każdym wierszu.

Uwaga: Zdarza się, że wiersz może mieć mniej lub więcej komórek niż inny. Dowiesz się o tym w kolejnym rozdziale.


Nagłówki tabeli

Czasami chcesz, aby Twoje komórki były nagłówkami, w takich przypadkach użyj <th>tagu zamiast <td>tagu:

Przykład

Niech pierwszy wiersz będzie nagłówkiem tabeli:

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Domyślnie tekst w <th>elementach jest pogrubiony i wyśrodkowany, ale możesz to zmienić za pomocą CSS.


Ćwiczenia HTML

Sprawdź się za pomocą ćwiczeń

Ćwiczenie:

Dodaj wiersz tabeli z dwoma nagłówkami tabeli.

Dwa nagłówki tabeli powinny mieć wartość „Nazwa” i „Wiek”.

<tabela>
  
    
    
  
  <tr>
    <td>Jill Smith</td>
    <td>50</td>
  </tr>
</table>


Tagi tabeli HTML

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .