HTML Tabellenbeispiel
| Nummer | Vorname | Familienname, Nachname | Punkte |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
Definieren von HTML-Tabellen
Beispiel
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Versuch es selber " Beispiel erläutert werden:
Die Tische sind mit dem definierten <table> -Tag.
Die Tische sind in Tabellenzeilen geteilt mit dem <tr> -Tag.
Tabellenzeilen werden in Tabellendaten geteilt mit dem <td> -Tag.
Eine Tabellenzeile kann auch mit dem in Tabellenüberschriften unterteilt werden <th> -Tag.
Tabellendaten <td> sind die Datencontainer der Tabelle.
Sie können alle Arten von HTML-Elemente enthalten wie Texte, Bilder, Listen, andere Tabellen usw.
Eine HTML-Tabelle mit einem Border Attribute
Wenn Sie nicht über eine Grenze für die Tabelle angeben, wird es ohne Grenzen angezeigt.
Eine Grenze kann hinzugefügt werden , die mit border Attribute:
Beispiel
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Versuch es selber " Die border Attribut ist auf dem Weg aus dem HTML - Standard! Es ist besser, CSS zu verwenden.
So fügen Sie Grenzen, verwenden Sie die CSS - Eigenschaft border:
Denken Sie daran, die Grenzen zu definieren, sowohl für den Tisch und die Tabellenzellen.
Eine HTML-Tabelle mit Collapsed Borders
Wenn Sie die Grenzen zum Einsturz in einem Rahmen versehen werden soll, CSS hinzufügen border-collapse :
Eine HTML-Tabelle mit dem Cell Padding
Zelle padding gibt den Raum zwischen dem Zellinhalt und seinen Grenzen.
Wenn Sie nicht über eine Polsterung angeben, werden die Tabellenzellen ohne Polsterung angezeigt werden.
Um die Polsterung festzulegen, verwenden Sie die CSS padding Eigenschaft:
Beispiel
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
} Versuch es selber " HTML Tabellenüberschriften
Tabellenüberschriften sind mit dem definierten <th> -Tag.
Standardmäßig werden alle gängigen Browser Tabellenüberschriften fett und zentriert:
Beispiel
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Versuch es selber " Nach links ausrichten , die Tabellenüberschriften, verwenden Sie die CSS text-align Eigenschaft:
Eine HTML-Tabelle mit Border-Abstand
Grenzabstand gibt den Raum zwischen den Zellen.
Um den Grenzabstand für eine Tabelle festzulegen, verwenden Sie die CSS border-spacing Eigenschaft:
Wenn der Tabellenrahmen kollabiert ist, Grenzabstand hat keine Wirkung.
Tabellenzellen, die viele Spalten erstrecken
Um eine Zelle Spannweite mehr als eine Spalte zu machen, verwenden Sie das colspan Attribut:
Beispiel
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table> Versuch es selber " Tabellenzellen, die viele Zeilen Meßspanne
Um eine Zelle Spannweite mehr als eine Zeile zu machen, verwenden Sie das rowspan Attribut:
Beispiel
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table> Versuch es selber " Eine HTML-Tabelle mit einer Beschriftung
Um eine Beschriftung zu einer Tabelle hinzufügen, verwenden Sie das <caption> tag:
Beispiel
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table> Versuch es selber " Die <caption> Tag muss unmittelbar nach dem eingefügt werden <table> -Tag.
Eine spezielle Art für eine Tabelle
Um einen besonderen Stil für eine spezielle Tabelle zu definieren, ein Add - id - Attribut auf den Tisch:
Beispiel
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Jetzt können Sie einen besonderen Stil für diese Tabelle definieren:
table#t01 {
width: 100%;
background-color: #f1f1c1;
} Versuch es selber " Und mehr Arten hinzufügen:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
} Versuch es selber " Kapitelzusammenfassung
- Verwenden Sie die HTML <table> Element eine Tabelle definieren
- Verwenden Sie die HTML <tr> Element eine Tabellenzeile zu definieren ,
- Verwenden Sie die HTML <td> Element eine Tabellendaten zu definieren ,
- Verwenden Sie das HTML <th> Element eine Tabellenüberschrift definieren
- Verwenden Sie die HTML <caption> Element eine Tabellenbeschriftung definieren
- Verwenden Sie die CSS - border Eigenschaft , um eine Grenze zu definieren
- Verwenden Sie die CSS border-collapse Eigenschaft Zellgrenzen zum Einsturz
- Verwenden Sie die CSS padding Eigenschaft padding zu Zellen hinzufügen
- Verwenden Sie die CSS text-align Eigenschaft Zelle Text ausrichten
- Verwenden Sie die CSS border-spacing Eigenschaft den Abstand zwischen den Zellen einzustellen ,
- Verwenden Sie das colspan Attribut eine Zelle Spannweite viele Spalten zu machen
- Verwenden Sie das rowspan Attribut einer Zelle Spannweite viele Zeilen zu machen
- Verwenden Sie das id - Attribut zur eindeutigen eine Tabelle definieren
Testen Sie sich mit Übungen!
Aufgabe 1 » Übung 2» Exercise 3 » Exercise 4» Exercise 5 » Exercise 6»
HTML Tabellen-Tags
| Etikett | Beschreibung |
|---|---|
| <table> | Definiert einen Tisch |
| <th> | Definiert eine Header-Zelle in einer Tabelle |
| <tr> | Definiert eine Zeile in einer Tabelle |
| <td> | Definiert eine Zelle in einer Tabelle |
| <caption> | Definiert eine Tabellenbeschriftung |
| <colgroup> | Gibt eine Gruppe von einer oder mehreren Spalten in einer Tabelle für die Formatierung |
| <col> | Gibt Spalteneigenschaften für jede Spalte innerhalb eines <colgroup> Element |
| <thead> | Gruppen der Inhalt des Headers in einer Tabelle |
| <tbody> | Gruppen der Körper Inhalt in einer Tabelle |
| <tfoot> | Gruppen der Fußzeile Inhalt in einer Tabelle |