Autor publikacji
Virtual Patriot - Administrator

table

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu table

Element table reprezentuje tabelę HTML.

Dodatkowe artykuły związane z elementem table

Informacje techniczne o elemencie table

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst opływający

Przykładowy Kod HTML

<figure>
  <table>
    <caption>Ilość przedmiotów w magazynie</caption>

    <thead>
      <tr>
        <th>przedmiot</th>
        <th>ilość</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th>szafa</th>
        <td>10</td>
      </tr>

      <tr>
        <th>stół</th>
        <td>5</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <th>suma</th>
        <td>15</td>
      </tr>
    </tfoot>
  </table>
</figure>

Kontekstem zewnętrznym przykładowego elementu "table" jest element "figure". Wspomniany element "figure" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "figure", jest prawidłowym kontekstem zewnętrznym dla elementu "table".

kontekst wewnętrzny

następujący układ elementów HTML w podanej kolejności: ewentualnie jeden element caption, następnie zero lub więcej elementów colgroup, następnie ewentualnie jeden element thead, następnie zero lub więcej elementów tbody albo zero lub więcej elementów tr, następnie ewentualnie jeden element tfoot, ponadto ewentualnie po, przed lub pomiędzy wspomnianymi elementami HTML może wystąpić zawartość skryptowa

Przykładowy Kod HTML

<figure>
  <table>
    <caption>Ilość przedmiotów w magazynie</caption>

    <colgroup>
      <col class="styl-1">
      <col class="styl-2">
    </colgroup>

    <thead>
      <tr>
        <th>przedmiot</th>
        <th>ilość</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th>szafa</th>
        <td>10</td>
      </tr>

      <tr>
        <th>stół</th>
        <td>5</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <th>suma</th>
        <td>15</td>
      </tr>
    </tfoot>

    <template id="szablon-1">
      <ins>
        <iframe src="dynamiczna-statystyka-01.html"></iframe>
      </ins>
    </template>
    <script src="skrypt-01.js"></script>
  </table>
</figure>

Kontekstem wewnętrznym przykładowego elementu "table" są elementy HTML, które nie są zabronionym kontekstem wewnętrznym elementu "table". Ponadto wspomniane elementy HTML zostały umieszczone w prawidłowej kolejności w kodzie HTML, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "caption", element "colgroup", element "thead", element "tbody", element "tfoot", element "template" oraz element "script", jest prawidłowym kontekstem wewnętrznym dla elementu "table".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<table> ... </table>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

table

Przypuszczalnie domyślne reguły CSS elementu table

table {
  display:table;
  border-spacing:2px;
}

table[border] {
  border-width:1px;
  border-style:outset;
}

Interpretacja elementu table

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu table

Atrybut Lokalny

border

Przeznaczenie atrybutu border

Atrybut border wykorzystany wraz z elementem table pozwala nam określić czy domyślne obramowanie tabeli HTML (elementu table) oraz domyślne obramowanie komórek tabeli HTML (elementów td oraz elementów th) powinny zostać wyświetlone w oknie przeglądarki internetowej.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

1 (gdy nie podaliśmy wartości)

1 (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu border

1

Wartość 1 oznacza, że domyślne obramowanie tabeli HTML oraz domyślne obramowanie komórek tabeli HTML mają zostać wyświetlone w oknie przeglądarki internetowej.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <table border="1">
      <caption>Owoce Świata</caption>

      <thead>
        <tr>
          <th>A - I</th>
          <th>J - R</th>
          <th>S - Z</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>ananas</td>
          <td>jabłko</td>
          <td>truskawka</td>
        </tr>

        <tr>
          <td>banan</td>
          <td>kokos</td>
          <td>winogrono</td>
        </tr>

        <tr>
          <td>cytryna</td>
          <td>malina</td>
          <td>wiśnia</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Owoce Świata
A - I J - R S - Z
ananas jabłko truskawka
banan kokos winogrono
cytryna malina wiśnia

Domyślne obramowanie przykładowej tabeli HTML oraz domyślne obramowanie komórek przykładowej tabeli HTML zostały wyświetlone w oknie przeglądarki internetowej, ponieważ do wspomnianej tabeli HTML reprezentowanej przez element "table" został dodany atrybut "border" wraz z wartością "1".