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