HTML -Tabellen
HTML-Tabellen ermöglichen es Webentwicklern, Daten in Zeilen und Spalten anzuordnen.
Beispiel
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Definieren Sie eine HTML-Tabelle
Eine Tabelle in HTML besteht aus Tabellenzellen in Zeilen und Spalten
Beispiel
Eine einfache HTML-Tabelle:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Tabellenzellen
Jede Tabellenzelle wird durch ein
<td>und ein </td>Tag definiert.
td
steht für Tabellendaten.
Alles zwischen <td>und </td>sind Inhalt der Tabellenzelle.
Beispiel
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Hinweis: Tabellendatenelemente sind die Datencontainer der Tabelle.
Sie können alle Arten von HTML-Elementen enthalten; Text, Bilder, Listen, sonstige Tabellen etc.
Tabellenzeilen
Jede Tabellenzeile beginnt mit einem
<tr>und endet mit einem </tr>Tag.
tr
steht für Tischreihe.
Beispiel
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Sie können beliebig viele Zeilen in einer Tabelle haben, stellen Sie nur sicher, dass die Anzahl der Zellen in jeder Zeile gleich ist.
Hinweis: Es kann vorkommen, dass eine Zeile weniger oder mehr Zellen als eine andere enthält. Das erfahren Sie in einem späteren Kapitel.
Tabellenüberschriften
Manchmal möchten Sie, dass Ihre Zellen Überschriften sind, verwenden Sie in diesen Fällen das
<th>Tag anstelle des
<td>Tags:
Beispiel
Lassen Sie die erste Zeile Tabellenüberschriften sein:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Standardmäßig ist der Text in <th>Elementen fett und zentriert, aber Sie können dies mit CSS ändern.
HTML-Übungen
HTML-Tabellen-Tags
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .