HTML => Stoły

Wprowadzenie

Element HTML <table> umożliwia autorom stron internetowych wyświetlanie danych tabelarycznych (takich jak tekst, obrazy, łącza, inne tabele itp.) W dwuwymiarowej tabeli z wierszami i kolumnami komórek.

Składnia

<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<th></th>
<td></td>

Uwagi

Różne elementy tabeli i ich atrybuty treści razem definiują model tabeli. Element <table> jest elementem kontenera dla modeli tabel / danych tabelarycznych. Tabele mają wiersze, kolumny i komórki podane przez ich potomków. Wiersze i kolumny tworzą siatkę; komórki tabeli muszą całkowicie zakrywać tę siatkę bez nakładania się. Poniższa lista opisuje różne elementy modelu tabeli:

<table> - Element kontenera dla modeli tabel / danych tabelarycznych. <table> reprezentuje dane o więcej niż jednym wymiarze w formie tabeli.
<caption> - Podpis lub tytuł tabeli (jak figcaption do figure )
<col> - Kolumna (element bez zawartości)
<colgroup> - grupa kolumn
<thead> - Nagłówek tabeli (tylko jeden)
<tbody> - Treść / treść tabeli (wiele jest w porządku)
<tfoot> - Stopka tabeli (tylko jedna)
<tr> - Wiersz tabeli
<th> - komórka nagłówka tabeli
<td> - komórka danych tabeli

Semantycznie tabele służą do przechowywania danych tabelarycznych. Możesz myśleć o tym jako o sposobie wyświetlania i opisywania danych, które miałyby sens w arkuszu kalkulacyjnym (kolumny i wiersze).

Używanie tabel do układu nie jest zalecane. Zamiast tego używaj reguł CSS do układu i formatowania, w tym display: table .

Jeden znaczący wyjątek zwykle wyświetlany w branży dotyczący korzystania z układu <table> dotyczy wiadomości e-mail w formacie HTML: niektórzy klienci poczty e-mail, w tym Outlook, wycofali się do starszych silników renderujących po tym, jak Microsoft straci monopol na UE. Aby Microsoft nie mógł włączyć IE do systemu operacyjnego, po prostu wycofał silnik renderujący Outlooka do wcześniejszej wersji Trident. To wycofanie po prostu nie obsługuje nowoczesnych technologii internetowych, więc użycie układów opartych na <table> dla wiadomości e-mail HTML jest jedynym sposobem na zapewnienie zgodności między przeglądarkami / platformami / klientami.

Prosty stół

<table>
  <tr>
    <th>Heading 1/Column 1</th>
    <th>Heading 2/Column 2</th>
  </tr>
  <tr>
    <td>Row 1 Data Column 1</td>
    <td>Row 1 Data Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Data Column 1</td>
    <td>Row 2 Data Column 2</td>
  </tr>
</table>

Spowoduje to wyświetlenie <table> składającego się z trzech wszystkich wierszy ( <tr> ): jednego wiersza komórek nagłówka ( <th> ) i dwóch wierszy komórek treści ( <td> ). Elementy <th> są nagłówkami tabelarycznymi, a elementy <td> są danymi tabelarycznymi . Możesz umieścić, co chcesz, w <td> lub <th> .

Nagłówek 1 / kolumna 1	Nagłówek 2 / kolumna 2
Wiersz 1 Kolumna danych 1	Wiersz 1 Kolumna danych 2
Wiersz 2 Kolumna danych 1	Wiersz 2 Kolumna danych 2

Obejmujące kolumny lub wiersze

Komórki tabeli mogą obejmować wiele kolumn lub wierszy za pomocą atrybutów colspan i rowspan . Te atrybuty można zastosować do elementów <th> i <td> .

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
        <td>row 1 col 3</td>
    </tr>
    <tr>
        <td colspan="3">This second row spans all three columns</td>
    </tr>
    <tr>
        <td rowspan="2">This cell spans two rows</td>
        <td>row 3 col 2</td>
        <td>row 3 col 3</td>
    </tr>
    <tr>
        <td>row 4 col 2</td>
        <td>row 4 col 3</td>
    </tr>

</table>

Spowoduje w

Pamiętaj, że nie powinieneś projektować tabeli, w której zarówno wiersze, jak i kolumny nachodzą na siebie, ponieważ jest to nieprawidłowy kod HTML, a wynik jest różnie obsługiwany przez różne przeglądarki internetowe.

rowspan = Nieujemna liczba całkowita, która określa liczbę wierszy rozrzuconych przez komórkę. Domyślna wartość tego atrybutu to jeden ( 1 ). Wartość zero ( 0 ) oznacza, że komórka będzie rozciągać się od bieżącego wiersza do ostatniego wiersza tabeli ( <thead> , <tbody> lub <tfoot> ).

colspan = Nieujemna liczba całkowita określająca liczbę kolumn rozrzuconych przez bieżącą komórkę. Domyślna wartość tego atrybutu to jeden ( 1 ). Wartość zero ( 0 ) oznacza, że komórka będzie rozciągać się od bieżącej do ostatniej kolumny grupy kolumn <colgroup> grupa <colgroup> w której komórka jest zdefiniowana.

Tabela z thead, tbody, tfoot i caption

HTML udostępnia również tabele z <thead> , <tbody> , <tfoot> i <caption> . Te dodatkowe elementy są przydatne do dodawania wartości semantycznej do twoich tabel i zapewnienia miejsca dla osobnego stylu CSS.

Podczas drukowania tabeli, która nie mieści się na jednej (papierowej) stronie, większość przeglądarek powtarza zawartość <thead> na każdej stronie.

Istnieje szczególna kolejność, której należy przestrzegać, i powinniśmy mieć świadomość, że nie każdy element mieści się na swoim miejscu, jak można by się spodziewać. Poniższy przykład pokazuje, jak należy umieścić nasze 4 elementy.

<table>
 <caption>Table Title</caption> <!--| caption is the first child of table |-->
  <thead> <!--======================| thead is after caption |-->
    <tr>
      <th>Header content 1</th> 
      <th>Header content 2</th>
    </tr>
  </thead>

  <tbody> <!--======================| tbody is after thead |-->
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  
  <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->         <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |-->                                                                                                                                                                                                                                                                                               
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>

</table>

Wyniki poniższego przykładu pokazano dwukrotnie - pierwsza tabela nie ma żadnych stylów, druga tabela ma kilka zastosowanych właściwości CSS: background-color , color i border *. Style są dostarczane jako przewodnik wizualny i nie stanowią istotnego aspektu omawianego tematu.

Element	Dotyczy stylów
`<caption>`	Żółty tekst na czarnym tle.
`<thead>`	Pogrubiony tekst na fioletowym tle.
`<tbody>`	Tekst na niebieskim tle.
`<tfoot>`	Tekst na zielonym tle.
`<th>`	Pomarańczowe granice.
`<td>`	Czerwone granice.

Grupy kolumn

Czasami możesz chcieć zastosować stylizację do kolumny lub grupy kolumn. Lub do celów semantycznych możesz zgrupować kolumny razem. Aby to zrobić, użyj elementów <colgroup> i <col> .

Opcjonalny <colgroup> pozwala grupować kolumny razem. <colgroup> muszą być elementami potomnymi <table> i muszą znajdować się po dowolnych elementach <caption> oraz przed zawartością tabeli (np. <tr> , <thead> , <tbody> itd.).

<table>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    ...
</table>

Opcjonalny <col> pozwala odwoływać się do poszczególnych kolumn lub zakresu kolumn bez stosowania logicznego grupowania. Elementy <col> są opcjonalne, ale jeśli są obecne, muszą znajdować się w <colgroup> .

<table>
    <colgroup>
        <col id="MySpecialColumn" />
        <col />
    </colgroup>
    <colgroup>
        <col class="CoolColumn" />
        <col class="NeatColumn" span="2" />
    </colgroup>
    ...
</table>

Następujące style CSS można zastosować do elementów <colgroup> i <col> :

border
background
width
visibility
display (jak na display: none )
- display: none; usunie kolumny z wyświetlacza, powodując, że tabela będzie renderowana tak, jakby te komórki nie istniały

Aby uzyskać więcej informacji, zobacz Dane tabelaryczne HTML5 .

Zakres nagłówka

th elementy są bardzo często używane, aby wskazać na nagłówki kolumn i wierszy tabeli, tak jak poniżej:

<table>
    <thead>
        <tr>
            <td></td>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Row Heading 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Można to poprawić pod względem dostępności, stosując atrybut scope . Powyższy przykład zostałby zmieniony w następujący sposób:

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

scope jest znany jako atrybut wyliczony , co oznacza, że może mieć wartość z określonego zestawu możliwych wartości. Ten zestaw obejmuje:

col
row
colgroup
rowgroup

Bibliografia:

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

HTML
Stoły

Szukaj…