IT-Kurs HTML-Grundlagen 012_Listen und Tabellen
Listen
HTML-Listen sind wichtige Elemente zur Organisation und Darstellung von Informationen auf Webseiten. Durch die Verwendung verschiedener Listentypen können Inhalte besser strukturiert und präsentiert werden.
HTML hat drei Arten von Listen:
- Ungeordnete Liste (Unordered list): Wird mit dem
<ul>-Element erstellt, jedes Listenelement wird mit einem<li>-Element dargestellt. - Geordnete Liste (Ordered list): Wird mit dem
<ol>-Element erstellt, Listenelemente werden ebenfalls mit<li>-Elementen dargestellt, mit dem Unterschied, dass sie automatisch nummeriert werden. - Definitionsliste (Definition list): Wird mit dem
<dl>-Element erstellt, enthält<dt>-Elemente (Definitionstitel) und<dd>-Elemente (Definitionsbeschreibung).
Ungeordnete Liste
Die ungeordnete Liste ist der häufigste Listentyp. Sie fügt vor jedem Listenelement einen kleinen Kreis (auch Listenmarker genannt) ein. Sie verwendet <ul> als Container für die Liste und <li> für die spezifischen Listenelemente.
Beispiel:
<ul> <li>Eintrag 1</li> <li>Eintrag 2</li> <li>Eintrag 3</li></ul>Ergebnis:
Geordnete Liste
Im Gegensatz zur ungeordneten Liste wird jedes Element einer geordneten Liste mit Zahlen markiert. Geordnete Listen verwenden <ol> als Container für die Liste und ebenfalls <li> für die spezifischen Listenelemente.
Beispiel:
<ol> <li>Erster Eintrag</li> <li>Zweiter Eintrag</li> <li>Dritter Eintrag</li></ol>Ergebnis:
Definitionsliste
Eine Definitionsliste besteht aus den Elementen <dl> (Definitionsliste), <dt> (Definitionsbegriff) und <dd> (Definitionsbeschreibung). Definitionslisten werden normalerweise verwendet, um eine Gruppe von Begriffen und deren Definitionen darzustellen.
Beispiel:
<dl> <dt>Begriff 1</dt> <dd>Beschreibung 1</dd> <dt>Begriff 2</dt> <dd>Beschreibung 2</dd></dl>Ergebnis:
[!Zusammenfassung]
- Listenelemente können intern Absätze, Zeilenumbrüche, Bilder, Links sowie andere Listen usw. enthalten.
Tabellen
HTML-Tabellen sind leistungsstarke Elemente zur Darstellung strukturierter Daten. Eine einfache HTML-Tabelle wird durch das <table>-Element dargestellt und enthält einige wichtige Unterelemente wie <tr> (Tabellenzeile), <th> (Kopfzelle) und <td> (Tabellendatenzelle).
Beispiel:
<table> <tr> <th>Name</th> <th>Alter</th> <th>Geschlecht</th> </tr> <tr> <td>Max Mustermann</td> <td>20</td> <td>männlich</td> </tr> <tr> <td>Anna Schmidt</td> <td>21</td> <td>weiblich</td> </tr></table>Ergebnis:
Tabellenelemente:
<table>: Stellt die gesamte Tabelle dar.<thead>: Definiert den Kopfbereich der Tabelle, der<th>-Elemente für die Spaltenüberschriften enthält.<tr>: Tabellenzeile, die Kopfzellen<th>enthält.<th>: Kopfzelle, die zur Kennzeichnung von Spaltenüberschriften verwendet wird.<tbody>: Definiert den Hauptbereich der Tabelle, wobei jede Zeile<td>-Elemente für die tatsächlichen Daten enthält.<td>: Tabellendatenzelle, die die tatsächlichen Daten enthält.<tfoot>: Definiert den Fußbereich der Tabelle, wird normalerweise für Zusammenfassungen, Summen oder andere Fußinformationen verwendet.<caption>: Wird verwendet, um HTML-Tabellen einen Titel hinzuzufügen, der normalerweise oben in der Tabelle angezeigt wird.<colgroup>: Definiert eine Gruppe von Tabellenspalten<col>: Definiert Eigenschaften für Tabellenspalten.
Beispiel:
<table border="1"> <caption>Dies ist ein Tabellentitel</caption> <colgroup> <col style="width: 50px; background-color: #f2f2f2;"> <col style="width: 100px; background-color: #ddd;"> <col style="width: 150px; background-color: #f2f2f2;"> </colgroup> <thead> <tr> <th>Name</th> <th>Alter</th> <th>Stadt</th> </tr> </thead> <tbody> <tr> <td>Max Mustermann</td> <td>25</td> <td>Berlin</td> </tr> <tr> <td>Anna Schmidt</td> <td>30</td> <td>München</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">Gesamtanzahl: 2</td> </tr> </tfoot></table>Ergebnis:
Tabellenattribute:
border: Wird verwendet, um den Rahmen der Tabelle anzugeben. Der Wert ist eine Zahl, die die Rahmenbreite angibt.cellpadding: Wird verwendet, um den Abstand zwischen Zellen anzugeben. Der Wert ist eine Zahl, die die Größe des Abstands angibt.cellspacing: Wird verwendet, um den Abstand zwischen Zellenrahmen anzugeben. Der Wert ist eine Zahl, die die Größe des Abstands angibt.width: Wird verwendet, um die Breite der Tabelle anzugeben. Der Wert ist eine Zahl, die die Breite angibt.height: Wird verwendet, um die Höhe der Tabelle anzugeben. Der Wert ist eine Zahl, die die Höhe angibt.style: Wird verwendet, um den Stil der Tabelle anzugeben.
Beispiel:
<table style="border-collapse: collapse; width: 60%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);"> <caption style="font-size: 1.5em; font-weight: bold; padding: 10px; background-color: #3498db; color: #fff;">Dies ist eine schöne Tabelle</caption> <colgroup> <col style="width: 30%;"> <col style="width: 30%;"> <col style="width: 40%;"> </colgroup> <thead> <tr> <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Name</th> <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Alter</th> <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Stadt</th> </tr> </thead> <tbody> <tr> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Max Mustermann</td> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">25</td> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Berlin</td> </tr> <tr> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Anna Schmidt</td> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">30</td> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">München</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color: #3498db; color: #fff;">Gesamtanzahl: 2</td> </tr> </tfoot></table>Ergebnis:
Tabellen zusammenführen
Das Zusammenführen von Tabellen bedeutet, zwei oder mehr Zellen zu einer einzigen Zelle zu verschmelzen. Tabellenzusammenführung kann verwendet werden, um Tabellenlayouts zu vereinfachen oder bestimmte Daten hervorzuheben. Verwenden Sie das colspan-Attribut, um die Anzahl der Zeilen anzugeben, über die sich eine Zelle erstreckt, oder verwenden Sie das rowspan-Attribut, um die Anzahl der Spalten anzugeben, über die sich eine Zelle erstreckt. Der Attributwert ist eine Zahl, die die Anzahl der überspannten Zeilen angibt.
Beispiel:
<table border="1"> <tr> <td>Zelle 1</td> <td colspan="2">Horizontal zwei Spalten zusammenführen</td> <td>Zelle 4</td> </tr> <tr> <td rowspan="2">Vertikal zwei Zeilen zusammenführen</td> <td>Zelle 3</td> <td>Zelle 4</td> <td>Zelle 5</td> </tr> <tr> <td>Zelle 7</td> <td>Zelle 8</td> <td>Zelle 9</td> </tr></table>Ergebnis:
[!Zusammenfassung]
- Tabellen zeigen standardmäßig keine Rahmen an.
<tr>ist die Abkürzung für table row und steht für eine Tabellenzeile.<td>: td ist die Abkürzung für table data und steht für eine Tabellendatenzelle.<th>: th ist die Abkürzung für table header und steht für eine Tabellenkopfzelle.- Die meisten Browser zeigen Kopfzeilen als fetten, zentrierten Text an.
- Tabellen können Text, Bilder, Listen, Absätze, Formulare, horizontale Linien, Tabellen usw. enthalten.