Tabele HTML

Możesz tworzyć tabele za pomocą HTML.

Przykład

Tabela
Ten przykład pokazuje, jak tworzyć tabele w dokumencie HTML.
Rama tabeli
Ten przykład pokazuje różne typy ramki tabeli.

(Więcej przykładów można znaleźć na dole strony)

Tabela

Tabela jest definiowana za pomocą etykiety <table>. Każda tabela ma kilka wierszy (definiowanych za pomocą etykiety <tr>), każdy wiersz jest podzielony na kilka komórek (definiowanych za pomocą etykiety <td>). Litera td oznacza dane tabeli (table data), czyli zawartość komórki danych. Komórki danych mogą zawierać tekst, obrazy, listy, akapity, formularze, poziome linie, tabele itp.

<table border="1">
<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
</tr>
<tr>
<td>wiersz 2, komórka 1</td>
<td>wiersz 2, komórka 2</td>
</tr>
</table>

W przeglądarce jest wyświetlana następująco:

wiersz 1, komórka 1 wiersz 1, komórka 2
wiersz 2, komórka 1 wiersz 2, komórka 2

Tabela i atrybut ramki

Jeśli nie zdefiniujesz atrybutu ramki, tabela nie wyświetli ramki. Czasami to może być przydatne, ale w większości przypadków chcemy wyświetlić ramkę.

Użyj atrybutu ramki, aby wyświetlić tabelę z ramką:

<table border="1">
<tr>
<td>Wiersz 1, komórka 1</td>
<td>Wiersz 1, komórka 2</td>
</tr>
</table>

Nagłówki tabeli

Nagłówki tabeli są definiowane za pomocą etykiety <th>.

Większość przeglądarek wyświetla nagłówki jako粗体居中的 tekst:

<table border="1">
<tr>
<th>Nagłówek</th>
<th>Kolejny Nagłówek</th>
</tr>
<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
</tr>
<tr>
<td>wiersz 2, komórka 1</td>
<td>wiersz 2, komórka 2</td>
</tr>
</table>

W przeglądarce jest wyświetlana następująco:

Nagłówek Kolejny Nagłówek
wiersz 1, komórka 1 wiersz 1, komórka 2
wiersz 2, komórka 1 wiersz 2, komórka 2

Puste komórki w tabeli

W niektórych przeglądarkach komórki tabeli bez zawartości mogą być wyświetlane nieestetycznie. Jeśli komórka jest pusta (nie zawiera zawartości), przeglądarka może nie wyświetlić ramki tej komórki.

<table border="1">
<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
</tr>
<tr>
<td></td>
<td>wiersz 2, komórka 2</td>
</tr>
</table>

Przeglądarka może wyświetlić to w następujący sposób:

Puste komórki w tabeli

Uwaga:Pusta komórka nie ma wyświetlanej ramki. Aby uniknąć tego, dodaj占位符空格 w pustych komórkach, aby wyświetlić ramkę.

<table border="1">
<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
</tr>
<tr>
<td> </td>
<td>wiersz 2, komórka 2</td>
</tr>
</table>

W przeglądarce jest wyświetlana następująco:

wiersz 1, komórka 1 wiersz 1, komórka 2
　 wiersz 2, komórka 2

Więcej przykładów

Tabela bez ramki
Ten przykład pokazuje tabelę bez ramki.
Nagłówki tabeli
Ten przykład pokazuje, jak wyświetlać nagłówki tabeli.
Puste komórki
Ten przykład pokazuje, jak przetwarzać komórki tabeli bez zawartości za pomocą " ".
Tabela z tytułem
Ten przykład pokazuje tabelę z tytułem (caption).
Komórki tabeli przechodzące przez wiersze lub kolumny
Ten przykład pokazuje, jak zdefiniować komórki tabeli przechodzące przez wiersze lub kolumny.
Etykiety w tabeli
Ten przykład pokazuje, jak wyświetlać elementy w różnych elementach.
Margines komórki (Cell padding)
Ten przykład pokazuje, jak użyć Cell padding do utworzenia pustki między zawartością komórki a jej krawędzią.
Odległość między komórkami (Cell spacing)
Ten przykład pokazuje, jak użyć Cell spacing do zwiększenia odległości między komórkami.
Dodanie koloru tła lub obrazu tła do tabeli
Ten przykład pokazuje, jak dodać tło do tabeli.
Dodanie koloru tła lub obrazu tła do komórki tabeli
Ten przykład pokazuje, jak dodać tło do jednej lub kilku komórek tabeli.
Układ zawartości w komórkach tabeli
Ten przykład pokazuje, jak używać atrybutu "align" do ustawiania zawartości komórek, aby utworzyć estetyczną tabelę.
Atrybut ram(frame)
Ten przykład pokazuje, jak używać atrybutu "frame" do kontrolowania ramy wokół tabeli.

Etykieta tabeli

Tabela Opis
<table> Zdefiniowanie tabeli
<caption> Zdefiniowanie tytułu tabeli.
<th> Zdefiniowanie nagłówka tabeli.
<tr> Zdefiniowanie wiersza tabeli.
<td> Zdefiniowanie komórki tabeli.
<thead> Zdefiniowanie nagłówka tabeli.
<tbody> Zdefiniowanie ciała tabeli.
<tfoot> Zdefiniowanie stopki tabeli.
<col> Zdefiniowanie atrybutów używanych do kolumn tabeli.
<colgroup> Zdefiniowanie grupy kolumn tabeli.