Ostatnio edytowany:

table

Autor: Virtual Patriot

Przeznaczenie elementu table

Element table reprezentuje tabelę HTML.

Dodatkowe techniczne informacje 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 ewentualnie elementy colgroup, następnie ewentualnie jeden element thead, następnie ewentualnie jeden element tfoot, następnie ewentualnie elementy tbody lub co najmniej jeden element tr, następnie ewentualnie jeden element tfoot (może wystąpić tylko raz jako element dziecko elementu table), 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
składnia HTML
  • <table> ... </table>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • table

Dodatkowe 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

border

Przeznaczenie atrybutu border

Atrybut border wykorzystany wraz z elementem table określa widoczność domyślnego obramowania tabeli HTML (elementu table) oraz komórek tabeli HTML (elementów td oraz elementów th).

Wartość domyślna

BRAK lub 0 w niektórych przeglądarkach internetowych (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 ma 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 jej komórek jest widoczne, ponieważ do wspomnianej tabeli HTML reprezentowanej przez element "table" został dodany atrybut "border" wraz z wartością "1".