HTML => Tabellen

Einführung

Mit dem HTML-Element <table> können Web-Autoren Tabellendaten (z. B. Text, Bilder, Links, andere Tabellen usw.) in einer zweidimensionalen Tabelle mit Zeilen und Spalten von Zellen anzeigen.

Syntax

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

Bemerkungen

Die verschiedenen Tabellenelemente und ihre Inhaltsattribute definieren zusammen das Tabellenmodell. Das <table> -Element ist das Containerelement für Tabellenmodelle / Tabellendaten. Tabellen haben Zeilen, Spalten und Zellen, die von ihren Nachkommen angegeben werden. Die Zeilen und Spalten bilden ein Gitter. Die Zellen einer Tabelle müssen dieses Raster vollständig überdecken, ohne sich zu überlappen. Die folgende Liste beschreibt die verschiedenen Elemente des Tabellenmodells:

<table> - Das Containerelement für Tabellenmodelle / Tabellendaten. <table> repräsentiert Daten mit mehr als einer Dimension in Form einer Tabelle.
<caption> - Untertitel oder Titel der Tabelle (wie eine figcaption einer figure )
<col> - Eine Spalte (ein Element ohne Inhalt)
<colgroup> - Eine Gruppierung von Spalten
<thead> - Tabellenkopf (nur eine)
<tbody> - Tabellenkörper / Inhalt (mehrere sind in Ordnung)
<tfoot> - Tabellenfußzeile (nur eine)
<tr> - Tabellenzeile
<th> - Tabellenkopfzelle
<td> - Tabellenzelle

Semantisch sind Tabellen für das Halten von Tabellendaten gedacht. Sie können es sich als eine Möglichkeit vorstellen, Daten anzuzeigen und zu beschreiben, die in einem Arbeitsblatt sinnvoll sind (Spalten und Zeilen).

Die Verwendung von Tabellen für das Layout wird nicht empfohlen. Verwenden Sie stattdessen CSS-Regeln für Layout und Formatierung, einschließlich display: table .

Eine bemerkenswerte Ausnahme, die in der Branche in Bezug auf die Verwendung des <table> -Layouts angezeigt wird, betrifft HTML-E-Mail: Einige E-Mail-Clients, einschließlich Outlook, wurden auf ältere Rendering-Engines zurückgesetzt, nachdem Microsoft seinen Monopolfall im Vergleich zur EU verloren hatte. Damit Microsoft den IE nicht in das Betriebssystem integriert, wurde das Rendering-Modul von Outlook auf eine frühere Version von Trident zurückgesetzt. Dieses Rollback unterstützt moderne Web-Technologien einfach nicht. Daher ist die Verwendung von <table> -basierten Layouts für HTML-E-Mail die einzige Möglichkeit, die Browser- / Plattform / Client-Kompatibilität zu gewährleisten.

Einfache Tabelle

<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>

Dadurch wird eine <table> die aus drei Zeilen ( <tr> ) besteht: einer Zeile mit Kopfzeilen ( <th> ) und zwei Zeilen mit Inhaltszellen ( <td> ). <th> -Elemente sind tabellarische Überschriften und <td> -Elemente tabellarische Daten . Sie können alles, was Sie möchten, in ein <td> oder <th> .

Überschrift 1 / Spalte 1	Überschrift 2 / Spalte 2
Zeile 1 Datenspalte 1	Zeile 1 Datenspalte 2
Zeile 2 Datenspalte 1	Zeile 2 Datenspalte 2

Spalten oder Zeilen überspannen

Tabellenzellen können sich über mehrere Spalten oder Zeilen erstrecken, wobei die Attribute colspan und rowspan werden. Diese Attribute können auf die Elemente <th> und <td> angewendet werden.

<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>

Wird darin enden, dass

Beachten Sie, dass Sie keine Tabelle entwerfen sollten, bei der sich Zeilen und Spalten überlappen, da dies ungültiges HTML ist und das Ergebnis von verschiedenen Webbrowsern unterschiedlich behandelt wird.

rowspan = Eine nicht negative ganze Zahl, die die Anzahl der Zeilen angibt, die von einer Zelle überspannt werden. Der Standardwert dieses Attributs ist eins ( 1 ). Ein Wert von null ( 0 ) bedeutet, dass sich die Zelle von der aktuellen Zeile bis zur letzten Zeile der Tabelle erstreckt ( <thead> , <tbody> oder <tfoot> ).

colspan = Eine nicht negative ganze Zahl, die die Anzahl der Spalten angibt, die von der aktuellen Zelle überspannt werden. Der Standardwert dieses Attributs ist eins ( 1 ). Ein Wert von null ( 0 ) bedeutet, dass sich die Zelle von der aktuellen Spalte bis zur letzten Spalte der Spaltengruppe <colgroup> in der die Zelle definiert ist.

Tisch mit Kopf, Fuß, Fuß und Bildunterschrift

HTML stellt den Tabellen auch die <thead> , <tbody> , <tfoot> und <caption> . Diese zusätzlichen Elemente sind nützlich, um Ihren Tabellen einen semantischen Wert hinzuzufügen und Platz für ein separates CSS-Styling zu bieten.

Beim Ausdrucken einer Tabelle, die nicht auf eine (Papierseite) passt, wird bei den meisten Browsern der Inhalt von <thead> auf jeder Seite wiederholt.

Es gibt eine bestimmte Reihenfolge, die eingehalten werden muss, und wir sollten uns bewusst sein, dass nicht jedes Element wie erwartet in Einklang kommt. Das folgende Beispiel zeigt, wie unsere 4 Elemente platziert werden sollten.

<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>

Im folgenden Beispiel werden die Ergebnisse werden zweimal gezeigt - die erste Tabelle fehlt alle Stile, die zweite Tabelle hat ein paar CSS - Eigenschaften angewendet: background-color , color und border *. Die Stile werden als visueller Leitfaden bereitgestellt und sind kein wesentlicher Aspekt des vorliegenden Themas.

Element	Stile trifft zu
`<caption>`	Gelber Text auf schwarzem Hintergrund.
`<thead>`	Mutiger Text auf purpurrotem Hintergrund.
`<tbody>`	Text auf blauem Hintergrund.
`<tfoot>`	Text auf grünem Hintergrund.
`<th>`	Orange Grenzen.
`<td>`	Rote Grenzen

Spaltengruppen

In manchen Fällen möchten Sie möglicherweise eine Spalte oder eine Gruppe von Spalten formatieren. Oder Sie möchten aus semantischen Gründen Spalten zusammenfassen. Verwenden <colgroup> Elemente <colgroup> und <col> .

Mit dem optionalen <colgroup> -Tag können Sie Spalten zusammenfassen. <colgroup> -Elemente müssen <colgroup> Elemente einer <table> und müssen hinter jedem <caption> -Element und vor jedem Tabelleninhalt (z. B. <tr> , <thead> , <tbody> usw.) stehen.

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

Mit dem optionalen <col> -Tag können Sie auf einzelne Spalten oder einen Spaltenbereich verweisen, ohne eine logische Gruppierung anzuwenden. <col> -Elemente sind optional, aber falls vorhanden, müssen sie sich innerhalb eines <colgroup> -Elements befinden.

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

Die folgenden CSS-Stile können auf die Elemente <colgroup> und <col> angewendet werden:

border
background
width
visibility
display (wie in display: none )
- display: none; entfernt tatsächlich die Spalten aus der Anzeige, wodurch die Tabelle so gerendert wird, als wären diese Zellen nicht vorhanden

Weitere Informationen finden Sie unter HTML5-Tabellendaten .

Überschrift

th Elemente werden sehr häufig verwendet, um Überschriften für Tabellenzeilen und -spalten anzuzeigen, wie folgt:

<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>

Dies kann durch die Verwendung des scope für die Zugänglichkeit verbessert werden. Das obige Beispiel würde wie folgt geändert:

<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 wird als Aufzählungsattribut bezeichnet , was bedeutet, dass es einen Wert aus einem bestimmten Satz möglicher Werte haben kann. Dieses Set beinhaltet:

col
row
colgroup
rowgroup

Verweise:

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

HTML
Tabellen

Suche…