Tagi związane z tabelami

W tym artykule omawiamy tagi związane z tabelami.

To wyjaśnia, jak opisywać tabele i ich podpisy w HTML wraz z przykładami.

YouTube Video

Tagi związane z tabelami

Tag <table>

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• Tag <table> służy do tworzenia tabeli, która organizuje i wyświetla dane w wierszach oraz kolumnach.

  Tag <table> wizualnie organizuje dane i tworzy tabele z wieloma wierszami i kolumnami. Wiersze są definiowane za pomocą tagu <tr>, komórki nagłówka za pomocą tagu <th>, a komórki danych za pomocą tagu <td>.

• Możesz dostosować styl i układ tabeli za pomocą CSS.

Tag <tr>

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• Tag <tr> służy do definiowania wierszy w tabeli.

  Tag <tr> jest używany do tworzenia każdego wiersza tabeli, zawierającego komórki (<td> lub <th>).

• Każdy wiersz może zawierać wiele komórek, tworząc ogólną strukturę tabeli.

Tagi <th> i <td>

1<th>Header 1</th>
2<td>Data 1</td>

• Tag <th> definiuje komórkę nagłówka tabeli. Zazwyczaj używane w wierszach nagłówka, zawartość komórek jest pogrubiona i wyśrodkowana.
• Tag <td> definiuje standardową komórkę danych tabeli, która wyświetla zwykłe dane tabeli.

Atrybuty colspan i rowspan

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan i rowspan to atrybuty używane, gdy komórki tabeli obejmują wiele kolumn lub wierszy.

• Atrybut colspan pozwala komórce rozciągać się na kilka kolumn.
• Atrybut rowspan pozwala komórce zająć wiele wierszy.

Tagi <thead>, <tbody>, <tfoot>

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• Tag <thead> jest używany do definiowania sekcji nagłówkowej tabeli. Zazwyczaj zawiera nagłówki kolumn.

  Tag <thead> znajduje się na górze tabeli i definiuje tytuły lub nagłówki kolumn. To pomaga wyraźnie odróżnić sekcje danych.

• Tag <tbody> definiuje główną sekcję tabeli. Zawiera wiersze z danymi.

  Tag <tbody> zawiera główną część danych tabeli. Znajduje się pomiędzy wierszami otoczonymi tagami <thead> i <tfoot>.

• Tag <tfoot> definiuje dolną część tabeli, która zawiera sumy lub notatki.

  Tag <tfoot> znajduje się na końcu tabeli i jest używany do wyświetlania sum lub innych adnotacji. Jest szczególnie przydatny podczas podsumowywania lub wyświetlania sum dla dużych zbiorów danych.

<caption> i <colgroup> Tagi

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• Tag <caption> dodaje podpis (nagłówek), aby treść tabeli była bardziej przejrzysta. Zazwyczaj znajduje się na górze tabeli i służy do podsumowania ogólnej zawartości tabeli.

• Tag <colgroup> grupuje kolumny w tabeli i jest używany do stosowania stylów lub układów. Możesz określić kolory tła lub szerokości dla określonych kolumn, włączając tag <col>.

Przykład tabeli

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• Tag <table> jest używany do tworzenia tabeli, która wyświetla dane w wierszach i kolumnach.

• Tag <thead> grupuje wiersze nagłówkowe tabeli. Zazwyczaj zawiera tagi <th>, które pełnią rolę nagłówków.

• Tag <tbody> grupuje główną zawartość tabeli. Zazwyczaj zawiera wiersze danych składające się z tagów <td>.

• Tag <tfoot> grupuje wiersze stopki tabeli. Nadaje się do wyświetlania sum lub notatek.

• Tag <colgroup> grupuje kolumny tabeli i jest używany do stosowania stylów do nich jako całości.

• Tag <caption> dodaje podpis lub nagłówek do tabeli, ułatwiając użytkownikom zrozumienie jej zawartości.

• Atrybut colspan pozwala komórce rozciągać się na kilka kolumn.

• Atrybut rowspan pozwala komórce zająć wiele wierszy.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video